[Applied] Build a Simple Website

In this lesson you'll combine everything you've learned about HTML/CSS to build a real self-introduction page, deepening your overall understanding as you go. This is for people searching "HTML CSS how to build a self-introduction page."

Let's combine headings, paragraphs, links, images, Flexbox, and coloring — everything you've learned up to this point — to build a simple self-introduction page (a mini website). It follows the common structure you'll see on a real website: a header, main content, and a footer.

The sample code builds the title area at the top of the page with <header>, the profile information and links with <main>, and the copyright notice at the bottom with <footer>. Notice too how Flexbox places the profile image and text side by side, and how the links are styled to look like buttons.

A common beginner stumbling block is not knowing where to start when this many elements are combined together. A good approach for learning is to change just one rule inside the <style> tag at a time, and check how the appearance changes with each one.

Rewrite the code and grow it into a page all your own. Once you're comfortable, combining it with the JavaScript lessons lets you build pages with real interactivity, like something happening when a button is pressed. The knowledge from these 50 lessons is foundational knowledge that applies directly to real-world web development work.