Lära 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

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 34

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Svep för att visa menyn

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

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 34