Nowadays we can’t imagine our lives without websites and apps — they changed everything. And as web development continues to grow exponentially, there remains an that is projected to grow over a 10-year period. immense demand for web developers With a wide range of possible ways to become a web developer, most learners are not sure how to begin. In this article, you will find a step-by-step plan on how to become a web developer in 5 months. This article answers three main questions: Part 1: WHY learn to code? Part 2: WHAT you will learn? (the 5-month plan) Part 3: WHEN to start looking for a job? Part 1: WHY learn to code? You can improve your yearly income According to Paysa, a salary comparison website, “A Web Developer earns an average of $91,587, ranging from $77,544 to $103,370, with top earners (the top 10%) earning more than $117,646. Learn more. Your job will be in high demand over 10 years Isn’t it great to receive job offers on a weekly basis? Don’t be afraid that tomorrow you may not have a job. Once established as a highly-skilled web developer, you’ll be even more in demand. Recruiters will be hunting for you…. The United States Bureau of Labor Statistics says, “Employment of web developers is projected to grow 15 percent [through] 2026, .” much faster than the average for all occupations The Bureau of Labor Statistics is no joke. Please read their data and analysis . here — not tied to a specific location You will get flexibility Many developers travel while they work spending months in various countries while their clients or employers are based in another. But ultimately you decide whether to work for a company or as a freelancer, in the office or at home. And the best part is that you can start your career in web development in just 5 to 6 months… Don’t let these stop you Top Five Misconceptions — 1: I need a computer science degree to become a web developer. Not true. IT companies generally do not require a degree or diploma. They care mostly about your actual skills that bring value and ultimately profit to their business. 2: I need to spend years to become a web developer. False! Generally, you need no more than 5 to 6 months to get the required expertise. After this short period, you can start your career in web development. 3: I am already 30–40 years old — too late to start. It’s never too late. Again, companies only care about your skills and do not care about your age. If you possess the right skills, you will get the job. Remember that today’s demand for web developers is higher than the supply, and this trend is expected to increase over the years. 4: I need to spend a fortune to become a web developer. Again, not true. With online education getting better and more affordable each year, the investment is minimal, less than $50. A comprehensive list of resources, both free and paid, is at the end of the article. 5: I should be super smart and really good at math. False! Basic math knowledge on a high-school level is enough. You don’t need to be a math expert. What you need is the mindset of a problem solver, motivation and discipline. Do you have those? Then you become a web developer. will Now that we’re done with the misconceptions, let’s move on to What You Will Learn . We’ve created a study plan for you to learn web development in 5 months. Many learners spend far too much time and effort trying to figure out which technologies to learn and why. AND they are often confused about the order in which to learn them. We provide you a step-by-step, 5-month learning plan that saves time and gets you your first job as a web developer in the shortest period. Part 2: WHAT you will learn First, let’s figure out what you need to learn and why. And at the end of the article, you will find for learning web development. a list of free and paid resources There are 4 main roles in the web development process: 1. Web designer 2. Front-end developer 3. Back-end developer 4. Full-stack developer (also known as a Complete Web Developer) If you’re into video guides, just to check our 2-minute video. click here Here’s a brief description of website development: STAGE 1: The web designer creates the layout of a future website. In this stage, the website is just a static image. STAGE 2: The front-end developer The website’s “visible” part, commonly known as “front-end” is already done: the banners, texts, menu, sliders, and links of the website already work. At this stage some functions still don’t work: the Sign-in and Sign-up buttons, the Contact Us form, the Search field, etc. turns the static image into a website . STAGE 3: The back-end developer ensures the development of the “hidden” part of the website: databases and servers are connected to the website’s “back-end” part. Now you can properly use of the website: sign in and sign up to the site via your browser, sending contact messages, searching by clicking on the button “Contact Us,” etc. all functions Also, there is the Full Stack Developer, who takes over both Front-end and Back-end development. Thus, if you want to become a web developer, there are 3 possible ways: 1. To become a Front-end developer 2. To become a Back-end developer 3. To become a Full stack developer (also known as a Complete web developer). Now you know the process and the roles, so we can proceed to the actual plan. Here is a visual of the plan for you to understand. As you can see, there are a few items highlighted in orange in the visual plan: HTML5, CSS3, and JavaScript. Wonder why? Ok, let’s find out. What is HTML, CSS and JavaScript? If you’re into video guides, just to check a 2-minute video. And here’s a brief description. click here HTML, CSS and JavaScript are the core of web development. · — we use HTML to tell the browser to display on a webpage. For example, 3 images, 2 buttons, 1 slider, 1 search field, etc. At this stage, the elements are not properly placed on the page, and they do not look 100 percent as we want. HTML5 which elements · — we use CSS to refine the placement and the look of each element exactly as we wish. So with the help of CSS, we CSS3 stylize the elements. · – finally, with JavaScript we to our website. So if there’s anything on the page that moves, jumps, spins, or anything like that — most likely it’s JavaScript. For example, a slider or a pop-up menu works thanks to JavaScript. JavaScript add interactivity Month 1 Step 1: Download and install a text editor A text editor is a special program for writing code. Below you can see the most popular ones. Text editors mainly differ in terms of their functionality and on which operating systems they can work. For example, ● Notepad++ only works on Windows. ● Sublime Text works on Windows, MacOS, and Linux. You can choose any text editor from the above list. We would recommend or because they work on all the main operating systems and have many useful plug-ins. Sublime Text Visual Studio Code Step 2: HTML5 You have to start with learning HTML5. Step 3: CSS3 After that learn CSS3. Step 4: Emmet Emmet is a special plugin widely used by web developers that speeds up the code writing process by 10 to 15 times. Instead of manually writing each line of code, Emmet simplifies the process. Step 5: Photoshop As you may remember, a web designer creates the layout of a future website in a graphics editing program, for instance, in Photoshop. Then the web designer sends it to a web developer in Photoshop format. There are plenty of graphics editing programs both paid or free. Photoshop and Sketch 3 are the most popular. Sketch 3 only works on macOS, while Photoshop works on Windows, macOS, and Linux. Therefore, learn Photoshop. Adobe, the company, that created Photoshop, give_s a 7-day free trial,_ which is more than enough to learn the basics. You just need to know it on a level sufficient for a web developer’s everyday work. Remember, you don’t need to be an expert in Photoshop. Month 2 Step 6: Flexbox Flexbox is a big help. Why? Because with Flexbox you can more easily tackle the frequent tasks of a web developer. For instance, to centre a block, both horizontally and vertically, is a quite tricky task with pure CSS3, while with Flexbox it’s a piece of cake. Step 7: Bootstrap 4 Bootstrap is _one of the wa_ys to make a website , i.e. that it is nicely displayed on all devices: smartphones, tablets, laptops, etc. responsive Step 8: JavaScript JavaScript is a programming language. As you may remember, JavaScript adds to a web page. As a result, elements such as a slider, a popup-menu, etc. work. interactivity If JavaScript is your first programming language, be prepared for some challenges. In fact, that’s _true for the first programming language._You will learn a second or third programming language much easier. only So why is that? Do you remember our parents told us the same word (“mom” or “dad”) and we tried to say it before we finally did it? We don’t remember that. It took some time struggling to learn our first words and sentences — then the syntax of the language. how many times how many times Well, a programming language has its own syntax. Just remember: you will need some time to get used to it. If it’s your first programming language, . Pretend to be a child: keep trying to say your first “words and sentences” in JavaScript, and pretty soon you will succeed. don’t compare yourself with other people Month 3 In this month continue to learn JavaScript, and add step 9. Step 9: jQuery JavaScript language is In addition to pure JavaScript, there are also libraries and frameworks . The most popular among them are pure JavaScript. written in JavaScript jQuery, React, Vue.js, and Angular. jQuery is the easiest one and still, by far, one of the most prolific and popular libraries. It is widely used on millions of websites because of how useful it is. Even websites like Microsoft, Google, Pinterest and Amazon use it. So you will start learning with pure JavaScript, then move on to jQuery, and finally learn Vue.js, React, or Angular. Step 10: Git and GitHub helps you to do some magic. With Git you can be sure that when you delete something while working on an application, you can easily restore it whenever you need it. Git While learning web development, you will create a portfolio. is the website where you upload it with the projects you’ve built. Moreover, you work with GitHub by using Git. GitHub Step 11: CLI (Command Line Interface) The Command Line Interface (CLI) helps you to create files and folders without using a mouse, hotkey combinations or even a touchpad. Magic? ..Kind of. You’ll learn to type in some special commands. At this stage, find a local community of web developers and join them immediately. Encourage yourself to be with more experienced programmers. You can learn from them, and this approach is even more important than book worming and online lurking. Why? Because they have hands-on experience which they can easily share with you. Don’t be afraid to be “the dumbest one”: The “dummies” grow much faster than “smarties” who prefer to stay with equal or lower skilled people. Month 4 Step 12: Node.js Previously, being a full stack developer (complete web developer), working simultaneously on front-end and back-end, you had to know at least one back-end programming language. There are different back-end programming languages. For example, PHP, Java, Python, Ruby, and so on. So before, you had to know JavaScript and any of these back-end languages, which was inconvenient because you had to learn the syntax of different languages. two Nowadays, there is a special technology called Node.js. With Node.js you can work on both front-end and back-end development just knowing language — JavaScript, which is awesome. one Node.js is already extremely popular and what is more important is that its popularity and use are still growing. Such companies as PayPal, Netflix, Walmart, LinkedIn, Ebay, NASA, Uber, Groupon use Node.js. Step 13: MongoDB To store all users’ logins, passwords, comments, etc., programmers use databases. There are 2 types of databases: 1. (a.k.a. relational databases) store information in the form of SQL databases tables. 2. (a.k.a. non-relational databases) store information in a way NoSQL databases other than tables. MongoDB is one of the most popular NoSQL databases, which works perfectly with Node.js. Step 14: REST, AJAX Why do we need REST and AJAX? For example, Google Maps allows searching as many addresses as needed the entire page for each new search. REST and AJAX provide this smooth interactivity. without reloading Step 15: API API (Application Programming . It is an for communication between the user and the server. For example, in Google Maps you type an address to get a location. You send a request to the server and get a response from the server thanks to API. You will learn to implement APIs. Interface) interface Month 5 Step 16: React or Angular As we discussed above, in addition to pure JavaScript, there are JavaScript-based libraries and frameworks. We would recommend checking which one is the most used in your market: Vue.js, React or Angular. Choose the one most frequently required. Still, our recommendation is to choose between React or Angular. Step 17: Webpack When working on an application, it is composed of various files: several HTML, CSS and JavaScript files, etc. To combine, for example all CSS or all JavaScript files into separate bundles, you need Webpack. At the end of the 5th month, you can and should start looking for a job. Go ahead! It’s the right time. Month 6 This month is optional. Why? Because there are plenty of vacancies for web developers which don’t require knowing algorithms and design patterns. Knowing algorithms and design patterns strengthens your foundation and increases your chances of getting a higher salary as a web developer. PART 3: When to Start Looking for a Job? The main goal of learning web development is We created a 5-month plan to ensure you achieve this goal in the briefest timeline. So please do not drag yourself down with doubts after finishing. finding a job as soon as possible. Throw yourself into an active job search The most common newbie mistake is trying to learn before applying for a job. It’s impossible! You can’t know everything. The majority of successful developers learn something new , so why don’t you do that while making money along the way? everything every day Here’s the secret: you are what you believe you are. If you have 80% or even 70% of good tech expertise, it’s time to apply for a job. Create or Update Your LinkedIn Profile LinkedIn is the biggest and the best platform for getting in touch with HR officers, promoting yourself as a web developer, and building a network. Remember: quite often HR mentions too many requirements in the job description, while Therefore, even if you see that a position requires a bit more knowledge than you actually have, send your CV nevertheless. You could be invited to an interview even if you don’t meet all the requirements. in reality the position could be filled with a less skilled person. GitHub & Portfolio is a Must-Have Be sure that you have your portfolio on GitHub. Having only knowledge of theory isn’t enough to start a career as a web developer. So while learning web development, practice, practice, practice. Make projects for your GitHub account. And, of course, don’t forget to add a link to your GitHub account to your LinkedIn profile. Please share, comment, and press that 👏 a few times. . . inspire someone to join the fastest growing job field. Follow me Medium for more informative write-ups like this one! By the way, I am an instructor of Vertex Academy . We’ve created the most illustrated course to effectively learn web development. See our course below: https://www.udemy.com/result-oriented-web-developer-course/?couponCode=MEDIUM-LTCA-1 And here are some free resources for learning: HTML & CSS: w3schools.com freecodecamp.org CSS-Tricks Emmet: Emmet Documentation Emmet Basics Photoshop: Official Photoshop Tutorials Photoshop 101: an introduction for web developers Photoshop CC 2018 — Full Tutorial for Beginners Bootstrap & Flexbox Bootstrap 4: Everything You Need to Know Bootstrap 4 Tutorial CSS Flexbox Tutorial JavaScript & jQuery freecodecamp.org javascript.info JavaScript Tutorial for Beginners Fun Fun Function JSConf jQuery Tutorial for Beginners Git Git Book rogerdudler.github.io Easy Version Control with Git CLI Windows Command Line Tutorial Node.js & MongoDB thenewboston Node JS Tutoral for Beginners MongoDB University MongoDB for Beginners Tutorial AJAX What is AJAX? Fetch API Using Fetch API, REST API What is an API? What is an API? In English, please. REST API concepts Angular Angular JS Tutorial React Official Tutorial React JS Tutorials The Beginner’s Guide to React Webpack Webpack Tutorial Algorithms Algorithms in JavaScript Data Structures and Algorithms in JavaScript
