My personal practice while building websites.

#javascript #webdev #beginners #programming

If you're reading this, there's a 40% chance you're a front-end web developer, you might be a student, just getting into the field, or you might be an expert for 10+ years, one thing every single beginner front-end web developer and programmers in general, struggle is how to start that development process!
Of course we'll write the HTML first and do everything AFTER that, but still, we've got parts to design a site, HTML, CSS and JS, plus managing those 3 in order to keep the code clean and the site fast and that management is what troubles most new developers.
Every single developer out there has their own personal development procedure, and there is no wrong or right, it's totally subjective depending on what you prefer.
I'm here to share my own design and development system, which I feel might be useful if you get confused in what to do first.

Note: This procedure is recommended considering you're a beginner, you probably do now know a framework, you're getting your way around the holy trinity (HTML,CSS and JS) right now.

Initial data collection

Initialize by creating a project folder in a proper directory and not your desktop.

The first step that I take is collect all the data required for the website, this includes the images, audios, videos, backgrounds, patterns, the UX design and what not. Just everything you'll put inside the site or use as reference. Put all that inside a new folder named 'assets'. With this, you're done with your first step towards building the website.

Create the files

Now when you've collected the data, it's time to move on to the coding part, to start you'll have to create some files:

index.html
style.css
theme.css
selectors.js
script.js

These files are regarding a single page website. For the multi-page websites, I'll explain later.

index.html, you guessed it, the main page, the greeting webpage to the user.
style.css the style of that page, it'll include the the styling of particular elements in the page.
theme.css, is as it sounds, the theme of the website, here you'll define the :root variables, like theme colors, and border radius, the fonts throughout the website, any other themed element like scrollbar and other stuff, which is totally variable and could be changed in future without any hassles of going through the entire code again.
selectors.js, these includes all the document.querySelector() etc variables, the selectors stored inside variables to use inside the,
script.js file, the main JavaScript file, the logic to your website.
Having a selector file keeps your JS file clean and readable, and all you've to worry about is the code and not the selectors, because they're stored safely inside a different file.
So far, your project folder should look like this:

Coding the website

This is the fun part because we finally start the actual development.
Start off with the index file, put all the data inside, from the header icons and links, to the footer logo, everything, text, links, images, icons, purely in their original state, don't add any inline CSS or any script or CSS in the head or anywhere in the HTML, leave the HTML to be HTML.
Add the head files, add theme.css above style.css and selectors.js above script.js.
Now when you've thrown all the content inside your html file, it's time to start the styling, from the header to the footer, use a top to bottom approach and give everything the styles, the colors, sizes, background and everything, don't add the hover and clicking effects yet, leave them for later.
Now when we've completed the styling and our website looks like a static webpage, we're going to add the hover and click effects, and finally after that, comes to responsiveness. Add media queries to your website and make it functional.

Till this, you've a static and good looking webpage in your hand, now comes the JS, take all the classes and ids you think you'll use to manipulate the DOM, put them all in the selectors file. And finally start giving logic and functionality to your webpage by working on the script file.

If you've a multiple page website, what you should do it after coding the html of all those other pages, link the theme to them as well, and then give separate style sheets, try to have similar looking elements throughout your site, reusable content and a design system to reduce your styling process.

And that, is my personal procedure before starting a project with the holy trinity, hope you liked it!