Getting started with frontend development with resources

Complete roadmap

Β·

22 min read

Getting started with frontend development with resources

Photo by Nicole Wolf on Unsplash

Hello folks πŸ‘‹ In this blog you'll get a clear aspect of how one can get started in the field of development and become a great frontend developer. I'm pretty very much excited to share my knowledge and the hours of research done to write this blog just for you folks.

gif

So, without any further ado, let's get started.

Introduction to frontend web dev

Frontend Web Development is the practice of building the user interface(UI) of a website using various frontend technologies and languages. HTML, CSS, and JS are used to build the layout and design of websites and you may call this kind of development to be front-end web development.

In the era of the internet and vast evolving technology, every startup/business/any kind of company needs a website for its brand. Portfolio websites will be a great example to showcase the personal brand.

If you want to get into the field of web development, then your first starting step will be accustomed to frontend technologies.

Now, before diving into the roadmap of becoming one, let's get a glimpse of what front-end developers do and why they are necessary.


Technologies and design enthusiasm

Technology is evolving every day and if we talk about the technologies involved in front-end development, there will be endless. The most popular are ReactJs, Angular, and NextJs frameworks. Beginners need to learn first HTML, CSS, and JS to get started as all other frameworks and libraries are built on top of them. You may call these 3 of them to be the building blocks of web development.

You might be hearing from some non-tech people who often mix UI/UX designers with front-end developers. But there are many differences between UI/UX designers and front-end developers.
If we think from the point of design aspects, then UI/UX designers would be brainstorming ideas to put up in their Figma file. On the other hand, front-end devs will be brainstorming ideas to give life to their imaginary website. Also, there's one benefit is that front-end devs have design sense like UI designers and they can explore the design field if they want to and become a pro person in the field of both dev and design.


Roadmap of becoming a frontend dev

Here's a keynote for getting started in the field of front-end development from zero to one. While learning, you'll also find a link between every step.

Before jumping into learning the basic technologies/languages you must be familiar with the following items below.

  • What is the internet and how it works?

  • What is the history of the web?

  • What are HTTP and HTTPS?

  • What are static and dynamic websites? (Not necessary but will increase knowledge)

  • About Browsers

The following resources will help you to understand them:

Learning the basics

HTML

As a beginner, you should start with the basics and your first language in this field will be HTML which is used to define the structure of a website. It is often called the skeleton of the website. Learn the syntax and build some simple websites with it for practice. For example, you may make a contact form or your CV with HTML. As a reference, here's my first website after learning HTML.
Note that HTML is a Markup language and not a programming language.

Do you wanna see how to write "Hello World" in HTML? πŸ‘€
Here's an overview below.

CSS

The next step is exploring CSS which helps you to style the website and give it a gorgeous look. Now, CSS is alone without HTML. Both of them loves to work in pair. So, while learning CSS you will have to use your HTML knowledge and use your ideas to beautify your HTML elements.
Examples of some basic CSS websites could be:

After this, if you want to deep dive into CSS and practice more out of bounds, then you may go explore CSS arts. Now, CSS arts are like objects or models built with less HTML and more pure CSS. An example could be this repository.

Now at a certain point, you'll be coming across the term "responsiveness" which has become a necessary thing in the era of the vast-growing internet. People are having various types of screen sizes in their hands and whenever they're exploring any website, it's their normal expectation to get a good experience while visiting that particular website. So, as a developer, we always have to keep in mind that media queries in CSS is gonna be our best friend as this is the only tool that will help you to make your website responsive for all screen sizes. Hashnode itself will be an example for you if you open it up on other devices like phones or tablets. The resource to learn is given below.

CSS also helps us in providing animations for websites. Now, there are various libraries and packages for CSS animations. But as a beginner, you should learn the basic CSS animations using transform, translate, @keyframes, and other such properties.

Following are the resources to learn HTML and CSS:

JavaScript(JS)

JavaScript is the brain of a website where logic fits in. It's a programming language and it can also be used in developing backend logic along with the frontend part.

At this moment, it's not recommendable to learn this language if you don't have any prior experience with other programming languages like C or C++ or Java, or Python. So, I'd suggest you first explore any of the mentioned languages and have a basic idea about one programming language and then you can move ahead with JavaScript.

Folks often think that JavaScript might be an extension or a library of Java which is completely wrong because there's no link between the two programming languages. Apart from development, JavaScript is used in various fields of tech like Machine learning, Game development, Web3, etc.

Buzz and Woody (Toy Story) Meme meme

The most important concepts of Javascript that a developer must know are promise, exception handling, arrow methods, hoisting, DOM manipulation, "async & await", scope, and callbacks.

Note: It's not so easy to master Javascript in one go. Most developers often struggle to master it; some even go mad after it.

As a beginner, I'd never recommend you master it in one shot and then move ahead to learn other topics or technologies. Rather I'd say learn the basic concepts and the important ones, go through the syntaxes, build projects, and get habituated with the methods of Javascript. Now after all this, it will be your time to move ahead to learn the frameworks and libraries because you'll be learning other parts of Javascript while building more projects and exploring its frameworks and libraries.

Following are the resources to learn JavaScript:

Moving towards frameworks and libraries

Before moving ahead you must be knowing the difference between a framework and a library. For reference, you may go through this blog.

CSS Frameworks

The most popular CSS frameworks are Bootstrap and Tailwind CSS. Both of them are very useful and often help to build websites faster and also increase performance. You have to either install them or just use their CDN under the <head> tag of your HTML file. Other CSS frameworks are MUI, Bulma, Foundation, etc.

CDN is a network of servers(you may think of an almirah that stores data) geographically distributed all over the world. It is a generated link of a particular product like Tailwind or Bootstrap by using which you can inherit their properties in your file. You can learn more about CDN from Cloudflare.

Here's a list of CSS frameworks:- https://github.com/troxler/awesome-css-frameworks

Now, here's nothing fancy other than using their predefined classes(properties/class names defined by the frameworks that you'll be using) under your class attributes in your HTML file. You have to learn them from their respective documentation pages and implement them in your project as per the use case.

JS Libraries and Frameworks

JavaScript has a wide variety of libraries and frameworks. If you have a good sense of JavaScript and Node.js, then you can make your JavaScript library or package.
Here's an example of the same:- all-round-calculator

So, similar to this one there are plenty of libraries and packages that can be used by installing them under your project directory with the following command:

npm install <package/library name>

This video is a great resource to learn how to make your JS library package.

Here's a complete list of Javascript libraries and frameworks:- https://www.javascripting.com/

You may now learn the most popular React.js library and then move on to Next.js (lightweight, SEO-friendly framework built on top of React). Alternatively, you may learn Angular or Vue.js. Each of their documentation and discord community support is enough to master them. Other resources to learn them are given below.

Other useful resources to learn:

Also, if you want to get started with React.js, then my blog will help you with that.

Getting Started With React.js

"The possibilities are numerous once we decide to act and not react."
- George Bernard Shaw

The combination of Next.js + Tailwind CSS is my favorite way to build my side projects as it increases development speed and also helps after deployment of the project in some cloud providers like Vercel, AWS, Google Cloud or Netlify, etc.

The learning curve is high in the field of development. So, hold on you'll get to know about all of them mentioned here when you start exploring.

Version control

Git is an open-source version control system used to track the state of a project, especially the number of changes made to it. It's a free software often used with GitHub, Gitlab, or Bitbucket. These 3 are different platforms to store your projects using Git commands. You can choose any of them and create an account and store your projects by using Git. I prefer GitHub as it's easy to use and also seems an organized platform to me.

As a developer, you have to come across Git and GitHub even if you want to ignore them as they are used worldwide. In today's world, most companies prefer open-source projects and look for open-source contributions in a candidate's profile while stalking their resume. Also, this is a point to note that open source is changing the world.

Why Open source?

  • It helps you to collaborate on different projects and explore new technologies.

  • It also connects you with developers all over the world.

  • By using Git commands you can also fix other people's broken code and convert it into a stable one.

Now, here some terms like open source might seem difficult for you. Don't get overwhelmed with these terms right now as you'll be eventually habituated to them soon.

List of resources to learn Git, GitHub/GitLab, and Open Source:

Here's my GitHub profile if you wanna visit:- https://github.com/Susmita-Dey

Other topics

Apart from the above-mentioned frameworks or tech stacks, there is a vast range of libraries and frameworks and other useful topics to explore. We can't explore/learn all at the same time but we as a developer eventually come across them one by one when needed in our projects.

Accessibility

Accessibility is the way of sending our data to a larger crowd including the aged ones and disabled persons via our websites. It's a practice of mainly helping the aged and disabled people to access the current evolving data and services of today's world.

You might have heard of role=button or aria-label. These are part of accessibility.

"The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect."
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

The following are the best resources to learn accessibility:

PWA

PWAs or Progressive Web Apps are the software or web applications that can be installed on your devices using WebAssembly. For example, if we talk about YouTube when you open it up on your desktop, you may notice it shows an icon to install it on your device.

If you click on this button, then YouTube will be installed on your device as an application. This happens only for PWA applications. Now, you can add this feature to any of your useful projects.
The Progressive Web Apps tutorial by Google developers is a good resource to learn about it.

APIs

Application Programming Interfaces(APIs) are a set of functions or protocols used in building various software applications. RapidAPI has a list of APIs on its platform that can be used depending on different needs. As an example, you can fetch memes or photos using Javascript and API endpoints if you're using some Meme API or photos API.
Postman is often used to test APIs and their student program is the best way to learn about APIs.
Learning Resources:- Postman Beginner's Course - API Testing

Discord Discord Devs GIF - Discord Discord Devs Discord Developers GIFs

GraphQL

GraphQL is a query language to search for data and displays them as per users' requests. It's a powerful language for your APIs that runs on the server side in your applications.
The following resources will help you to learn about GraphQL:

Unit Testing

Unit testing is a method of testing every line of code of your software/web app. There are various tools like Cypress, Keploy, Jest, etc. As an example resource, the video on writing a simple unit test in JavaScript will help you understand a bit about unit testing.

Typescript

TypeScript is a programming language built on top of JavaScript. It's an alternative language of JavaScript and works in the same way; the differences are in their syntaxes. Some other differences are in this article.

It's in high demand after its popularity and most companies are looking for TypeScript developers. So, it's recommended to learn the language if you're familiar with JavaScript.

Resources to learn Typescript:

Sass

Sass is called the CSS with some superpowers. Its syntax is quite similar to CSS and it's very helpful in CSS arts. It's an optional one but if you want you can explore the superpowers of CSS. The official documentation and the Freecodecamp Sass video are enough to learn from.

I Dont Want Your Sass Ben Kenobi GIF - I Dont Want Your Sass Ben Kenobi Star Wars GIFs

Animation libraries

Since you're a frontend developer you should be knowing how to make animations and animate objects in a website to build interactivity and increase the User Experience(UX) of a website. Some of the popular animation libraries are LottieFiles, Animate.css, Bounce.js, AnimeJS, GSAP, Framer Motion, etc. Each of their documentation guides is enough to explore them and you'll be using them as per the use case of the website you're currently working on.

Bonus topics

These are all bonus topics and if you want to go beyond front-end web development, then you can explore them and find your niche and add new skills to your portfolio and resume.

Node.js and Backend Technologies

Backend tech is all about logic, working with databases, authentication, and APIs. Here comes 2 options for you. You may either choose Python frameworks like Django, Flask, etc., and explore the backend technology. On the other hand, you can go for Node.js, MongoDB or Firebase, or SQL. So, there are choices for you.

Css Ie GIF - Css Ie GIFs

Here are the resources for both of them:

Mobile and Desktop

When I'm talking about mobile and desktop in this blog, you might be guessed right that I'm going to discuss front-end development concerning mobile and desktop applications.
An iOS developer has the option to build apps using native languages such as Swift or Objective-C. Some of the also use third-party languages such as React Native or Xamarin. On the other hand, the official tool for Android developers is Android Studio and they use the languages such as Java and Kotlin to create applications.

For desktop applications, you may use Electron, Xojo, Enact or Flutter on Desktop.

UI/UX

UI stands for User Interface and UX stands for User Experience. This will help you to become a UI/UX designer(if you wanna have add-on skills). For this, you need to grasp UI/UX principles and laws and other various areas of this field. UI/UX designers mostly work with tools like Figma and Adobe products. So, you need to be familiar with them.

Resources to learn UI/UX design:

The Frontend Spectrum


Job opportunities

Now, comes the question of jobs and job boards to get hired. Here's my suggestion to look for internships first over full-time jobs. The reason is internships will help you to get accustomed to working on company projects. You'll get to know what kind of work is being done in a company by a front-end developer. You'll also get to know about your mistakes and also gain new experiences and grow inner confidence.

Meanwhile, during your job search, it's mandatory to have a portfolio website representing yourself, your work, tech stacks, in short, your brand.

Now it's time to choose the Work type: a) Remote b) On-site c) Hybrid

As a frontend developer, you will get job opportunities like Senior/Junior Frontend Engineer or Senior/Junior React/Angualar/Vue.js Engineer/Developer or some other framework or language-specific developer roles with a high amount salary if it's a remote job.

Image

Here's a list of some websites for your job search:

  1. Remote.co

  2. Angel.co

  3. Glassdoor

  4. LinkedIn

  5. Showwcase

  6. JustRemote

  7. WeWorkRemotely

  8. FlexJobs

Alternatively, you may also go for freelancing work by making your freelancing profile on Upwork or Fiverr.


Pitfalls for a frontend developer

After learning so many things, you'll become a successful front-end developer without any struggles.
Huh? Is it gonna be without any struggles?
Haha, I'm joking dude. πŸ˜…
Struggles are part of human life. If you don't fail or don't get stuck with problems, you'll never learn things properly.

Let's discuss them one by one concerning beginners getting into the field of development.

Tutorial hell

The biggest ditch most beginner developers fell into is tutorial hell. Tutorial hell in simple terms means watching tutorial after tutorial and learning nothing.
For example, you are making projects by watching tutorial after tutorial and adding those copied projects under your name in your resume. Now at the end of the day if someone tells you to make a website or a web application for them as per their design criteria and their needs that aren't in any tutorial on youtube or other platforms, then you'll feel dumb.
Can you just imagine at that moment how humiliated will you be feeling?
I hope you're getting my point.

Image

There's only one solution for it which is practice, practice, and practice.
Here are a few steps that you may follow:

  • Brainstorm your project idea

  • Come up with your imaginary design

  • Think of the tech stack which would best fit your project idea

  • Start coding to give life to your ideas.

  • Stuck with bugs? Do a google search for the errors. Still, stuck? Reach out to someone familiar which the tech stack you're using for your project.

  • No bugs and the application working fine now. So, it's to deploy your application and showcase it to the world. πŸš€

β€œA successful website does three things:
It attracts the right kinds of visitors.
Guides them on the main services or products you offer.
Collect Contact details for future ongoing relations.”
― Mohamed Saad

Procrastination

Procrastination is delaying tasks and showing laziness. It's a normal thing that happens to every human being. For example, every day before going to sleep I tell myself that I'll wake up tomorrow early morning and go for a morning walk and do some exercises. But every morning sometimes restricts me to do that and forces me to wake up late and skip them. This is called procrastination.

Let's say you're working on a side project and you want to complete it by the end of this week. But your negative side is telling you that you can do the rest of the part tomorrow and then you get distracted and go for doing something else. Then tomorrow comes and you work a little and the same thing happens to you. Finally, the weekend ends and you assume that let it go. This is the wrong way and you have to fix it.

  1. Develop good habits and set goals and proper deadlines

  2. Give punishments or develop fear within yourself so that after a certain time you don't have to regret it.

  3. If you need a break, take them and spend time with your friends and family and enjoy your life. But don't make them excuses leading to procrastination.

Start saying "NO" to your procrastination by building some good habits.

Fear of debugging

Debugging is the art of killing bugs by using a debugger and his extraordinary skills. Most beginners often fear bugs and leave projects. Some of them use their courage to gain those extraordinary skills to fight against those bugs.

Errors...errors...errors; life is full of errors.

Image

Just like the above image; developers' life is full of bugs. We use the following superpowers to kill them.

  1. Read our Code and analyze it. This is important because we as developers often get lots of errors just because of some syntax mistakes or sometimes we miss ; in our code.

  2. Google Dorking is the method of searching google with some tips and tricks. This helps you to search the web and get your answers quickly in a more faster and effective way.
    Watch this video to master the skill: Google Like a Pro – All Advanced Search Operators Tutorial [2023 Tips]

  3. Make StackOverflow your best friend because it's gonna kill 90% of your bugs.

  4. The last option will be asking folks in some tech-related discord communities like WeMakeDevs.

One funny thing is that sometimes some bugs become a feature. So, you never know which bug will lead in which direction. Don't fear them; rather try to deal with them.

Lacking communication skills

Public speaking is the most important skill that people should have. Communication skills help you to create a network with folks all around the world and also build your confidence before the world. If you have good communication skills and you're stuck at some point either in life or in areas of development, then you can reach out to folks for help. In return, they will also be ready to help you.

Build your communication skills:

  1. Participate in Twitter Spaces

  2. Engage in Community Events in Discord

  3. Attend in-person meetups and tech conferences

  4. Come up on the stage and try to help folks in the community who are complete beginners like you or maybe more than you.

  5. Share your knowledge in the community or your socials and follow the " learning in public" initiative.

Note: Sharing is caring and asking someone for help is not a shameful thing.

I also asked the community to put up their thoughts and experiences on this topic and got some realistic responses from them.

This is what the community is saying. πŸ§‘β€πŸ’»


Tips to succeed from Industry Experts

Here are some of the testimonials from industry experts:

  • "Put all your code on GitHub no matter how simple or bad it might look. This will make it easier for you to share your code and get help from experienced folks. Share your challenges on Twitter or in a community, and folks who had the same challenge previously can help you fix it quickly." - Eddie Jaoude

  • "You don’t just code, you build things. Every developer is an artist with their own creativity and limitations. Put your creative brain forward when you build things, and the best way to do that is by asking more of β€œwhy” than β€œhow”." - Tapas Adhikary

  • "Keep on Practising until you Perfect the Art. Don't give up until you do your masterpiece. And every time you do something, share it on LinkedIn / Twitter and ask for critiques! 😊" - Praveen Kumar Purushothaman

  • "One of the biggest mistakes made by beginners is they jump from one thing to another and don't learn anything properly" - Mosh Hamedani

  • "Never be afraid to go back to the basics, it’s important to look back sometimes and be certain of things. Reading documentation and googling things isn’t cheating, it’s all part of continuous learning. At the end of the day, you never stop learning how to code and this is all part of it! You won’t know or understand everything the first time around so it’s ok if you need to search for answers or refer to guides." - Matt Davison (Website)

Below is a video for you to have a sneak peek into a developer's life in the office.


Conclusion

TL;DR: By now we have explored various tech stacks of a frontend developer and gone through a complete guide step by step on what's next. We also went through the pitfalls of a web developer and some tips to get hired.

In this blog, I have tried my best to cover as many topics as I can. Beyond this, there are many things that you can explore on your own.

Some important things we missed above were talking about hackathons, communities, and building credibility.

Hackathons are like competitions for building projects in a team. Communities are the helping hands of every student in tech. Building credibility is the most important thing one should do in tech to bring them up in public and explore one's mistakes and learn new things. During this process of sharing and gaining knowledge, you'll get exposed to opportunities.

So, that's all folks!! πŸ™Œ

Consistency quote by Clever Programmer

So, are you ready to be the next hustling successful developer?

If yes, then tell the world today to fasten their seat belts because the weather is gonna change soon and the world will world evolve with the changes we can make together as developers.

High Five Patrick Star GIF - High Five Patrick Star Spongebob Squarepants GIFs

P.S. Never stop learning and building projects. You have to keep hustling. πŸ’ͺ

References

Here are some useful resources for you:


Hope this helps you. Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my YouTube Channel and connect on LinkedIn or Twitter. Also, feel free to support my work. 😊

Did you find this article valuable?

Support WeMakeDevs by becoming a sponsor. Any amount is appreciated!

Β