In this project I'll walk you through how to build a basic website to promote yourself using HTML and CSS. The project will touch on useful concepts like responsiveness to make sure your site views well across multiple screen-sizes using Flexbox.
Before we begin coding our website you'll to set up some accounts and prepare some resources to be used in your project:
Get in the habit of designing your projects in Figma before beginning the code. It will make coding easier and allow you to visualize what you will be doing and more than likely make your code cleaner.
Besides the content your Figma high-fidelity mockup should look something like this mockup I prepared.
This project consists of three sections (Home section, Main section, and Footer section):
I have provided the code below to compare when you are finish. Be sure to not just copy & paste the code. If are unsure where to begin then at the very least type out each line of code and then go back and review what you did or try to rewrite the code again from memory.
In html tags have semantic meaning and some tags are used for organizing the more basic-level tags. For instance the <header> tags, <main> tags, & <footer tags are used to organize the more ordinary tags like the <h1> tag, <p> tags, and <a> tags used in the project. Tags like the link tag <a></a> can also include attributes to provide additional details about the tag. For the link tag we use the href attribute to specify the destination url for the link element and we use the target attribute to specify opening the link a new tab when using a value of "_blank".
First you'll notice the following code in the Head of my index.html file:
The link tag is used to connect your styles to the html structure you have just prepared for your website. For this project I am using two stylesheets to clearly show the purpose of each file. The reset.css file is used to clean up all the default styling that comes with web browsers and make all web browsers reset in a sense.
Copy the code from the Modern CSS Reset link from my guide What Is a CSS Reset and Why You Should Use One and then add it to your reset.css file.
Be sure that your link tag for the reset.css goes first in your index.html as your computer will read code from top to bottom with the latest code taking priority. We want your styles.css to take priority after the reset.css code runs first in the browser and resets everything.
To set up your project for responsiveness you'll want to add what is called a media query to account for tablet and desktop screen-sizes. Be default it is generally recommended to code for mobile devices and then work your way up to larger screen-sizes. The only exception would be if you know that the majority of your users will be using the desktop version; however it still can be arguably encouraged to always start with mobile as it can be easier to switch the layout and have cleaner code.
Here I have added some styling for the header and added two media queries, one for tablet and the other for desktop. You could use any pixel dimension you'd like but I used a more common 768px for tablet and 1200px for desktop. If you can try and commit this media query format to memory as this is just how it is written. We are using min-width instead of max-width because we are starting to code from mobile devices first.
Now when using media queries all you want to do is compare what current code is applied to mobile devices and then add adjustments accordingly. In this project the header changes from a row to a column for table and desktop. Tablet and desktop have the same format so we don't need to add any adjustments to the desktop media query.
In our tablet media query you will notice that I didn't add display: flex again but did change the **flex-direction: row; **. That is because we still want to use flex for larger screen-sizes and there is no reason to specify what is already in place on mobile. The flex-direction changes because if we don't specify it then the header will remain as a row for tablet and desktop which isn't what we want.
At this point you may notice that the header button "Email Me" has black text even though we are specifying white text in our styles.css. There is a couple methods to approach this:
For the quick fix you can just add the text "!important" next to your color property after the word "white" with a space between. However I recommend avoiding this method as much as possible and instead review your code to see how you can make it clearner.
From reviewing the code you'll notice that the issue is coming from the reset.css file.
The reset.css is telling the computer to give link elements a default color when a link doesn't have a class attribute. While we can comment out or remove this line of code color:currentColor; let's instead add a class of email to our email link like so:
That is beneficial because it keeps our reset file untouched.
At this point your header should be complete and responsive. It should give you an idea how to use Flexbox for the remainder of the project and tackle the Main and Footer sections. I'd like to challenge you to work on the code yourself before moving forward and seeing the solution below.
This final CSS still needs some work such as padding, margin, line-height to get to the final result, however the majority of the styling and structure is there to ensure you can finish the project. I encourage you to spend an additional 15-30min getting the styling as perfect as possible but since this is a project don't feel like you need to achieve perfection.
Helpful Tip: To get the social links on the left side on desktop you'll want to increase the width of the Footer children to 50%. You can apply borders to any element to get an idea of the spacing and size of the boxes that you are working with.
In this project you learned about Flexbox to build a responsive website using HTML and CSS. You should be able to now take these skills to build out sections on a website to a larger scale or create your own About page for your website.
No fluff. Just real projects, real value, and the path from code to cash — one useful build at a time.
