In this article, I will give you some insights about my journey of becoming a self-taught front end developer and also how someone else who wants to pursue the career can achieve it in much less time and more efficiently.
I am not a Computer Science Graduate, nor I had someone to teach me about development, So I had to learn things the hard way by doing on my own. I will also argue that this hard way impacted the most in terms of me evolving as a developer, but now it is my responsibility to make this path easier for my future developer friends, from my experience. In this article, I will share with you the step by step guide (which is different from the sequence I learned things so as to make it easier), and also the resources that you can follow to become a front end developer. But before coming to that you must have an overview of —
What is Web development? (feel free to skip if you know about it)
Web development is simply the process of developing or creating a website for the internet. These websites can be- Static or Dynamic.
- Static Websites are websites that are stagnant (inactive, at rest). These are simply webpages which are delivered as they are stored. There is no functionality associated with such a webpage. Users can only read and can't interact much with such websites. Example- Blogs, Documentation (Manuals- How things work), etc.
- Dynamic Websites are websites that users can interact with. There are a lot of functionalities that are associated with such a website. Example- Ecommerce Websites (Amazon, Flipkart, etc), Social Networking Platforms(Facebook, Instagram), etc.
What is Front End and What is Backend?
- The Front-end refers to what is visible when a user visits a webpage. What content is present, how it is styled and functionalities like what happens when a user clicks a button, submits a form, navigate to a particular link (route), etc. and the person who develops such features and functionalities is a Front-end developer.
- The Back-end refers to what is not visible to the users. All the behind- scenes logic, How data is stored in a database, what data to send if a user requests for something (like on Flipkart if someone searches for sunglasses, etc). and the person who develops such features and functionalities is a Back-end developer. NOW
8 Steps to Become a Front End Developer
Step 1 — Learn HTML and CSS ( 25hrs Upperlimit)
HTML stands for Hypertext Markup language and CSS stands for Cascading Stylesheets. HTML helps us to add content (all headings, paragraphs, forms, images, icons, etc)to our webpage and CSS helps us to add styles (color, size, font, position, etc.) to the content that is present. After learning HTML and CSS, you will be able to create simple Static webpages. Best Resources to learn Html and CSS —
- Build Responsive Real World Websites with HTML5 and CSS3 by Jonas Schmedtmann (Udemy) 12 hrs course + implementation = 20-25hrs
- Web Design for Beginners: Real World Coding in HTML and CSS by Brad Schiff (Udemy) 9 hrs course + implementation = 20–25hrs
Step 2 — Learn Command Line Interface or Terminal (20 mins)
Okay, maybe some people will not agree with me to learn this now, But believe me, after reading the 2nd and 3rd step you will be satisfied. The Command-Line interface will make your journey ahead much easier.
What exactly is the Command-Line interface?
Command Line Interface is simply software that allows us to communicate with that of our system (computer). In simple terms by giving some commands to your CLI, You can create files, folders, move within different folders, launch your editor, install new packages and libraries, etc. Don't worry it just seems complicated but it is not. Different Operating Systems (Windows, Apple, Linux) come with different CLI’s and have different commands. You just have to learn commands for the operating system, you are using. Only Things that you need to learn at this point is —
- How to create files, folders and delete them with CLI.
- How to move from one folder (directory) to another. that's it.
How to learn it, my upcoming article will be about CLI, also you will understand about CLI automatically once you start learning from the resource in the 3rd step.
Step 3 — Learn Git and Github (3–4 hours)
Git is a distributed version control system. In simple terms, Git is a software that allows us to keep track of changes to the file over a period of time.
Example — Suppose you are developing an application and you just completed building a feature, you can record/save it with the help of git. (each feature will be saved as a version of the application). Now If you continued building and recording different features and In the future, due to some reason you want to recall a particular version you can do it easily with just a single command and all the rest of the code that was added after that version will be removed automatically. (Sounds Cool)
Now, Github is simply an online platform that uses git and helps you to save your files, projects online. It also allows us to share code and to collaborate with other people (work in a team.). Generally, All people have Facebook or Instagram profile to connect with your family and friends. Similarly, your Github profile helps us to connect with other developers. Employers also check your Github profile once you apply for a job. Best Resource —
- Watch Git and Github playlist by Net Ninja (Youtube).
Note — I wanted you to learn CLI earlier because that's how you operate Git. From step 4 Whatever you learn, whatever code you write, whatever projects you build, save your code regularly (daily) to your Github profile as GitHub also tracks how regularly you commit (save code). More commits will strengthen your profile which will help you at the time of employment.
Step 4 — Learn CSS Architectures and SASS (60 hrs)
After learning CSS in Step 1, You know how to style your webpages. But in real life websites consist of various webpages and your styles will get easily overcrowded if you style pages using Vanilla CSS (Pure CSS). In order to solve this issue, we have something called CSS Architectures and SASS. CSS architecture is simply a way of organizing our styles so that our styles are easily readable, scalable as well as manageable. And Sass allows us to write CSS in a much simpler and shorter syntax. With SASS we will write much fewer lines of code and still produce the same CSS effects. To learn more about sass you can read my article —SASS: Save time writing CSS. Best Resource -
- Advanced CSS and SASS: Flexbox, Grid Animations and More by Jonas Schmedtmann (Udemy). 28 hrs course + implementation = 55–60 hrs
NOTE — IF URGENT JOB REQUIRED!!!
Now you can easily apply for positions like — UI Developer (someone who manifests web designs using Html, CSS, and SASS)
Step 5 — Build Something from what you have learned? (4 days to a week)
By this time, you have all the necessary knowledge about how to style complex, large, static websites, so build something with it. I will recommend, Build your Portfolio website —
- Just Google -Best Portfolio templates, Pick any one of them and start building by just looking at it, Or
- You can Google Best Websites templates, Pick any one of them and start building it.
Step 7 — Learn Webpack and Firebase (3–4 days)
Firebase is simply Backend-as-a-Service that was started in 2011 and was acquired by Google in 2014. Firebase simply allows us to set up a sample backend for our front end application without coding at all and is highly configurable. You can easily set up your backend within a couple of hrs capable of managing databases, Authentication (Log in/Logout), etc. It is a very useful service for frontend developers as it allows them to set up backend servers for their front end application without even knowing any Server Side language.
Best Resources —
- Webpack Series by Colt Steele Youtube.
- Firebase Firestore and Firebase Authentication Series by Net Ninja Youtube.
Libraries and Frameworks make the life of developers much easier. They allow us to focus more on the application logic (features, specifications, and functionalities) instead of worrying about the build process (all behind the scenes processing, optimizations, etc). There is an abundance of Front end Libraries and frameworks out there but the most powerful and popular ones are — React.js, Vue.js, and Angular.js.
- React — The Complete Guide (incl Hooks, React Router, Redux) Academind by Maximillian Schwarzmuller. (Udemy). 40.5 hrs
- Modern React with Redux + Advanced React and Redux by Stephen Grinder (Udemy). 50hrs
- Vue Js 2 — The Complete Guide (incl Vue Router & Vuex) by Maximillian Schwarzmuller. (Udemy). 22hrs
So, these are the 8 steps, I will recommend anyone who wants to become a Front End Developer. Best of Luck Guys and Do let me know if it helps. (I do appreciate.)
Note- There are some other things too like learning UI libraries — Bootstrap, Vuetify (Vue.js), Material Design (React.js), etc but they are not absolutely must-have things, above stated are.