Complete HTML and CSS Course Notes

Jul 14, 2024

Complete HTML and CSS Course Notes 🖥️💻📱

Introduction

Goals

  • Learn to build websites from beginner to professional level
  • Final project: Recreate youtube.com

Requirements

  • No previous coding/technical experience
  • Designed as the first step to becoming a software engineer
  • 100+ exercise in total

Before we Begin

  • Use a Mac for demonstration (similar for Windows)
  • Install two software tools: web browser (Google Chrome) and code editor (VS Code)

Installing Tools

Google Chrome

  • Go to google.com and search for Google Chrome
  • Download and install

Visual Studio Code (VS Code)

  • Go to google.com and search for VS code
  • Download and install

HTML Basics

What is HTML?

  • HTML: Hypertext Markup Language
  • Tool to create websites (e.g. YouTube, Google, Amazon)
  • Purpose: Giving instructions to the computer to build websites
  • Computer follows instructions to render the site

Creating First HTML File

  1. Create new folder: HTML-CSS-course
  2. Open folder in VS Code
  3. Create a file named website.html
  4. HTML structure:
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

HTML Syntax Rules

  • Opening tag <tagname>
  • Closing tag </tagname>
  • Example of a button 
    <button>Hello</button>
  • Paragraph element <p>content</p>
  • Syntax errors: Missing closing tags or mistyped tags will result in errors

Displaying HTML in a Browser

  • Open the saved file in Google Chrome
  • Right-click the file and select Open with Google Chrome

HTML Elements and Attributes

  • Elements: Generic term for objects on the webpage (e.g., button, paragraph)
  • Attributes: Modify behavior of elements (e.g., href for links)
  • Example: 
    <a href="https://youtube.com">Link to YouTube</a>
  • target="_blank" opens link in a new tab

CSS Basics

What is CSS?

  • CSS: Cascading Style Sheets
  • Style and change appearance of HTML elements

Creating a CSS File

  • Create buttons.html file
  • Steps to open file:
    1. Create and right-click file to open in Chrome
    2. Set up button in HTML and style it with CSS
    3. Write CSS in <style> inside <head>

CSS Syntax Rules

  • Selectors: Specifies the HTML elements to apply styles
  • Properties: Define what you want to change (e.g., background-color)
  • Values: Set to what the property should change (e.g., red)
  • Example: 
    button { background-color: red; color: white; }

Common Properties

  • background-color, color, border, height, width, font-size
  • Example of styles: 
    button { background-color: red; color: white; border: none; height: 36px; width: 100px; }
  • Use Chrome DevTools to inspect and adjust CSS

CSS Box Model

  • Margin: Outside of an element
  • Border: Edge of an element
  • Padding: Inside of an element
  • Content: What is inside the padding
  • Example of adjusting padding and margin: 
    .class-name { padding: 10px; margin: 10px; }

Text Styling

  • Adjust text using properties like font-size, font-family, color
  • Example: 
    p { font-size: 14px; font-family: Arial; color: gray; }

Advanced HTML & CSS Techniques

Nested Layouts Technique

  • Vertical Layout: Stacking items on top of each other
  • Horizontal Layout: Placing items side-by-side
  • Combine vertical and horizontal to create complex layouts
  • Structure: Create containers with <div>

CSS Grid

  • Flexible way to create row and column layouts
  • Steps to create a grid: 
    .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }
.grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; }

Using Flexbox

  • Creating flexible layouts
  • Flex container properties (display, flex-direction, justify-content, align-items)
  • Example: 
    .flex-container { display: flex; justify-content: space-between; }
.flex-item { flex: 1; }

Position Property

  • Types: static, relative, absolute, fixed
  • Example of positioning elements: 
    .fixed-header { position: fixed; top: 0; left: 0; width: 100%; }
.absolute-element { position: absolute; top: 10px; right: 10px; }

Final Project: Recreating YouTube

Home Page Setup

  • Setup header, sidebar, and content sections with CSS Grid and Flexbox

Header

  • Position fixed for the header
  • Add spacing and colors, align items using Flexbox
  • Example: 
    header { position: fixed; top: 0; left: 0; right: 0; background-color: #fff; }
.header-sections { display: flex; justify-content: space-between; }

Sidebar

  • Using <nav> for semantic structure
  • Position fixed for the sidebar
  • Example: 
    nav { position: fixed; top: 60px; left: 0; bottom: 0; width: 200px; background-color: #f8f8f8; }

Main Content

  • Grid layout for video thumbnails
  • Example: 
    .main-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 20px; }
.video-thumbnail { width: 100%; height: auto; }

Adding YouTube's Features

  • Responsive Design: Media queries for different screen sizes 
    @media (max-width: 600px) { .class { properties; } }
  • Tooltips: Showing tooltips on hover 
    .tooltip { position: absolute; visibility: hidden; }
.container:hover .tooltip { visibility: visible; }

Final Touches

  • Semantic elements for accessibility (<header>, <main>, <nav>)
  • Use comments for documentation
  • Example of comments: 
    <!-- This is a sample comment -->
  • CSS inheritance for simplified code structures

Conclusion

Next Steps

  • Learn JavaScript for interactive web content
  • Practice exercises for continued learning

Thank You & Feedback

  • Encourages feedback and comments
  • Links to JavaScript courses and other resources

Summary

  • Understanding HTML and CSS fundamentals
  • Implementing and styling web elements
  • Creating professional and responsive websites