{"id":13181,"date":"2021-06-16T12:38:12","date_gmt":"2021-06-16T07:38:12","guid":{"rendered":"https:\/\/iadnanahmed.com\/?p=13181"},"modified":"2021-06-16T12:38:12","modified_gmt":"2021-06-16T07:38:12","slug":"how-to-become-a-frontend-web-developer-complete-roadmap","status":"publish","type":"post","link":"https:\/\/iadnanahmed.com\/how-to-become-a-frontend-web-developer-complete-roadmap\/","title":{"rendered":"How to become a Frontend Web Developer? Complete Roadmap"},"content":{"rendered":"<p><iframe title=\"How to become a Frontend Web Developer? Complete Roadmap \ud83d\udee3\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/cM6G50JnFYo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<div class=\"gsubBtn\">\t<div class=\"g-ytsubscribe\" data-channelid=\"UCYiWKFupNc_XWimWE8r8kBw\" data-layout=\"full\" data-theme=\"dark\" data-count=\"default\"><\/div>\n<\/div>\n<p class=\"p1\"><span class=\"s1\">Table of Contents:<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><\/p>\n<p class=\"p1\"><span class=\"s2\"><a href=\"https:\/\/www.youtube.com\/watch?v=cM6G50JnFYo&amp;t=0s\" data-lasso-id=\"1232\" target=\"_blank\" rel=\"noopener\">00:00<\/a><\/span><span class=\"s1\"> How to become a Frontend Web Developer? Complete Roadmap <\/span><span class=\"s3\">&#x1f6e3;<\/span><\/p>\n<p class=\"p1\"><span class=\"s2\"><a href=\"https:\/\/www.youtube.com\/watch?v=cM6G50JnFYo&amp;t=60s\" data-lasso-id=\"1233\" target=\"_blank\" rel=\"noopener\">01:00<\/a><\/span><span class=\"s1\"> Who is a Frontend Developer?<\/span><\/p>\n<p class=\"p1\"><span class=\"s2\"><a href=\"https:\/\/www.youtube.com\/watch?v=cM6G50JnFYo&amp;t=120s\" data-lasso-id=\"1234\" target=\"_blank\" rel=\"noopener\">02:00<\/a><\/span><span class=\"s1\"> Step 1: Basics of Frontend Development<\/span><\/p>\n<p class=\"p1\"><span class=\"s2\"><a href=\"https:\/\/www.youtube.com\/watch?v=cM6G50JnFYo&amp;t=270s\" data-lasso-id=\"1235\" target=\"_blank\" rel=\"noopener\">04:30<\/a><\/span><span class=\"s1\"> Step 2: JavaScript Libraries\/Frameworks<\/span><\/p>\n<p class=\"p1\"><span class=\"s2\"><a href=\"https:\/\/www.youtube.com\/watch?v=cM6G50JnFYo&amp;t=407s\" data-lasso-id=\"1236\" target=\"_blank\" rel=\"noopener\">06:47<\/a><\/span><span class=\"s1\"> Step 3: CSS Preprocessors<\/span><\/p>\n<p class=\"p1\"><span class=\"s2\"><a href=\"https:\/\/www.youtube.com\/watch?v=cM6G50JnFYo&amp;t=456s\" data-lasso-id=\"1237\" target=\"_blank\" rel=\"noopener\">07:36<\/a><\/span><span class=\"s1\"> Step 4: Additional Tools\/Skills<\/span><\/p>\n<p class=\"p1\"><span class=\"s2\"><a href=\"https:\/\/www.youtube.com\/watch?v=cM6G50JnFYo&amp;t=549s\" data-lasso-id=\"1238\" target=\"_blank\" rel=\"noopener\">09:09<\/a><\/span><span class=\"s1\"> how much time is required to become a complete web developer?<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">======================<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Get started with bootstrap &#8211; <a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqa2RIU0JXeGdMWXVFVlFLeWR4TDZTQW5xa19zZ3xBQ3Jtc0tubk9QbG9Vd3NRbm9mOEZLVWVMODRkcS1hQ3F5ejRfaXJISlhsVERoXzFYOTFyemRsMkk0M2daZEtlaWNLMG5CSU1SU2Z6U0c0b3dMaXJLSlR2dXM5WXBlRnlXdnZfVU9BQkZhR3NOWTNXZE1LQ0FWOA&amp;q=https%3A%2F%2Fgetbootstrap.com%2F\" data-lasso-id=\"1239\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">https:\/\/getbootstrap.com\/<\/span><\/a><\/span><\/p>\n<p class=\"p1\"><span class=\"s3\">&#x1f525;&#x1f525;&#x1f525;<\/span><span class=\"s1\">.<span class=\"Apple-converted-space\">\u00a0 <\/span>How to start freelancing as a Web Developer and get your first project? <a href=\"https:\/\/www.youtube.com\/watch?v=H45X02ohuDU&amp;t=0s\" data-lasso-id=\"1240\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">https:\/\/youtu.be\/H45X02ohuDU<\/span><\/a> <\/span><span class=\"s3\">&#x1f525;&#x1f525;&#x1f525;<\/span><span class=\"s1\">.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Every beginner in the web development industry is confused with many tools, technologies and terms used.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Some cannot even start on anything. Some are switching from one technology to another, and in the end, are too exhausted and stop learning.<span class=\"Apple-converted-space\">\u00a0<\/span><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">In this video, I will tell you how to become a front end web developer without getting exhausted.<span class=\"Apple-converted-space\">\u00a0<\/span><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">I will give you a complete roadmap to becoming a front end developer based on my self-experience.<span class=\"Apple-converted-space\">\u00a0<\/span><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">As a bonus, I will estimate how much time it is required to become a complete front end developer.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Assalam o Alaikum &amp; hi guys. Welcome to my channel. My name is Adnan Ahmed, a freelance web developer with over a decade of experience in making websites.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">If this is the first time you visit my channel, please subscribe to my channel to get more web development videos in the future.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">First thing, who is a Frontend Developer?\u00a0<\/span><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0A frontend developer is a person who codes the overall website design, including UI &amp; UX using the languages understandable by the web browsers, e.g. HTML, CSS &amp; JavaScript.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0So their job is to implement the way the website appears on your computer, laptop or mobile screens.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">As I told you earlier, every new developer&#8217;s major mistake is to start learning too many technologies at once.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">My biggest tip for every new developer is to make vertical progress than horizontal progress.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Let me explain what vertical progress is?<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">See, you need to learn the basic building blocks of front end development first, so you can quickly make a good looking website.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">They are multiple technologies on each step that are almost similar with minor differences.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The first and the base of the website is HTML. e.g. you see some paragraph of text, a heading or button etc<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0And the second thing is CSS which provide the look and feel to your website. e.g. how the paragraph text will look, regular or bold. colour of the text and the colour of the button etc<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">And the third part is Javascript as it provides the functionality in the website, e.g. what happened when you click some button, either it will submit a form or open a popup etc.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">You think of these three components of web development as the human body.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0You can say HTML is the skeleton of the body. The CSS is the skin of your body. And the JS as the functions done by your body.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">So you have to learn HTML, CSS &amp; JS first to start doing the frontend web development.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">With this, the one more skill which is necessary for a frontend developer is Responsive Web Design.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Responsive web design is a process to create web pages that looks equally good on Computer, laptop, tablet and mobile screens.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0For this, with the use of HTML and CSS, we can automatically resize, hide, enlarge or shrink elements of a website to make them look good on all devices.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">To do this, you need to write your CSS and HTML from scratch, but there are few libraries available to make life easier for you. The most famous is Bootstrap by Twitter. The link to the bootstrap is in the description.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">You can learn bootstrap quickly if you already have a good grip on HTML and CSS. And you can build a responsive website in no time.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0At this step, if someone spent a good time practising everything explained already, he\/she will be able to make a good looking and functional website.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0Now going a step further, you can learn some Javascript libraries and frameworks. These frameworks help you built the frontend without doing repetitive tasks, and you don&#8217;t write everything from scratch.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Speaking of Javascript libraries, although jQuery is not the top one on the list now, you can still learn it with Javascript to implement frontend functionalities in your website without writing too much code.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The latest list of Javascript libraries and frameworks include: React, Angular and Vue Js.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The only difference between libraries and framework is, the framework provides a predefined structure of doing things, but in the library, you are open to implementing everything you own way.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Choosing a Javascript library or framework speed up the development process and provide you to create a dynamic website or web app quickly.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">To understand the dynamic feature in a web app, if you notice on the Facebook app, for example, when you scroll the feeds, it loads the old posts without reloading the whole web page.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Sometimes it only shows a loading icon for a while, and the old stories load instantaneously.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">It makes your website or app user friendly and people not distracted while using the application as they don&#8217;t need to refresh the page manually.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Also, I will recommend React over others as it is a bit easier to learn it than others.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0Same as JavaScript libraries or frameworks, you can upgrade your CSS skill to something better.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">See, when CSS grows, it gets complicated and making one change impact too many places, and unseen bugs occur.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Secondly, CSS is old now, although there is a new version which is CSS3. But for any new feature added to it, each browser needs to adopt it. And it is a time taking process.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">So here come the CSS preprocessors like Sass, Less or Stylus. These will allow you to add variables, mixins, functions and nesting to make CSS shorter, cleaner and feature-rich.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0And using their compilers, you can convert the code to CSS.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">CSS preprocessors syntax is not very different from CSS, so it will not take much time to learn.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0Here my recommendation is to learn Sass, but you can learn Less or Stylus also.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0At this point, you are ready to look for jobs in front end development.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The couple of things which you can learn and give you an edge over others are:<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a01) A version control system that can help you maintain the history of what you have done in your code. The most popular is Git, which not only allows to you maintain the versions of code but easy to collaborate with other team members<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a02) Code Testing: Although there is not much importance given to testing, it is also necessary to deliver a bug-free website or app.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">There are different methods of testing.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Functional testing is the method in which the complete application is tested to give the required result. On the other hand, in unit testing, small units or bits of code are tested to make them bug-free.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a03) Browser Developer Tools: The browser developer tools like web inspector in the chrome browser help you inspect HTML, CSS and javascript. This way, you can see how the elements appear on the website, check which CSS is applying on some element, and see javascript functionality in JavaScript Console.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0Timeline<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">HTML, CSS &amp; Javascript: 3 &#8211; 4 months<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">React: 2 &#8211; 3 months<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Git, Code Testing, Browser Developer Tools: 1 &#8211; 2 months<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">SASS: 1 month<\/span><\/li>\n<li><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">It is an estimated timeframe to master the skills, but it all depends on how much time anyone can allocate daily to learn these skills. Some could learn quickly, and someone takes longer. But the key is to be consistent. And understand one level of skills and then go further. As I already said, don&#8217;t try to learn too many tools simultaneously but focus on one tool first and master it.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0When working on different jobs or projects, you can learn other tools quickly as you have a good understanding of core tools involved in front end development.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">I hope you guys find this helpful video to decide what technologies you need to learn to become a frontend developer, apply for jobs in your local area, or apply for freelancing projects.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Please write to me in the comments if you have any questions. Until the following video, I am signing off. Assalam-o-Alaikum<\/span><\/p>\n<p>&nbsp;<\/p>\n<p class=\"p1\"><span class=\"s1\">============================================<\/span><\/p>\n<p class=\"p1\"><span class=\"s3\">&#x2705;<\/span><span class=\"s1\"><span class=\"Apple-converted-space\">\u00a0 <\/span>WordPress Themes &amp; Plugins.<\/span><\/p>\n<p class=\"p3\"><span class=\"s4\">\u25ba<\/span><span class=\"s5\"> Astra WordPress Theme (20% OFF <\/span><span class=\"s6\">&#x1f525;<\/span><span class=\"s5\">): <a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbmtodlBSczBnNzM4bmxMNFVxQ1ZMZWVGcDhLZ3xBQ3Jtc0tuRkZtNXJRUmpVNjdkYWExLWNSV3VfMlo0UzVYeUtVRkhfbmVUbmRQRWppRlozWWV1S3RoVUNCZXV6cGwyY1BIMVFqQXhwRDItM25qRVJFcnJjaTc3bUpHY3dkSHZCSHg2NXBWMlR1STZrYXhySkduNA&amp;q=https%3A%2F%2Fiadnanahmed.com%2Frecommends%2Fkadence-theme%2F\" data-lasso-id=\"1241\"><span class=\"s2\">https:\/\/iadnanahmed.com\/recommend&#8230;<\/span><\/a><\/span><\/p>\n<p class=\"p3\"><span class=\"s4\">\u25ba<\/span><span class=\"s5\"> Astra WordPress Theme: <a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbFZHcUlLd253MUt2NFN1aTlmakJvV0FHLV9od3xBQ3Jtc0trVi1TX01aZm9TdV9zNFhyRU1ubWZfajI2SEVuVWR6QlVTZGpXdUJ6b2o4ZEZVWUxqcWJkMDFwNnd2dl9BSGx6eTVxM1A5TVpsb2hhMHF2RTc5dmhxcGRJcUVHZ1VwRUU0elpCVnJUVFBsRDNpSngzZw&amp;q=https%3A%2F%2Fiadnanahmed.com%2Frecommends%2Fastra-wordpress-theme%2F\" data-lasso-id=\"1242\"><span class=\"s2\">https:\/\/iadnanahmed.com\/recommend&#8230;<\/span><\/a><\/span><\/p>\n<p class=\"p3\"><span class=\"s4\">\u25ba<\/span><span class=\"s5\"> Elementor Pro Theme Builder: <a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbk1Ndl9sbkVpdHNqV0VfUjhjbnBXSEhadXJVZ3xBQ3Jtc0trMkdDZGw2cVpjSzVMOWhFY3NFNjcyVFQ5SzNNNl84Yk9XXzl0LWpac3ZXaEJBajFEamx3MHBaUlhlYURKX3hmUXdSWHRydVpMeWpjYUIxLUhDVWtkUEk3amppeTFlRGJkYUN6ZU5Bb3ZBMHg3d2pibw&amp;q=https%3A%2F%2Fiadnanahmed.com%2Frecommends%2Felementor-pro-theme-builder%2F\" data-lasso-id=\"1243\"><span class=\"s2\">https:\/\/iadnanahmed.com\/recommend&#8230;<\/span><\/a><\/span><\/p>\n<p class=\"p1\"><span class=\"s3\">&#x2705;<\/span><span class=\"s1\"><span class=\"Apple-converted-space\">\u00a0 <\/span>Equipment used to record my videos.<\/span><\/p>\n<p class=\"p1\"><span class=\"s7\">\u25ba<\/span><span class=\"s1\"> Canon EOS 700D + EF-S 18-55mm 3.5-5.6 is STM &#8211; International Version &#8211; <a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqblpvMVZkaTVhYzM1UThsQVRNLS04TnByYnNZQXxBQ3Jtc0tuaWhZQXZrUDFKUWRzRWZmajNWTXVyZ2VXTGxwV2kxc0FMX1BtQjlmSjB4em45NGZJT3F3OV9RbFRkOEhYY3FnSlZJOW5GWGJRTElCbThKLUEzaDF3MUt5dGhJbDRmeVBlMFI2MzR2Nl9nX1B2VExVVQ&amp;q=https%3A%2F%2Famzn.to%2F38kgCxb\" data-lasso-id=\"1244\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">https:\/\/amzn.to\/38kgCxb<\/span><\/a><\/span><\/p>\n<p class=\"p1\"><span class=\"s7\">\u25ba<\/span><span class=\"s1\"> BOYA BY-M1 3.5mm Electret Condenser Microphone with 1\/4&#8243; adapter for Smartphones iPhone DSLR Cameras PC &#8211; <a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbWMtUUR4aGJWNTNyWWFVZ0VzZFpQYzlrei1fUXxBQ3Jtc0tsV0ZvRjZGY0NsRlMwd3F0MWhZVThka0cwaGNINHplZk1QU1hUcTZSUFh1cExDSnV0eUhIT0l4MGgzYWxEZ0N0U3VPeURnb1FJVDMwdWVJN3Rkb3RUOWppajQ1V0xqcE56bFhObWcyZDA5eU81NDE1cw&amp;q=https%3A%2F%2Famzn.to%2F2U1QHSu\" data-lasso-id=\"1245\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">https:\/\/amzn.to\/2U1QHSu<\/span><\/a><\/span><\/p>\n<p class=\"p1\"><span class=\"s7\">\u25ba<\/span><span class=\"s1\"> SOMITA St-3520 Lightweight 56&#8243; Tripod &#8211; <a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbUZidS14YTlTMmhvejFoczBVbi03YXZQWTV6d3xBQ3Jtc0tuSXNadlpMREo4dEpnWFVodkczSGdIMXNMVFc1N0ZFX0xORVBnNnFHV19NOXZ2ZUo4ZDh5QWQybVpYVUQ4YkZ6X3FFaEtkMlZZOHBST3d4UXV0VG1jcktOUVZXcGZRTDk5WGFTSldqTVQ0LVNhdlNBdw&amp;q=https%3A%2F%2Famzn.to%2F3l3Fflk\" data-lasso-id=\"1246\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">https:\/\/amzn.to\/3l3Fflk<\/span><\/a><\/span><\/p>\n<p class=\"p1\"><span class=\"s7\">\u25ba<\/span><span class=\"s1\"> Selfie Ring Light with Tripod Stand and Phone Holder &#8211; <a href=\"https:\/\/www.youtube.com\/redirect?event=video_description&amp;redir_token=QUFFLUhqbG54bldqMFNkOHphRERpZWhMZG1yM240OUZPd3xBQ3Jtc0ttUTRfdkdLZHM2T29SS3RPb1JVSlZmZEp1dTVNNVNPUUphMjJYZWRRXzdUNm9PZWZDRDRyMXJrMkp4a0I0Q1BtczF6WjJMX3gyYzZwTVhJRW9GaFppNmZGeFV0TTRPcm9mRHp3dHBmT2dMb0JDbVdGNA&amp;q=https%3A%2F%2Famzn.to%2F359HEWh\" data-lasso-id=\"1247\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">https:\/\/amzn.to\/359HEWh<\/span><\/a><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Disclaimer: This video and description contain affiliate links, which means that if you click on one of the product links, I&#8217;ll receive a small commission. It helps support the channel and allows me to continue to make videos like this. Thank you for your support!<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">=============<\/span><\/p>\n<p class=\"p3\"><span class=\"s1\"><a href=\"https:\/\/www.youtube.com\/hashtag\/adnanahmed\" data-lasso-id=\"1248\" target=\"_blank\" rel=\"noopener\">#adnanahmed<\/a><\/span><span class=\"s5\">, <a href=\"https:\/\/www.youtube.com\/hashtag\/webdeveloper\" data-lasso-id=\"1249\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">#webdeveloper<\/span><\/a>, <a href=\"https:\/\/www.youtube.com\/hashtag\/webdevelopmenttutorials\" data-lasso-id=\"1250\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">#webdevelopmenttutorials<\/span><\/a>, <a href=\"https:\/\/www.youtube.com\/hashtag\/wordpresstutorials\" data-lasso-id=\"1251\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">#wordpresstutorials<\/span><\/a>, <a href=\"https:\/\/www.youtube.com\/hashtag\/wordpress\" data-lasso-id=\"1252\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">#wordpress<\/span><\/a>, <a href=\"https:\/\/www.youtube.com\/hashtag\/webdevelopment\" data-lasso-id=\"1253\" target=\"_blank\" rel=\"noopener\"><span class=\"s2\">#webdevelopment<\/span><\/a><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">how to become a frontend web developer, web developer career, web development career, web development, front end developer, front-end development, front end development, front end web developer roadmap, web development roadmap, how to become a web developer, web developer, freelance web developer, frontend development roadmap, web development roadmap 2021, web dev roadmap, web developer roadmap, web dev roadmap 2021, Web Development Tutorials, HTML, CSS, javascript, bootstrap<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents: &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;- 00:00 How to become a Frontend Web Developer? Complete Roadmap &#x1f6e3; 01:00 Who is a Frontend Developer? 02:00 Step 1: Basics of Frontend Development 04:30 Step 2: JavaScript Libraries\/Frameworks 06:47 Step 3: CSS Preprocessors 07:36 Step 4: Additional Tools\/Skills 09:09 how much time is required to become a complete web developer? [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":13182,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[120,107],"tags":[228,226,219,214,216,215,220,210,218,225,227,222,224,124,211,223,213,212,217,221,125],"acf":[],"_links":{"self":[{"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/posts\/13181"}],"collection":[{"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/comments?post=13181"}],"version-history":[{"count":2,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/posts\/13181\/revisions"}],"predecessor-version":[{"id":13184,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/posts\/13181\/revisions\/13184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/media\/13182"}],"wp:attachment":[{"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/media?parent=13181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/categories?post=13181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/tags?post=13181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}