I’ve been wondering since the beginning of responsive web projects, how I am supposed to build a page.
I am done with tribute page and survey form (challening but doable and rather easy to medium in terms of difficulty). Now as I started landing page I found it pretty confusing and much more demanding.
After a lot of researching and testing stuff I got pretty frustraded because I couldnt find a working solution for many many hours. Took a break, cleared my mind and as I got back on the project I started to approach it quite differently.
I decided to build it all over again from scratch but this time to build it element by element instead of trying to cover everything in one piece. Each section of the page I have in my head as one piece of code then move to another one and so on. Then I am gonna put them all together.
Feels kind of shortcut for me. I think I am missing something or doing it wrong.
The question is if this is proper way of building a webpage? Should I keep doing this or should I switch to ‘global’ way of coding asap to get away from bad coding habbits?
The term you’re looking for is best practices. From what I can tell they tend to change over time, but you can learn them by just doing a quick google search on what the current trends are.
That’s pretty much how I go about it myself. First I’ll look at the entire page as a whole drawn out on a piece of paper. It’s a very simplified version, mainly boxes representing different elements and some text, that’s it.
Next I’ll break the design down section by section (typically top to bottom) and start grouping elements into those sections: “Okay the header section is going to contain the logo, navigation, quick contact info, and a search bar.” and then I go down from there until the end of the page.
Then when you’re actually coding you can break those sections down even more like “Okay in the header section, we have a navigational menu…that’ll be an unordered list of links…” or “For the logo it’s going to be an image with text along side of it…”
I find compartmentalizing (sectioning) really helpful during the building process, especially if you’re using something like Flexbox. Eventually you begin mentally grouping things into stacked blocks and blocks within blocks. It’s all about blocks
My last piece of advice is don’t be afraid to leave yourself comments in the code. Even if it’s a simple marking as to where one section begins and ends:
<!-- Header -->
.....
<!-- navigation -->
....
....
<!-- end navigation-->
....
<!-- end Header -->
Mess around with it and find out what works for you. I can tell you comments can definitely help when you come back to a project after being away for a while.
I’ll definitely start commenting Will see how it goes.
I left out my first langing page I had been working on for days , approached it with discussed strategy and it work wonders! 2 days in, landing page is done and passing all the tests
Do you think it’s good idea to move on as soon as the project passes tests? It doesn’t look as good I want it to look and has some minor responsiveness problems(mobile), but I feel working on even harder tasks will help me to fix it later more easily.
Yeah I think it’s totally fine to move on after completing whatever goals are set forth by any given starter/practice project. The point of those is to get you using the stuff you’ve been learning as quickly as possible. Later on when it comes to your own personal projects or portfolio projects, that’s when you’ll focus on making sure everything is perfect or near perfect.
And definitely revisit old projects to improve on them. It’s a great way to not only put into practice any new stuff you’re learning, but it also helps you get into the habit of refining your code. Maybe there was a feature you wanted to implement but didn’t know how at the time, or maybe it’s just cleaning up your old code to make it more readable and concise. Creating quality, readable code is a hugely important skill to master.
Will see how it goes.