Hello Folks, Front-end tech stack has always been a hot topic talk or to write a blog on. I'm in front-end development for more than 8 months. I have seen lots of buzzwords around this along the journey coz of tons of libraries & frameworks. Today I would like to put my thoughts around getting started with front-end & what tech's you should learn.
so, let's begin...
I have divided this article into three sections ;
- A: The core of Web
- B: The UI & Ecosystem
- C: Code maintenance & Testing
A: The Core of Web
As a web dev, we need to understand some of the basic and core concepts to understand it better.
- Internet Fundamentals
- HTTP/HTTPS/DNS
- Server-Client architecture
2: HTML
HTML is a markup language that tells the browser the layout of the website. You can relate this to the human bone skeleton or car body.
3: CSS
CSS stands for cascading style sheets. It is used to design web pages to make them appealing and handy to the user.
4:JavaScript
JavaScript is the most popular and the only programming language for front-end web development. It used to add more interactivity to the website and make it more functional.
B: The UI & Ecosystem
After reaching a certain level of confidence & mastery in HTML,CSS,Javascript . Now is the time to explore the libraries & framework to build beautiful & Scalable web applications in fewer efforts.
1. React.js Library
React.js is one of the most popular UI libraries from Facebook & now it's Open Source.
Being with a huge community of developers react stand with top frameworks like Angular & Vue.
The main essence of using react is Reusable components & Speed of application.
2. Bootstrap
Bootstrap is a component-based framework, which means it comes with prebuilt components and includes other utilities for layering displays. It has JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
Note: There are other similar alternatives to bootstrap such as Tailwind CSS which is the utility-first framework. There have been a lot of dev debates going around these.
B: Testing & Management
1. Git & GitHub
Every developer on this planet should be aware of git & GitHub to maintain their code & collaborate on it. Here is my brief guide for getting started with git & GitHub
2. Cypress
Cypress is the new standard in front-end testing that every developer and QA engineer needs.
Cypress can be used to write several different types of tests. This can provide even more confidence that your application under test is working as intended.
3. React Testing Library
The React Testing Library is a very lightweight solution for testing React components.
It Provides Simple and complete React DOM testing utilities that encourage good testing practices.
4. NPM or YARN
npm is the package manager for the Node JavaScript platform. It puts modules in place so that Node can find them, and manages dependency conflicts intelligently.
Also
Yarn is a new package manager that replaces the existing workflow for the npm client or other package managers while remaining compatible with the npm registry. It has the same feature set as existing workflows while operating faster, more securely, and more reliably.
Wrapping up...
In this article, we went throw the roadmap that you can follow for Front End Web Development. We talked about the basics of the web to maintenance & code testing. I hope this information was insightful to you. Also, note that the most important technology in this article was React.js. So ill recommend you to give it a try once I'm sure you'll never look back.
< Happy Coding >
Let me know your thoughts on this article. I tried to explain in the most simple manner. I hope you liked it!
Also, any suggestion or feedback is always appreciated🙏.
Connect me on
This article is published w/ Scattr ↗️
Top comments (0)