HTML and CSS Fundamentals Overview

Oct 3, 2024

Review flashcards

HTML and CSS Lecture Notes

Introduction to HTML

  • Purpose of HTML: Hypertext Markup Language (HTML) is used to create and manage web pages.
  • Importance of Learning HTML:
    • Enhances resume and job prospects.
    • Useful for managing online presence for businesses.

HTML Basics

  • HTML Tags: Enclosed in angle brackets, usually in pairs.
    • Example Tags:
      • <h1>: Header tags for titles.
      • <p>: Paragraph tags for text.
      • <a>: Anchor tags for hyperlinks.
  • HTML Structure: Acts as the skeleton of a webpage.

Setting Up Development Environment

  1. Text Editor: Use Visual Studio Code (VS Code).
  2. Folder Structure:
    • Create a folder for website files.
    • Create an index.html file as the homepage.
  3. Live Server Extension: Install for live preview of HTML changes.

HTML Document Structure

  • Basic HTML Document: 
    <!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>This is an H1 heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>
  • Head vs Body:
    • <head>: Contains metadata, title, etc.
    • <body>: Contains visible content.

Working with Text

  • Header Tags: <h1> to <h6> for headings.
  • Paragraph Tags: Use <p> for paragraphs.
  • Line Breaks: Self-closing <br> tag.
  • Horizontal Rule: <hr> tag for horizontal lines.
  • Formatting Tags: <b>, <i>, <u>, etc.

Adding Links and Images

  • Hyperlinks: Use <a> tag with href attribute.
  • Images: Use <img> tag with src attribute, include alt for accessibility.

CSS Introduction

  • Purpose of CSS: Cascading Style Sheets (CSS) styles web pages.
  • CSS Syntax: 
    selector {
    property: value;
}
  • Adding CSS: Inline, internal (within <style> tags), or external (link to CSS file).

CSS Box Model

  • Components:
    • Content: Actual content of the box.
    • Padding: Space between content and border.
    • Border: Surrounds the padding and content.
    • Margin: Space outside the border.
  • Visualization: Use developer tools to visualize box model.

Layout Techniques

  • Flexbox: A layout model that provides a more efficient way to lay out, align, and distribute space among items in a container.
  • Grid: A two-dimensional layout system.

Animations and Transitions

  • CSS Animations: Define animations using @keyframes.
  • Transitions: Changes from one state to another smoothly.
  • Examples of Transformations: Translate, rotate, scale, and skew elements.

Conclusion

  • Understanding HTML and CSS is foundational for web development.
  • Practice building simple projects to solidify knowledge.