<br /><center><hr/><em>Posted from my blog with <a href='https://wordpress.org/plugins/steempress/'>SteemPress</a> : https://www.nairatag.com/programming/front-end-development/ </em><hr/></center><p class="has-text-align-justify">Post Covid19 period will see many people lose their jobs. Many have lost their jobs, adding to the ever-growing unemployed market. This is the time to learn a skill, such as front-end development.</p>
<p class="has-text-align-justify">Skilled manpower will be in high demand in the post-pandemic era. This is because businesses want to quickly get back on their feet and return to profitability as soon as possible. You should take advantage of the potential surge to acquire a skill that will make you relevant in the post Covid19 era.</p>
<p class="has-text-align-justify">One such skill that is in high demand is front-end development. This post tells you exactly what you need to become a front end developer in 2020.</p>
<p class="has-text-align-justify">Have you ever looked at a website you are surfing and wondered how it's designed, the way the buttons function when clicked, the way the sidebar or menu bar acts, then you start thinking if you can ever do that. Well, you can, and the good news is all those visible parts of the site are built through front end development. The brains behind them are called front-end developers.</p>
<h2>What is Front-end Development</h2>
<img src="https://www.nairatag.com/wp-content/uploads/2020/04/images-15-1.jpeg" alt="Front-end development" class="wp-image-580"/>
<p class="has-text-align-justify">Front-end development is also known as client-side development, is the practice of converting a design into a graphical interface through the use of HTML, CSS, and JavaScript so that the end-user can view and interact with them directly.</p>
<p class="has-text-align-justify">The main reason for designing a site is to ensure that the end-user can see and read the information displayed on the site easily. This looks easy on paper, but it is complicated when you consider cross-browser, cross-device, and cross-platform compatibility. All this requires careful planning on the part of the front-end developer. This brings up the question of who is a front-end developer.</p>
<h2>Who is a front-end developer?</h2>
<p class="has-text-align-justify">A front-end developer is a person that implements web design through programming languages such as HTML, CSS, and JavaScript.</p>
<p class="has-text-align-justify">You can see the work of a front-end developer everywhere and even on the <a href="https://www.nairatag.com" target="_blank" rel="noreferrer noopener">Nairatag</a> website. The way the layout, navigation is on mobile is different from desktop mode. This is one of the works of a front-end developer. They make sure that the website is responsive to different screen resolutions.</p>
<p>Now that you know who a front-end developer is let's look at the main tools used for front-end development.</p>
<h2>Tools used for front-end development</h2>
<p class="has-text-align-justify">Many tools can be used to develop the front-end of a website. Adequate knowledge of these tools is needed to build a dynamic, scalable, and well-designed website.</p>
<p>There are 3 main tools or coding language used by front-end developers. They are</p>
<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
<p class="has-text-align-justify">The front-end developer code runs on the end-user browser compared to the back end developer whose code runs on the webserver.</p>
<h2>HTML - HyperText Markup Language</h2>
<center><img src="https://www.nairatag.com/wp-content/uploads/2020/04/images-1.png" alt="HTML5 front-end development" class="wp-image-581" width="557" height="277"/><br/><i><a href="https://www.google.com/search?q=html5&amp;tbm=isch&amp;ved=2ahUKEwjo6_ui-Y_pAhUK3OAKHSGiBLAQ2-cCegQIABAC&amp;oq=html5&amp;gs_lcp=ChJtb2JpbGUtZ3dzLXdpei1pbWcQAzIECAAQQzIECAAQQzIECAAQQzIECAAQQzICCAA6BwgjEOoCECc6BAgAEANQvOEbWLb3G2DH_RtoAXAAeASAAccDiAH9GZIBBTMtNy4ymAEAoAEBsAEF&amp;sclient=mobile-gws-wiz-img&amp;ei=NKmqXuiBJYq4gwehxJKACw&amp;bih=652&amp;biw=412&amp;client=ms-android-samsung&amp;prmd=inv#imgrc=m7ILoN_VChJE1M" target="_blank" rel="noreferrer noopener">HTML5</a></i></center>

<p class="has-text-align-justify">HTML is the building block of any web development process. It is the skeleton that makes up the website. HTML code is the framework of the site, and it determines how the site looks like. The divs, p, img, link tags all form how the site looks like. The absence of HTML means there is no webpage.</p>
<p class="has-text-align-justify">HTML is an essential tool that must be learned in your front-end development journey. You need to get the foundation right.</p>
<p class="has-text-align-justify">Tim Berners-Lee developed HTML, and the latest version is HTML5. This is what you should learn to build a strong foundation in front-end development.</p>
<h2>CSS - Cascading Style Sheets</h2>
<img src="https://www.nairatag.com/wp-content/uploads/2020/04/images-16.jpeg" alt="CSS3 front-end development" class="wp-image-583"/><br/><i><a href="https://www.google.com/search?q=css3&amp;tbm=isch&amp;ved=2ahUKEwjS_vP_-o_pAhWK5RoKHaDbBEAQ2-cCegQIABAC&amp;oq=css&amp;gs_lcp=ChJtb2JpbGUtZ3dzLXdpei1pbWcQARgAMgQIABBDMgQIABBDMgQIABBDMgQIABBDMgQIABBDOgcIIxDqAhAnOgQIIxAnOgIIAFCRhwtY-ZcLYOi4C2gBcAB4BIAB1QSIAYEZkgEHMy0yLjMuMpgBAKABAbABBQ&amp;sclient=mobile-gws-wiz-img&amp;ei=A6uqXpLxOYrLa6C3k4AE&amp;bih=652&amp;biw=412&amp;client=ms-android-samsung&amp;prmd=inv#imgrc=UGoBY2RlJu4SgM" target="_blank" rel="noreferrer noopener">CSS3</a></i>
<p class="has-text-align-justify">If HTML is the framework or skeleton, then CSS is the body or makeup. CSS beautifies your website, and it makes it look presentable and adorable to the end-user. It does this thanks to the style rules specified in the style sheets.</p>
<p class="has-text-align-justify">CSS also allows you to build cross-browser, cross-device, and cross-platform websites. This is possible with an adequate understanding of the CSS grid, flexbox, media queries, and many more.</p>
<p class="has-text-align-justify">Before you get started in any web development career path, you must master coding with HTML and CSS.</p>
<p class="has-text-align-justify">HTML and CSS can be mastered in a couple of months. The good news is that you can build basic websites with HTML and CSS alone.</p>
<h2>JavaScript</h2>
<center><img src="https://www.nairatag.com/wp-content/uploads/2020/04/images-2.png" alt="JavaScript front-end development" class="wp-image-585" width="543" height="203"/><br/><i><a href="https://www.google.com/search?q=JavaScript&amp;tbm=isch&amp;ved=2ahUKEwihk97a-4_pAhVNzBQKHYTfBCQQ2-cCegQIABAC&amp;oq=JavaScript&amp;gs_lcp=ChJtb2JpbGUtZ3dzLXdpei1pbWcQAzIECAAQQzIECAAQQzIECAAQQzIECAAQQzIECAAQQzoHCCMQ6gIQJ1C41QxYhIUNYM-LDWgCcAB4AoABtwSIAb0akgEHMy01LjEuMpgBAKABAbABBQ&amp;sclient=mobile-gws-wiz-img&amp;ei=wquqXqGqGs2YU4S_k6AC&amp;bih=652&amp;biw=412&amp;client=ms-android-samsung&amp;prmd=inv#imgrc=8FsEsU56INibSM" target="_blank" rel="noreferrer noopener">Javascript</a></i></center>

<p class="has-text-align-justify">JavaScript adds functionality to a website. It lets the user interact with the webpage. JavaScript uses the Document Object Model (DOM) to manipulate the HTML webpage.</p>
<p class="has-text-align-justify">JavaScript can be used to add functions like a slideshow, online calculator, or word counter to a site. Sites like Udemy, Pinterest use JavaScript a lot to make their user interface easy to use. JavaScript on these sites allows you to pin a picture, view a course without reloading the whole page.</p>
<p class="has-text-align-justify">JavaScript is the most popular programming language out there, making it a valuable thing to learn.</p>
<h2>Git and GitHub</h2>
<center><img src="https://www.nairatag.com/wp-content/uploads/2020/04/images-3.png" alt="GitHub " class="wp-image-587"/><br/><i><a href="https://www.google.com/search?q=github&amp;tbm=isch&amp;ved=2ahUKEwiAxKvC_I_pAhVQdRQKHYR4BYMQ2-cCegQIABAC&amp;oq=git&amp;gs_lcp=ChJtb2JpbGUtZ3dzLXdpei1pbWcQARgAMgQIABBDMgQIABBDMgQIABBDMgQIABBDMgQIABBDOgQIIxAnOgcIIxDqAhAnOgIIAFDWvAxYu9QMYNbkDGgBcAB4AIABhQSIAY0lkgEHMy03LjQuMZgBAKABAbABBQ&amp;sclient=mobile-gws-wiz-img&amp;ei=m6yqXsCKK9DqUYTxlZgI&amp;bih=652&amp;biw=412&amp;client=ms-android-samsung&amp;prmd=inv#imgrc=HfEo5tg71Cw4AM" target="_blank" rel="noreferrer noopener">Github</a></i></center>

<p class="has-text-align-justify">You need a version control system. A version control system lets you keep track of the changes made to your code.</p>
<p class="has-text-align-justify">For example, you added a couple of JavaScript functions that break your code. This can cause a headache, and you think of the stress of undoing the cause manually. This is automatic with a version control system as you roll back to the previous version.</p>
<p class="has-text-align-justify"><a href="https://git-scm.com/" target="_blank" rel="noreferrer noopener">Git</a> is the most widely used version control management system, and it is crucial you know how to use it.</p>
<p class="has-text-align-justify"><a href="http://Github.com" target="_blank" rel="noreferrer noopener">GitHub</a> is a git repository hosting service. It's like a social place to store your codes, and you can even view it with GitHub pages. Keeping your codes in your system won't do you any good. You can store it on GitHub and collaborate with other developers out there.</p>
<h2>Bootstrap, Reactjs, Angular, and WordPress</h2>
<center><img src="https://www.nairatag.com/wp-content/uploads/2020/04/images-4.png" alt="" class="wp-image-589"/><br/><i><a href="https://www.google.com/search?q=bootsrap&amp;tbm=isch&amp;ved=2ahUKEwjb8Man_Y_pAhWI2uAKHSRhBckQ2-cCegQIABAC&amp;oq=bootsr&amp;gs_lcp=ChJtb2JpbGUtZ3dzLXdpei1pbWcQARgBMgIIADICCAAyAggAMgIIADICCAA6BwgjEOoCECc6BAgjECc6BAgAEEM6BAgAEANQ7rpiWPfQYmCa3GJoAXAAeAKAAcIDiAH9IZIBBTMtNi41mAEAoAEBsAEF&amp;sclient=mobile-gws-wiz-img&amp;ei=b62qXpv9Ooi1gwekwpXIDA&amp;bih=652&amp;biw=412&amp;client=ms-android-samsung&amp;prmd=inv#imgrc=vlx8xLvumzDjRM" target="_blank" rel="noreferrer noopener">Bootstrap</a></i></center>

<p class="has-text-align-justify">These are libraries and frameworks that make your front-end development job easy. They are ready-made, and you only need to pick and use them.</p>
<p class="has-text-align-justify">Your solid knowledge of HTML, CSS, and JavaScript will guide you through the use.</p>
<p class="has-text-align-justify"><a href="https://getbootstrap.com/" target="_blank" rel="noreferrer noopener">Bootstrap</a> is the most popular Html, CSS, and JavaScript library in the world. You can quickly get ready-made responsive codes there.</p>
<p class="has-text-align-justify"><a href="http://Wordpress.org" target="_blank" rel="noreferrer noopener">WordPress</a> is another platform that allows you to build a fully functional website just by dragging and dropping the elements.</p>
<p class="has-text-align-justify">Reactjs and Angular make work easier for you when building huge websites.</p>
<p class="has-text-align-justify">Your strong foundational understanding of how HTML, CSS, and JavaScript works will save you time used in dealing with bugs, reading documentation, contacting support, and so on. You can easily tweak these libraries and frameworks to your own need.</p>
<p>The fun fact is you can even develop yours if need be.</p>

## Where to learn front-end development

There are many resources on the web on places you can learn front-end development. Many are free while some are paid. You may get lost in the sea of numerous courses online and even end up learning nothing.

I recommend the [Google Africa Developer Scholarship](https://www.pluralsight.com/partners/google/africa/google-africa-developer-scholarship-2020) for any African willing to learn front-end development. It is a collaboration between Google and Pluralsight facilitated by Andela. You get a free scholarship paid fully by Google.

The scholarship gives you access to pluralsight mobile web track courses. These courses are taught by experts in the field.

You can also check out the [massive list of free online courses to take](https://www.nairatag.com/technology/free-online-courses-to-take-covid-19-massive-list/)

<p class="has-text-align-justify">Mastering the above-listed tools will set you up in the front-end development journey.</p>
<p>Goodluck.</p>

Check out the promotion on Twitter https://twitter.com/iamtaofeek/status/1255830527812210688?s=19

Do you feel I missed something, use the comment section to start a conversation.

# Reference

[Wikipedia](https://en.m.wikipedia.org/wiki/Front-end_web_development)

 <br /><center><hr/><em>Posted from my blog with <a href='https://wordpress.org/plugins/steempress/'>SteemPress</a> : https://www.nairatag.com/programming/front-end-development/ </em><hr/></center>