Complete HTML and CSS Course Lecture Notes

Jul 16, 2024

Complete HTML and CSS Course Lecture Notes

Overview

  • Learn to build websites from beginner to professional level.
  • By the end, you'll recreate youtube.com.
  • No previous experience required.
  • Designed as a first step to becoming a software engineer.

Course Structure

  • Starts from the basics of HTML and CSS, building step-by-step.
  • Learn major skills to create professional-level websites.
  • Over 100 exercises included.
  • HTML and CSS reference provided.
  • Use of two pieces of software: a web browser (Google Chrome) and a code editor (Visual Studio Code).

Getting Started

Software Installation

  • Google Chrome: Most popular web browser for web development.
  • VS Code: Popular code editor for web development.
    • Install by searching for it on google.com and following the instructions.

Course Setup

  1. Create a folder named HTML-CSS-course to store all code for this course.
  2. Open the folder in VS Code.
  3. Create a file within the folder named website.html to start.

HTML Basics

HTML Introduction

  • HTML: Hypertext Markup Language
    • Used to create websites.
  • Major websites use a combination of HTML and CSS.
  • HTML code gives instructions to a computer to create websites.
    • Computer reads HTML code line by line to create webpage elements.
  • Example: Creating a button element with explanatory comments.
<button>Hello</button>

HTML Syntax

  • Tags: Used to create elements. Example:
    • Opening tag: <button>
    • Closing tag: </button>
    • Content: Hello
  • Elements: Consist of two tags and content.
  • Attributes: Modify element behavior. Example:
    • href to set link destination
    • target to specify where a link opens
  • Example of link tag:
<a href="https://youtube.com" target="_blank">Link to YouTube</a>
  • HTML Structure: Must follow proper syntax or the computer won't understand the code.

HTML Elements

  • Example of basic elements:
    • Paragraph: <p>Some text</p>
    • Link: <a href="link">Link text</a>
    • Images, headings, forms, etc.

Key Properties

  • Display property differences:
    • Block (default, takes whole line): examples include <p>, <div>
    • Inline (does not take whole line): examples include <a>, <span>
    • Inline-block (inline but allows to set width/height): rare
  • CSS: How we style elements:
button {
  background-color: red;
  color: white;
}

File Paths

  • src or href attribute paths: reference image and link file paths.

Special Characters & Entities

  • HTML entities can represent special characters such as &copy;®.

CSS Basics

Introduction to CSS

  • CSS: Cascading Style Sheets
    • Used to style HTML elements, change appearance.
  • Includes practices in practical projects (e.g., creating YouTube subscribe buttons).
  • Example:
<button>Subscribe</button>
<style>
  button {
    background-color: red;
    color: white;
    border: none;
    height: 50px;
    width: 100px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

Key Properties

  • height, width: adjust element size
  • color: text color
  • background-color: element background
  • border: element border style, width, color
  • padding, margin: spacing inside/outside an element
  • font-size, font-weight: text size/weight
  • line-height: spacing between lines

Display Properties

  • Block, Inline, Inline-block: Defines element positioning behavior on pages.
  • Display values impacts layout
  • Flex-box/Grid: CSS layouts for complex page designs (more details in advanced lessons).

Advanced Uses

  • Pseudo-classes: :hover, :active
  • Add transition effect: transition: opacity .5s; for smooth hovering effects.
  • Custom attributes: e.g., setting width/height via custom CSS properties
  • Media Queries: Apply different styles based on screen size and orientation.

HTML Structure

Skeleton

  • DOCTYPE declaration: Specifies the HTML version
  • <html>: Root element
  • <head>: Metadata
  • <title>: Title in browser
  • <body>: Main content

Special HTML Elements for Text and Formatting

  • span, strong, em: Used for text-specific formatting, inline with other content.
  • div: Generic container used to group other elements, often a part of broader layout strategies.
  • Semantic Elements: header, nav, main, footer assist screen readers, Search engines; improve structure and readability.

Approach and Practice

  • Step-by-Step Approach: E.g., analyze nested layouts technique.
  • Modern layout techniques: Use Flexbox or CSS Grid instead of inline or floats.
  • Responsive Design: Using media queries to accommodate various screen sizes.

Exercises and Learning

  • Practice by creating designs from websites like Twitter, Instagram.
  • Modify, experiment with various CSS properties and see real-time changes using browser dev tools.
  • JavaScript: Next step from HTML and CSS to make website interactive.