Learn Building a Complete Website with HTML

We've now covered the core HTML concepts and are ready to build a complete one-page portfolio website from scratch.

You can try building it on your own or follow this step-by-step guide with code for each part.

Step-by-Step Guide

1. Website Structure Plan

Our portfolio page will include:

Header: site title and navigation links;
About: a short intro about the owner;
Portfolio: projects with images, titles, and short descriptions;
Contact: a form for visitors to reach out;
Footer: copyright and contact/social links.

2. Structure Content with Semantic HTML

Create a new index.html file and add the basic HTML structure with <!DOCTYPE html>, <html>, <head>, and <body>.

index.html

3. Header Section

Add a <header> with the owner's name and a <nav> containing links that jump to the About, Portfolio, and Contact sections.

index.html

4. About Section

Create an <section id="about"> with a heading and a short paragraph describing the owner.

index.html

5. Portfolio Section

Add a <section id="portfolio"> that lists projects with images, titles, and brief descriptions.

index.html

6. Contact Section

Create a <section id="contact"> with a simple contact form that collects name, email, and message.

index.html

7. Footer Section

Finish the page with a <footer> that includes copyright text and links to social media, phone, and email.

index.html

Bonus

To make the page more visually appealing, we can connect a CSS file and style our HTML. CSS controls colors, spacing, fonts, and layout, helping the same structure look much more polished.

For now, simply compare how the page looks with plain HTML and how it changes once basic CSS styles are applied.

index.html

index.css

Here is the link to the complete website that was built in this chapter: Julia's Website

Everything was clear?

Thanks for your feedback!

Section 5. Chapter 4

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me the full HTML code for the portfolio website?

What are some tips for customizing the sections for my own portfolio?

How can I add more projects or sections to the website?

Swipe to show menu

We've now covered the core HTML concepts and are ready to build a complete one-page portfolio website from scratch.

You can try building it on your own or follow this step-by-step guide with code for each part.

Step-by-Step Guide

1. Website Structure Plan

Our portfolio page will include:

Header: site title and navigation links;
About: a short intro about the owner;
Portfolio: projects with images, titles, and short descriptions;
Contact: a form for visitors to reach out;
Footer: copyright and contact/social links.

2. Structure Content with Semantic HTML

Create a new index.html file and add the basic HTML structure with <!DOCTYPE html>, <html>, <head>, and <body>.

index.html

3. Header Section

Add a <header> with the owner's name and a <nav> containing links that jump to the About, Portfolio, and Contact sections.

index.html

4. About Section

Create an <section id="about"> with a heading and a short paragraph describing the owner.

index.html

5. Portfolio Section

Add a <section id="portfolio"> that lists projects with images, titles, and brief descriptions.

index.html

6. Contact Section

Create a <section id="contact"> with a simple contact form that collects name, email, and message.

index.html

7. Footer Section

Finish the page with a <footer> that includes copyright text and links to social media, phone, and email.

index.html

Bonus

To make the page more visually appealing, we can connect a CSS file and style our HTML. CSS controls colors, spacing, fonts, and layout, helping the same structure look much more polished.

For now, simply compare how the page looks with plain HTML and how it changes once basic CSS styles are applied.

index.html

index.css

Here is the link to the complete website that was built in this chapter: Julia's Website

Everything was clear?

Thanks for your feedback!

Section 5. Chapter 4