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
- Create a folder named
HTML-CSS-course
to store all code for this course.
- Open the folder in VS Code.
- Create a file within the folder named
website.html
to start.
HTML Basics
HTML Introduction
- HTML: Hypertext Markup Language
- 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
©
®.
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.