
Learn to add images from pexels and video to a web page using image and video tags, with alt text, src paths, and multiple sources (mp4, webm, ogg).
Create and submit HTML forms using form, input, select, and textarea elements. Learn labeling, id-for accessibility, name attributes for submission, and basic validation like required and max length.
Explore HTML entities to safely display special characters in your web pages, from the less-than sign to the copyright symbol, and learn how to insert them without breaking 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.
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.
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.
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.
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 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.
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.
The creative HTML5 and CSS3 Course was created for everybody who is interested in learning web development.
Real World Projects
If you are a complete beginner we will cover all the basics to get you up and going to create your first website. If you have some web development skills already, do not worry! We will create 3 amazing projects with awesome design and animations!
A short list of things we are going to learn!
HTML5
CSS3
Responsive Design
Animations
Working with Images and SVG's
Flexbox
CSS Grid
SASS
Optimization
Accessibility
Deployment