The Creative HTML5 & CSS3 Course - Build Awesome Websites

Discover how to connect CSS to HTML using inline styles, a style tag, and an external stylesheet, with style.css linked in the head as the best practice.

Learn the basics of CSS selectors and syntax for targeting elements, classes, and IDs. Style tags like p, h3, and a with color, rgb, and hex in HTML.

Explore CSS selectors from general h1 to class and id targeting, then drill into descendant and child selectors, the star selector, and specificity in navigation and lists.

Explore how CSS specificity and the cascade decide which styles apply, comparing element, class, and ID selectors, inline styles, and the rare use of !important as a last resort.

Explore the CSS box model, including how padding, margins, borders, and the element itself shape size, and learn to use box-sizing border-box to prevent layout shifts.

Learn how margins and padding determine outside and inside space. Explore how default browser styles affect layout and how to use shorthand vs individual properties for precise spacing.

Explore the differences between pixels, ems, and rems, and learn why rems offer predictable, accessible font sizing rooted in HTML, easing responsive design and future media queries.

Learn to style a button by adjusting margins, padding, and borders. Set background color, text color, font size, and a 50% border radius to create a visually appealing button.

Explore how display types block, inline, and inline-block affect headers and links, with blocks spanning width and inline elements sitting side by side, while inline-block supports height, width, and padding.

Explore CSS positioning fundamentals by learning static, absolute, relative, fixed, and sticky positioning, centering with margins and translate, and practical container and box examples.

Learn to build a basic website using floats and flexbox, and master css pseudo classes (hover and focus) and css pseudo elements (before and after), with practical layout tips.

Explore how to build a two-column layout with floats, including setting widths, margins, and clears; style a nav, hero with a background image, center text, and responsive form elements.

Learn to use media queries for desktop, tablet, and mobile sizes with max width breakpoints. Organize mobile, tablet, and desktop css files and adjust font sizes and background colors.

Learn how vh and vw power responsive web layouts by using 100 vh and 100 vw, rem units, calc, and min-height for fluid typography and adaptive designs.

Master flexbox basics to create responsive layouts with ease. Learn how to use display flex, flex direction, wrap, justify content, align items, and order to control layout and responsiveness.

Practice flexbox to build responsive layouts with a header, nav, hero, and two-column sections. Learn centering, justify-content, align-items, min-height, and responsive image handling in css.

Overcome doubts about HTML and CSS basics by applying them through projects, building confidence with practical learning and progressively connecting concepts as you go.

Build your first travel agency website by breaking the project into simple segments, using flexbox, images, icons, fonts, and animations, then verify responsiveness with Firefox developer tools.

Create a responsive header with navigation and a hero section featuring a travel theme, anchor links, a background image with rgba gradient, and mobile-friendly typography using Google fonts.

Create the city section with a benefits block, apply gradients and background images, use flex for layout, and animate clouds with CSS, while exploring accessibility and browser prefixes.

Build a responsive HTML and CSS benefits section with a header and three feature cards, each with travel icons, titles, descriptions, and a polished flexbox layout.

Submit a form with form spree.io using a post action, name and email inputs, and a send button, then enable id-based navigation and a sticky, accessible nav.

Learn how HTML5 semantics improve accessibility by using header, nav, and main landmarks to help screen readers convey page structure and improve code clarity.

Ensure accessible contrast between backgrounds and text, test with Firefox's contrast checker (F12), adjust colors, and simulate color blindness to maintain readability.

Demonstrates keyboard-only navigation for accessible websites by using tab to reach anchor tags, buttons, inputs, and links, and emphasizes maintaining visible focus outlines and contrast.

Improve readability by avoiding center-aligned long text and maintaining consistent line height around 1.8–2.0, and use rems or ems instead of pixels for accessibility.

Improve accessibility by labeling form elements with for and id, adding required indicators, providing alt text for images (or empty for decorative), and enriching links with titles for screen readers.

Explore css grid basics to build responsive layouts with grid template columns, fr units, and repeat. Learn to position items with grid areas, gaps, and justify and align controls.

Discover when to use CSS grid vs flexbox, understand 2D layouts with grid's columns and rows, and learn practical rules for choosing or combining both tools.

Add fonts locally with font-face by defining a font-family and linking to font sources via URLs, note browser support including Internet Explorer 11, and the SAS alternative.

Learn to build a responsive first page with a hero section and navigation using flex layouts, typography, and image placement in HTML5 and CSS3.

Master CSS animations by building a page fade-in and a plant entrance using keyframes, transform, translate, rotate, and transform-origin bottom, with delays and looping effects.

Build a responsive burger menu for mobile with a slide-out navigation, comparing CSS-only and JavaScript approaches.

Identify and fix small layout issues by setting the hero width to 100%, adjusting mobile padding, and applying a max height of 80% to the plans for better responsive design.

Learn to build a responsive about section with a two-column flex layout, featuring an image and text, using CSS variables and alignment techniques for contrast and spacing.

Create a responsive image gallery using css grid, including grid-template-columns, auto-fit, and minmax to resize images with object-fit cover.

Finish the course website by adding a contact section with a simple email form and a footer. Explore responsive layout with flexbox, form wrappers, labeled inputs, and accessibility best practices.

Replace the css menu check input with a javascript toggle that animates the burger and enables in-page navigation via ids (about, contact, gallery) using a simple app.js and smooth scrolling.

Explore how Sass simplifies CSS with variables, nesting, partials, and mixins, and see how to compile to CSS with the Live Sass Compiler for organized, reusable styles.

Learn a quick card trick: grip two cards, slide your middle finger to hide one, and practice until you can perform it smoothly to impress others.

Set up a portfolio project by scaffolding index.html, organizing styles with Sass and partials, and building a header, logo, and navigation with SVG icons for a multi-page site.

Learn to use Figma to design user interfaces and prototype websites, export scalable SVGs, apply gradients and color changes, and prepare SVGs with IDs for CSS animation.

Learn to animate SVGs using keyframes, transforms, and timing controls, including transform origin, transform box, fill box, and linear looping for responsive, engaging visuals.

Learn to build mobile-friendly pages with CSS media queries, responsive typography, and centered layouts, including hiding splash, resizing SVGs, and importing Montserrat for a polished look.

Create a projects page by duplicating index.html into a new projects folder, linking to style.css, and arranging two project blocks with images using simple flex layouts and responsive tweaks.

Finish the final part by creating a contact page, copying from the projects index.html, updating navigation, styling a name, email, and message form, and deploying on Netlify with Montserrat.