I see lots of developers start coding straightforwardly without having any designs or plans before coding it.
If I don’t make any designs and don’t build a website step by step, I would get confused and I would not know what I’m doing, and easily it’ll overwhelm me.
If I read this blog, I’ll know how to make a website step by step without getting any confusion.
Let's build a website step by step.
and the first step is...
Think about the design
If I want to start coding and I don’t know what I should make or design, I need to think beforehand about the design I want to make.
I should put most of my time into thinking about designs, like:
- What should Navbar look like?
- What should Header look like?
- What should Footer look like?
- and …
When I am done thinking, I should go and do…
That’s right, I should design it so that I know what I am doing and how my website is going to look.
There are a few applications that I can use for designing, e.g.
https://www.figma.com/Generating Metadata for this link
https://helpx.adobe.com/xd/get-started.htmlGenerating Metadata for this link
https://penpot.app/Generating Metadata for this link
I am going to make my portfolio. let’s make it step by step.
I will use Figma for designing it, and it looks like the image below:
Thinking while designing
When I am designing the website, I have to think about how to code it, and also I have to make the code in my mind and ask myself “Will I be able to do it or not?”
If Yes, then I have to continue my designing, If not, then I have to change and design it in a way that I can code it.
Ex: How should I think about code when designing it?
“There should be an h1 at the top, and there have to be 2 divs, and I have to use a grid-box in this situation, and inside the first div, there have to be 3 buttons and inside another div, there has to be an image, and other information related to what content is and …" - It is easy to code, let's continue my designing -
Make everything ready
Before jumping to code, I need to make all the files and folders ready for the project and download all the packages.
Let’s make it clear:
- Make all the files, folders, and assets
- Download all the packages
- Add fonts
- Store the colors in the CSS file that I’ll use later
Make a Repo (optional)
I have to save my codes somewhere that I can access very easily.
GitHub is the best place to do so.
If you don’t know anything about GitHub, follow one of these tutorials:
https://youtu.be/HkdAHXoRtosGenerating Metadata for this link
https://youtu.be/apGV9Kg7icsGenerating Metadata for this link
Make an issue (optional)
Why should I make an issue?
Issues are for collaboration and assign to someone…
But I can do one for myself, and write all the tasks that I have to make them one by one.
I can add task lists, and whenever I’m done with the task I’m going to check the mark so that I can go and continue making other sections.
Now, I can start making the website.
The benefits of following these steps:
- I know what to do
- I know how to make it
- I know about colors
- I know how to make it responsive
- I know it won’t overwhelm me
- And many more…