Conteúdo do Curso
HTML Essentials
HTML Essentials
3. Images and Media
Building Entire Website
We have covered all the essential HTML topics and are now ready to build a complete website from scratch. Let's create a one-page portfolio website to showcase your projects and skills.
You can either work on it independently or follow the guide below, where we will provide you with step-by-step instructions and code related to each step.
Step-by-Step Guide
1. Website structure plan
Our website will comprise several key sections:
- Header: This section will prominently display the portfolio owner's name and facilitate navigation throughout the website;
- About: Here, visitors will find relevant information about the website owner, providing insights into their background and expertise;
- Portfolio: This section will showcase various projects, each featuring project images, titles, descriptions, and the technologies utilized;
- Contact: We will incorporate a form to gather visitor information;
- Footer: The footer will be the concluding section, featuring copyright information and links to social media profiles, phone contact, and email address.
2. Structure content with semantic HTML
Let's create a new index.html
file and set up the basic HTML document structure.
index
index
index
3. Header section
Let's build the header
with the website owner name and navigation links.
index
index
index
4. About section
Section devoted to the brief introduction and information about owner.
index
index
index
5. Portfolio section
In the portfolio section we focus on the projects with descriptions and images.
index
index
index
6. Contact section
Let's build the contact form to get in touch with the owner.
index
index
index
7. Footer section
Finally, let's add copyright information and links to social media.
index
index
index
Bonus
Let's enhance the appearance of our website not only for search engines but also for users. We can achieve this with the help of CSS, which stands for Cascading Style Sheets. Although we didn't cover CSS in this course, it's an important aspect of website design.
CSS is a style sheet language that allows us to specify the presentation and styling of a document written in a markup language like HTML. It can be the next step after learning HTML — more on this in the next chapter. For now, let's observe how CSS improves HTML.
index
index
index
Video Tutorial
Here is the link to the complete website that was built in this chapter: Julia's Website
Tudo estava claro?