Complete HTML and CSS Course Notes 🛠️📚

Jul 22, 2024

Complete HTML and CSS Course Notes 🛠️📚

Course Overview

  • Objective: Learn HTML and CSS to build websites from beginner to professional level. End goal: build a Youtube-like website.
  • No prerequisites: Suitable for beginners.
  • Structure: Step-by-step learning of HTML and CSS.
  • Exercises: Over 100 exercises to practice skills.
  • References: An HTML and CSS reference guide provided.

Software Setup

  • Tools Needed:
    • Web browser (Google Chrome recommended).
    • Code editor (Visual Studio Code recommended).
  • Installation Steps: Go to Google and download/install Chrome and VS Code.

Basic HTML

Introduction to HTML

  • HTML: Hypertext Markup Language used to create websites.
  • Syntax Rules: Tags to structure the information for the computer to follow.
    • Example: <button>Hello</button> creates a button element.
  • File Creation: Create a new folder, open it in VS Code, and create an HTML file.
  • **Commands & Elements: **Write <p>Paragraph of text</p> to create a paragraph.
  • Browser View: Right-click the HTML file and open it in Chrome.

Further HTML Elements

  • Anchor Links: Create links with <a href="url">Link text</a> to navigate to other pages/sites.
  • Attributes: href specifies the URL, target="_blank" opens in a new tab.
  • Additional Elements: Buttons inside <button>, paragraphs inside <p>.
  • HTML Tags Syntax: Tags should include a < at the beginning and a > at the end.

HTML Structure

  • **Basic Structure: **
    • <!DOCTYPE html> defines the document type.
    • <html> encompasses the entire document.
    • <head> includes meta-information and the document title.
    • <body> contains visible content on the webpage.
  • Titles: Set the title in the <head> section with <title>Title Content</title>.

Adding Content

  • Creating Elements: Use tags such as <button></button>, <p></p>, <a></a> for buttons, paragraphs, and links respectively.
  • Organizing Code: Split lines for better readability.
  • Formatting: Use margin-left, new lines, or styling for formatting.
  • Link Elements: Specify href attribute for linking.
  • Attributes Handling: Modify href, and target attributes to define link behavior.
  • HTML Comments: Use <!-- Comment --> to add comments.

Basic CSS

Introduction to CSS

  • CSS: Cascading Style Sheets used to style the layout of web pages.
  • **Syntax Rules: **
    • Style block starts with a selector followed by {} brackets.
    • Inside brackets, specify property-value pairs separated by colons :.
  • Example:
p { 
  color: red; 
  font-size: 16px; 
}
  • Style Elements: Apply styles directly in a style block within <head> or in an external CSS file.
  • Connecting CSS file: Use <link rel="stylesheet" type="text/css" href="styles.css">

Styling Elements

  • Basic Properties: color, background-color, font-size, border.
  • Practice: Modify color, background-color, height, width properties to understand their impact.
  • Configuration: Apply styles across multiple elements using common selectors.
  • Class Selectors: Use to target specific elements. Create with <element class="className">.

CSS Positioning & Grids

Positioning

  • Static Position: Default setting where elements flow top-to-bottom.
  • Fixed Position: Element stays in position within the viewport when scrolling.
  • Relative Position: Position relative to its normal location.
  • Absolute Position: Positioned relative to the nearest positioned ancestor.
  • Example: 
    .fixed-element {
  position:fixed;
  top:0;
}
.absolute-element {
  position:absolute;
  top:20px;
}

Flexbox & Grid Layouts

  • Flexbox: Used for flexible and responsive layouts.
    • Properties: display:flex;, justify-content: center;, align-items: center;
  • Grid: Two-dimensional layout system for web pages.
    • Properties: display:grid;, grid-template-columns, grid-gap
  • Example: 
    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

Advanced HTML & CSS

HTML Forms & Input Elements

  • Forms: Use <form> to collect user inputs.
  • Input Fields: Different types of input such as text, email, password, checkbox.
  • Submit: Use <button type="submit"> to submit the form.

Media Elements

  • Images: Use <img src="url" alt="description"> to insert images.
  • Embedding Videos: Use <iframe src="videoURL"> for embedded videos.

Responsive Design

  • Media Queries: Apply styles based on device width.
    • Example: @media screen and (max-width: 600px) {}

Semantic Elements

  • Sections: Use <header>, <nav>, <main>, <footer> for page structure.
  • Enhanced Access: Assist screen readers and improve SEO.

Final Project Construction

Building YouTube Clone

  • General Layout: Use Flexbox and Grid.
  • Styling: Apply learned CSS properties to emulate YouTube styling.
  • Responsive Elements: Implement media queries for responsiveness.

Advanced Features

  • Sticky Headers: Use position: fixed; top: 0; for sticky headers.
  • Interactive Elements: Implement basic JavaScript for interactivity.
  • Accessibility: Ensure use of semantic elements and correct HTML for accessibility.

Summary

  • HTML and CSS Basics: Cover foundational concepts and properties.
  • Responsive Design: Utilized media queries to create responsive layouts.
  • Positioning & Layouts: Mastered Flexbox and Grid for complex layouts.
  • Semantic HTML: Enhanced document structure and accessibility using semantic tags.

Next Steps: Learn JavaScript for adding interactivity to webpages.