Web development is getting gruesome with endless learning road map and tons of resources. Beginners can get overwhelmed and left with choices, well this article is all about explaining how to build standard front-end projects. As a budding Front-end developer, I've always built my projects anyhow that is, sometimes I dive into coding my projects directly without putting any best practices in place, well after tons of articles of read and resources I found I can say gearing towards perfection of building standard projects.
Who this article is for
• Beginners or Junior devs in front end development
• Knowledge of HTML and CSS maybe JavaScript .
• Built at least a simple landing page from scratch.
1. A good README.md file
You maybe surprised why this should be first or even part if it. Building a standard projects entails adding details about your projects; your process, what you built, your stack ( languages you used), what you want to improve on and resources that helped you. A good readme does good for other people viewing your projects( they include potential employers and friends ) they will get to understand your project from the readme. A reason also helps you when you need to visit your projects after a long time, it provides clarity and simplicity for you. In simple terms a good README is a documentation of your work. So a good README is expected to have the following
✍️ Project Name and overview
✍️ Stack ( Languages and Technologies used)
✍️ What you learnt from the project and what you want to improve on.
✍️ Resources that helped you while building the project ; it might be a stackoverflow answer or an article on CSS Grid
Now that you know what a good README file should include, you can check this article on writing markdown since README.md is a markdown file
You can also check this article on writing a good README file for your project
2. Design process :
You may say but I'm a web developer not a designer, yeah in other to build nice interface you need basic knowledge of design and actually learn to apply it when building stuffs. How do you build your Projects? Do you start with coding the HTML or writing your stylesheet?
Here are tips to guide you
A . Have you sketched your layout on a piece of paper ? Or do you have a Figma file for your project.
B . Layout before styling ; take for instance when building a landing page, do you write code for your header then go and style it, then move to the footer and do the same. It's a bad pratice. It is advised to write the whole layout in HTML first from top to bottom, this helps you notice every detail and avoids editing the markup because to forgot to add something. After writing the whole HTML, the you can style it to from top to down, it is a really smooth process.
C . Inspirations; Do you just build your project without putting good design and aesthetic into consideration. I understanding you may not have eye for good design or have understanding of design but there are plenty of resources for you. Go to sites like;
study and iterate on those inspiration and implement on your work.
3. Responsive design and Mobile first design
There has never been a time to keep up with the trend than now. You may wonder what is responsive design? What does mobile first means? Take for instance you visit the same site on a desktop and a mobile phone, the appearance of the website on both devices would be different because of the screen size and resolution, so what is responsible for what you see is Responsive Design. It simply the content displayed due to is to the screen size. Here's an example of a site on mobile and desktop
What I want to focus on is the mobile first design. Why? Up to 70 percent of web traffic comes from mobile, what it simply means is that 70 percent web activity come from mobile, so building a website no t suitably for display on mobile is not a good idea. This is what brought about Mobile first design, before web developers use Responsive Design that is, they develop the desktop version of a website first then they use media queries to adapt it to mobile, this method is stressful because desktop displays more content than mobile thereby making it time consuming.
Mobile design is not another magic of framework. What it simply means is design a mobile version your site first then you can make adaptations for a desktop site using media queries and layout tweaks( Grid and flexbox) This method is efficient and fast. You may ask how can I start designing in mobile first principle? when you want to start designing or building the front-end . Do the following;
• Minimize your browser to it minimum breakpoint or click inspect when you right click , then adjust it to a mobile screen resolution like 360×640 Or what you're comfortable with, but you must make sure it's mobile.
• Do not expand the screen at any time, make sure you finish designing it. Then you can start applying your media queries. You can check the link below for more on mobile first design and responsive Design
CSS frameworks like Bootstrap, tailwind, foundation and bulma could also be used to achieve this but it is important to have proper understanding of these things.
4. Chrome dev tools🤷♂️ ### Browser Dev tools😁.
Chrome dev tools really make live easier from testing out features you'll like to add to your page to debugging JavaScript to validation of CSS rules, nav and flex display and even responsiveness and even many other features I haven't discovered (you can help with that in the comments section). But did you notice the word "Browser Dev tools" is emboldened why? Chrome Dev tools is a specifics under browser dev tools. It's a type of dev tool by Google and it's as grown so much popularity. I have talked to few developers who complain about Chrome dev tools and gave testimonies of how they tried other dev tools and things were easier.
Note: I am not trying to degrade or discourage you From learning how to use chrome Dev tools ( infact it's recommended) even if you'll be using another tool you should try getting familiar because of some job specifications.
So it is browser developer tools generally. You can check out these Dev tools ( personally I have been using Firefox dev tools lately and I love it. It's kinda decent)
So you can check this resources for full understanding of chrome Dev tools
5. HTML5 semantic elements and SEO basics
Over the years the way HTML is written has evolved and there are new methods of writing HTML. Why should you care about HTML5 semantic? Because it a major deteminant if Search engine optimization of your site. For instance the use of divs is no longer advised insteadheader
nav
main
section
article
footer
figure
figcaptiom
picture
SEO means search engine optimization basically it means the discoverabilty of your site on the internet, it involves using the write keywords on your website and apply some SEO methodology. Why it may not be neccesary to make your projects SEO friendly, it is very important, doing this would help you build up this skills needed real projects.
Here is an article on getting started with SEO
You should start using them and getting acquainted to it. You should make use of google for more information on them and how important HTML5 semantics are. Thanks for reading this kindly drop your comments below 💙