1 00:00:07,420 --> 00:00:08,560 In this video. 2 00:00:08,560 --> 00:00:17,080 Let's look at front end development roadmaps, meaning what you need to learn before you can regard 3 00:00:17,080 --> 00:00:20,020 yourself as a front end developer. 4 00:00:20,500 --> 00:00:27,160 Before that, let's look at the requirements, before you can become a front end developer or before 5 00:00:27,160 --> 00:00:29,740 learning front end development. 6 00:00:29,770 --> 00:00:36,970 One is basic computer skills and a general understanding of the internet and browsers. 7 00:00:37,180 --> 00:00:44,020 And for this one too, I will take you through how it works, for example, how the internet works and 8 00:00:44,020 --> 00:00:47,050 how browsers renders application. 9 00:00:47,230 --> 00:00:54,640 The next requirement is a willingness to learn and stay up to date with the latest technologies and 10 00:00:54,640 --> 00:00:56,790 trends in web development. 11 00:00:56,800 --> 00:01:03,610 So we need to learn and learn, study and study to be updated in this industry. 12 00:01:03,640 --> 00:01:10,690 So if you have all these skills, one is willing to study and basic computer skills, then you are ready 13 00:01:10,690 --> 00:01:13,270 to rock front and development. 14 00:01:13,450 --> 00:01:19,600 The first step is you need to learn the basics of HTML and CSS. 15 00:01:19,870 --> 00:01:29,350 The purpose for this is to understand the structure and layout of web pages using HTML, and you also 16 00:01:29,350 --> 00:01:39,810 learn how to style web pages using CSS and also get familiar with box model Flexbox and grid system. 17 00:01:39,820 --> 00:01:43,060 All these ones I will take you through in this course. 18 00:01:43,300 --> 00:01:48,550 Then after that, you will learn what is called JavaScript and jQuery. 19 00:01:48,550 --> 00:01:55,390 Well, jQuery is normally used in more than applications, but instead we are going to use frameworks 20 00:01:55,390 --> 00:01:59,290 or libraries and exploit you as you move on. 21 00:01:59,440 --> 00:02:06,190 Well, for JavaScript you need to understand the basics of JavaScript and how it can be used to create 22 00:02:06,190 --> 00:02:07,570 interactive websites. 23 00:02:07,930 --> 00:02:13,950 Next step is you need to learn about web performance and optimization techniques. 24 00:02:13,990 --> 00:02:22,590 And this one include Understand how to improve the speed and performance of web applications and new 25 00:02:22,600 --> 00:02:29,560 to learn about Webpack, BABBEL and other tools that can help you to optimize your front end code. 26 00:02:29,590 --> 00:02:33,340 So these are the general overview that I'm going to give it to you. 27 00:02:33,340 --> 00:02:39,220 And we are going to cover about 99% of all what we are discussing. 28 00:02:39,250 --> 00:02:47,650 Next step is learn about responsive web design, and this one includes understanding how to make web 29 00:02:47,650 --> 00:02:53,320 pages look good on all devices from desktop to smartphones. 30 00:02:53,560 --> 00:03:00,820 And also you need to learn how to use media queries and how to make your web pages responsive. 31 00:03:01,030 --> 00:03:05,260 Next step is you need to understand browser compatibility. 32 00:03:05,260 --> 00:03:12,880 And this means that understand how to make your web pages work on all browsers from Internet Explorer 33 00:03:12,880 --> 00:03:19,840 to Chrome, meaning that we have different types of browsers, and this browser is renderers, your 34 00:03:19,840 --> 00:03:23,260 application or JavaScript or CSS in a different way. 35 00:03:23,290 --> 00:03:28,420 Then from there you need to learn about the accessibility and SEO. 36 00:03:28,420 --> 00:03:36,100 And this one means that understanding how to make your web pages accessible to all users, including 37 00:03:36,100 --> 00:03:38,290 those with disabilities. 38 00:03:38,650 --> 00:03:44,530 And also you need to learn how to optimize your web pages for search engines. 39 00:03:44,620 --> 00:03:49,270 Next is you need to understand Gates and version control. 40 00:03:49,270 --> 00:03:56,560 And this covers the basis of using Gates, a popular version control system to manage and track changes 41 00:03:56,560 --> 00:03:57,370 to your code. 42 00:03:57,610 --> 00:04:04,600 Understanding version controls is essential to collaborate with other developers and maintain a history 43 00:04:04,600 --> 00:04:06,880 of changes to your code. 44 00:04:07,180 --> 00:04:13,900 Next step is understand deployment and hosting deployment simply means that putting your application 45 00:04:13,900 --> 00:04:17,490 on the internet for other people to see or to use. 46 00:04:17,500 --> 00:04:21,720 And this covers the basics of deploying and hosting web pages. 47 00:04:21,730 --> 00:04:29,380 Understanding how to deploy and host your web pages is essential to make your website live and accessible 48 00:04:29,380 --> 00:04:30,700 to the public. 49 00:04:31,090 --> 00:04:35,650 Then you need to know what is UI UX design. 50 00:04:35,650 --> 00:04:44,170 Well, the role of UI UX designer is to improve the user interface and user experience of digital products 51 00:04:44,170 --> 00:04:47,020 such as websites and mobile apps. 52 00:04:47,440 --> 00:04:54,940 And this includes tasks such as conducting user research, creating wireframes and prototypes, and 53 00:04:54,940 --> 00:05:04,480 testing designs, which uses a UI designer to have a strong understanding of design principles as well 54 00:05:04,480 --> 00:05:06,910 as knowledge of user centered. 55 00:05:07,050 --> 00:05:14,470 Design methods and tools such as Sketch, Adobe XD, Envision or Figma. 56 00:05:14,490 --> 00:05:18,620 So by the end of this course you can improve your skills. 57 00:05:18,630 --> 00:05:28,320 And lastly, you need to be continuously learning and stay up to date because this industry is evolving 58 00:05:28,320 --> 00:05:34,290 because they are new, things are coming in and new frameworks are going out and new frameworks are 59 00:05:34,290 --> 00:05:35,130 coming in. 60 00:05:35,130 --> 00:05:38,940 So these are the overview of front end developer. 61 00:05:38,940 --> 00:05:44,070 In the next video, let's continue with backend development roadmap.