HTML & CSS Essentials: Free Full Course

Career and Resume Value

HTML and CSS skills are valuable for any career since nearly every business has an online presence. Knowing how to manage a website can make you stand out to employers, even if web development isn't your primary career path.

What is HTML

HTML (HyperText Markup Language) uses tags to tell web browsers how to display content. Tags typically come in pairs with content between them. HTML provides the structural foundation of a webpage, like the skeleton of a building.

What is CSS

CSS (Cascading Stylesheets) adds visual styling to HTML. While HTML is the structure, CSS provides the colors, fonts, spacing, and design—like the interior decoration of a building.

Setting Up Your Environment

Download VS Code (a free text editor) and a modern web browser like Chrome or Firefox. Create a project folder and install the Live Server extension in VS Code to auto-refresh your browser as you code.

Basic HTML Document Structure

Every HTML document needs a DOCTYPE declaration, html tags, head (for metadata and title), and body (for visible content). The head contains information about the page; the body contains what users see.

Structure of an HTML document

Header Tags (H1–H6)

Header tags define headings of different sizes. H1 is the largest and typically used for main titles; H2–H6 decrease in size. Use them for titles and large text, not for styling.

Header tag sizes from largest to smallest

Paragraph and Line Break Tags

Paragraph tags (P) group text into blocks separated by line breaks. Browsers ignore extra spaces and line breaks in the source code. Use BR for manual line breaks and PRE for pre-formatted text that preserves spacing.

Horizontal Rule and Comments

HR creates a horizontal line across the page. Comments are notes in the code that don't display to users; they use the syntax <!-- comment -->.

Hyperlinks (Anchor Tags)

Anchor tags (A) create clickable links. Use the href attribute to specify the destination (absolute URL like google.com or relative path like lyrics.html). Target attribute can open links in a new tab; title attribute shows a tooltip.

How to create a hyperlink

Images

Use the self-closing IMG tag with src (source file path) and alt (alternative text for accessibility). Set height and width to control size. Images can be made clickable by wrapping them in anchor tags.

Audio Files

Use AUDIO tags with SOURCE elements to embed sound. Add controls attribute for play/pause buttons. Use muted attribute to auto-play silently. Loop attribute repeats playback. Include multiple formats as fallbacks.

Video Files

Use VIDEO tags similar to audio. Set width/height to control size. Add controls for playback buttons. Autoplay should include muted attribute. Include multiple video formats (MP4, WebM) as fallbacks for browser compatibility.

Favicon

A favicon is a small icon displayed in the browser tab. Create or download an image (96×96 pixels minimum), save it to your project folder, and link it in the head using a LINK tag with rel="icon".

Text Formatting Tags

Use B for bold, I for italic, U for underline, DEL for strikethrough, SMALL for smaller text, SUB for subscript, SUP for superscript, TT for monospaced, and MARK for highlighting. These add semantic meaning and visual emphasis.

Common text formatting tags

Span and Div Tags

SPAN is an inline container for styling specific text within a line. DIV is a block-level container that takes up full width and starts on a new line. Both are used with CSS to apply styling to groups of elements.

Span vs. Div containers

Lists: Unordered, Ordered, and Description

UL creates bulleted lists, OL creates numbered lists, and DL creates key-value pairs (terms and definitions). Each list item uses LI for unordered/ordered, DT for terms, and DD for definitions.

Three types of HTML lists

Tables

Tables use TABLE, TR (row), TH (header cell), and TD (data cell) tags. Set border attribute for visible borders. Align attribute centers content. Rows and columns organize tabular data.

Buttons

BUTTON tags create clickable buttons. Style with CSS (font-size, background-color, border-radius). Buttons can link to pages using anchor tags or execute JavaScript with onclick attribute.

Forms and Input Elements

FORM tags wrap input elements. Common inputs include text boxes, passwords, emails, phone numbers, dates, numbers, radio buttons, checkboxes, dropdowns, file uploads, and text areas. Use labels for accessibility and required attribute for validation.

Common HTML form input types

Semantic HTML: Header, Nav, Main, Footer

Semantic tags describe their meaning. HEADER holds introductory content (title, logo, nav). NAV groups navigation links. MAIN contains primary page content. FOOTER holds concluding content (copyright, contact). These improve accessibility and SEO.

Semantic HTML page structure

Three Ways to Apply CSS

Inline CSS uses the style attribute directly on elements. Internal CSS uses STYLE tags in the HEAD. External CSS uses a separate .css file linked with a LINK tag. External stylesheets are most reusable and maintainable.

Three methods of applying CSS

CSS Selectors: Element, ID, Class

Element selectors target all instances of a tag (e.g., P). ID selectors target one unique element using # (e.g., #header). Class selectors target multiple elements using . (e.g., .box). IDs are unique; classes are reusable.

CSS Colors

Colors can be specified using named colors (red, tomato), RGB values (rgb(255, 0, 0)), hexadecimal (#FF0000), or HSL (hsl(0, 100%, 50%)). HSL is intuitive: Hue (0-360°), Saturation (%), Lightness (%).

Fonts and Google Fonts

Use font-family to set typeface. Provide fallback fonts separated by commas. Sans-serif fonts (Verdana, Arial) are easier to read on screens. Google Fonts offers free web fonts; link them in the HEAD or download locally using @font-face.

Borders

Set border style (solid, dashed, dotted, double), width (pixels), and color. Shorthand: border: 3px solid red. Use border-radius to round corners. Directional borders: border-top, border-bottom, border-left, border-right.

Text and Box Shadows

text-shadow adds shadow to text with horizontal offset, vertical offset, blur radius, and color. box-shadow adds shadow to elements. Multiple shadows are comma-separated. Shadows create depth and visual interest.

Margins and Padding

Margins are space outside an element's border. Padding is space inside, between content and border. Both can be set on all sides (margin: 10px) or individually (margin-top, margin-right, margin-bottom, margin-left). margin: auto centers block elements.

Margin vs. Padding

Float Property

Float (left or right) removes an element from normal flow, allowing other content to wrap around it. Useful for wrapping text around images. display: flow-root on the container prevents overflow.

Overflow Property

Controls behavior when content exceeds container size. Values: visible (default, shows overflow), hidden (hides overflow), scroll (adds scrollbars), auto (scrollbars only if needed), clip (hides with overflow-clip-margin).

Display Property

Block elements start on new lines and take full width. Inline elements flow within text. inline-block combines both. none hides the element entirely. visibility: hidden hides but reserves space.

CSS display property values

Width and Height

Set element dimensions in pixels or percentages. max-width and max-height cap size. min-width and min-height enforce minimum size. box-sizing: border-box includes padding and borders in width/height calculations.

Position Property

Static (default) follows normal flow. Relative positions relative to normal position using top/bottom/left/right. Fixed positions relative to viewport (stays in place when scrolling). Absolute positions relative to nearest positioned ancestor. Sticky stays in place until scrolled past.

Background Images

Use background-image: url() to set an image. background-repeat controls tiling (no-repeat, repeat). background-position centers or positions the image. background-attachment: fixed keeps image fixed while scrolling. background-size: cover fills the container.

CSS Combinators

Descendant (space) selects nested elements. Child (>) selects direct children only. General sibling (~) selects siblings. Adjacent sibling (+) selects the next sibling only. Combinators explain relationships between selectors.

Pseudo-Classes

Pseudo-classes target elements in specific states. :hover applies on mouse over. :active applies while clicking. :visited applies to visited links. :link applies to unvisited links. :nth-child(n) targets specific children. :not() excludes elements.

Pseudo-Elements

Pseudo-elements style specific parts of elements. ::first-letter styles the first letter. ::first-line styles the first line. ::before and ::after add content before/after elements. ::selection styles highlighted text. ::marker styles list bullets.

Pagination

Pagination separates content into numbered pages. Create links for each page number plus previous/next arrows. Use CSS to highlight the current page and style hover effects. Useful for limiting results per page.

Dropdown Menus

Create a button with a hidden content div. Use display: none to hide initially. On hover, set display: block to show. Position: absolute removes the menu from normal flow. Hover on parent shows the dropdown.

Navigation Bars

Use NAV with UL and LI elements. Float LI left for horizontal layout or keep vertical. Style links with color, padding, and background. On hover, change background color. Remove default list bullets with list-style-type: none.

Semantic Page Layout

Combine HEADER, NAV, MAIN (with SECTION/ARTICLE/ASIDE), and FOOTER. Use float or flexbox to arrange columns. Responsive design adjusts layout for mobile using @media queries. Semantic tags improve accessibility and SEO.

Image Galleries

Create DIV containers for each image with display: inline-block. Add borders and margins for spacing. On hover, change border color. Images can link to full-size versions. Galleries showcase multiple images in a grid.

Font Awesome Icons

Font Awesome provides free icons via a kit. Link the kit script in the HEAD. Use I elements with Font Awesome classes (fa, fa-icon-name) to display icons. Icons can be colored, sized, rotated, and animated with CSS.

Flexbox Basics

display: flex makes a container flexible. flex-direction sets row (default) or column layout. justify-content aligns on main axis (flex-start, center, space-between, space-around, space-evenly). align-items aligns on cross axis. flex-wrap allows wrapping.

Flexbox layout steps

Transform Property

Transforms modify element appearance without affecting layout. translate() moves elements. rotate() spins on X/Y/Z axes. scale() enlarges or shrinks. skew() distorts. Multiple transforms can be combined in one property.

CSS Animations

Define animations with @keyframes, specifying CSS changes at 0%, 50%, 100% or from/to. Apply with animation-name and animation-duration. animation-iteration-count repeats (or infinite). animation-timing-function controls speed (ease-in-out, linear, steps). animation-direction reverses or alternates.

How to create CSS animations