HTML & CSS for Beginners: Build Real Projects (2026 Edition)

Create a portfolio site navbar with a logo and navigation links using html skeleton and css, styled via flexbox, max width 1024px, and theme color variables.

Build the hero section of a portfolio site with HTML and CSS, featuring a left text block (heading, paragraph, contact button) and right image using flexbox in a 1024px container.

Build a fixed left social links panel and a quote section using semantic HTML, with blockquote and figcaption, and CSS for positioning and decorative quotes.

Explore building a responsive projects grid with CSS grid for two-dimensional layouts, featuring cards with images, tags, titles, descriptions, and buttons, styled via global CSS and reusable button patterns.

Develop and organize a skills and about section using reusable section headers, html structure for skills and categories, and css flexbox layouts with an infinite up-and-down animation.

Create a contacts section with a left paragraph and right contact cards, and build a footer with a logo, email link, and social icons, styled via flexbox and hover effects.

We finalize a homepage with pure HTML and CSS and plan when adding projects, about, and contacts pages, highlighting semantic elements, grid and flexbox layout, and responsive design.

Explore responsive design concepts, learn how media queries and breakpoints adapt layouts across devices, and apply flexible layouts and mobile-first techniques for accessible, SEO-friendly websites.

Learn to build a responsive portfolio site using HTML & CSS for mobile and tablet, applying CSS gaps and media queries to adapt the navbar, hero, and images.

Learn to build a responsive portfolio with css grid and flex, using media queries to adapt project cards, images, and sections for mobile and desktop.

Apply the mobile styles to tablets with a max-width up to 2024 px. Hide social icons and stack text and images for a clean tablet view.

Build and test a responsive portfolio site with mobile and tablet layouts, practice HTML and CSS across pages, and explore media queries, orientation, and upcoming CSS preprocessors and frameworks.

Explore CSS preprocessors, their variables, nesting, mixins, and functions, and learn how Sass, Less, and Stylus compile to standard CSS for maintainable, efficient styles.

Install node and npm, install and run Sass, and compile Sass to CSS. Learn nesting, mixins, variables, and responsive media queries through a real-world Sass workflow.

Discover Sass advanced features like partials, modules, and the use of export to organize styles, share variables, and build reusable mixins, extendable styles, and functions.

Explore css preprocessors, focusing on sass, and learn to use nesting, variables, mixins, functions, partials, modules, and extend, then compile to css and apply to real projects.

Compare Tailwind CSS and Bootstrap, which speed front-end development with pre-built components and responsive utilities, against trade-offs of learning curves and potential code bloat.

Explore Tailwind CSS's utility-first approach, configure the build, and start styling with low-level classes, purging unused styles to keep production CSS lean.

Build a complete checkout page with Tailwind using only utility classes, including billing details, card details, and payment method sections, without writing css.

Explore building a checkout page with bootstrap, via npm or CDN, compare to tailwind, and optimize production by purging unused styles and creating a custom bootstrap build.

Celebrate finishing the html & css for beginners course, proving your commitment. Share a quick testimonial and explore the mentorship to build real projects and pursue remote jobs.