Building a website can often be overwhelming. In this article, I’ll show you how to approach building a website from scratch…
Just a note…
This article is more about walking you through the process. process of creating a website, rather than the technical side of things. If you’re coming here because you want to learn how to code websites, check out Learning Web Development or my series on Learning HTML.
The Final Product
Here’s the final product of the site I’ll build. today. Take a look at it and keep that in mind as we go through the tutorial.
This is going to be a fictional site about Boberick the Llama (sometimes I get the weirdest ideas…)
1. Plan Your Design
The first step with any website is always to know what you want on it and (loosely) how you want it to look. So the first step is to make a rough sketch, either on paper or on the computer, whichever is easier for you.
Remember, it doesn’t have to look good.
strong> Here’s mine:
As you can see, it’s very rough. The lines aren’t straight and nothing is even, but I can still see what the site will look like and what sections I should have.
In this layout, I have a header (navigation bar), three sections, and a footer. of page.
2. Get the configured ‘boiler code’
Now, it’s time to get the basic code you have at the start of any website (this is commonly known as boilerplate).
Do this :
Create a new folder on your computer for the website
Create new empty index.html and style.css files inside
Add the Basic ‘boot boilerplate’ in your index.html file:
Boberick the llama
Just testing this works!
Finally, open your index.html in a web browser to check that everything works:
This article will be more about explaining the process of building a website, so I won’t explain the actual code in detail, but you can follow along if you’re interested. or want.
If so, follow the steps above to get started!
3. Create the elements in your layout
Now it’s time to create the layout/section elements you planned in step 1!