Path to ace️ front-end web development.
Tags: webdev, react, frontend, leaning
Published: 2020-11-22 11:37:46


Quite often, beginners who are trying to learn front-end Web development find themselves in a pretty tight spot. They get overwhelmed by a whole lot of frameworks and libraries one could find on the internet. I certainly was overwhelmed.

<img src="https://media.giphy.com/media/lkK7hFTOp1s4g/source.gif">

But are you one of them? Do you need help in finding your path to becoming an amazing front-end developer?

well, then keep reading further to achieve what you need ;)

> Where do I start? and how much should I know?

As a complete beginner, you can start by learning ***HTML***, ***CSS*** and ***JavaScript***. These are the basic elements for whichever framework you are wanting to learn. As far as [*HTML*](https://www.w3schools.com/html/default.asp) goes you just need to know all the different [*tags*](https://www.w3schools.com/tags/default.asp) and where to use them. It's that simple.

Speaking about **CSS** you are required to understand [*flex*](https://flexboxfroggy.com/) and [*grid*](https://www.w3schools.com/css/css_grid.asp) which you'll be using most of the time to layout your website. Other than that all you need to know is basic styling; For instance, You could move on to learn what [*CSS Selectors*](https://www.w3schools.com/cssref/css_selectors.asp) are and how to achieve [*responsive web design*](https://www.w3schools.com/css/css_rwd_intro.asp).

Moving on to **JavaScript**, you just need to understand basic programming; like different *data-types, loops, conditional statement and functions*. These are the building blocks of any programming language. Once you get a good grasp of each concept, programming becomes a easier task, even if you have just started to code. And most importantly, you will be required to know [*Document Object Model (DOM) Manipulation*](https://www.w3schools.com/js/js_htmldom.asp).

Now that you know all the basics, can you implement everything to provide functionality? To find the answer to this question, you will have to examine yourselves. That's where exercises come into play. Try to replicate some of the simplest designs from websites like [*dribbble*](https://dribbble.com/). If you are able to do that with ease, then you are ready to move forward and learn something new.

---

> Yeah, you can develop a website now but can you design one?

Most people know how to develop and write clean code all those stuff but their  design sucks *(So was mine)*. Every year, millions of students graduate from high schools and colleges with web development as a skill in their resume. It's basically a crowd of students that have mastered a skill, in our case it's web development.

####What can make you standout from that crowd?

If you are looking forward to stand out from a crowd of skilled individuals, It's not going to be an easy task. But that doesn't mean it is unachievable. All you need to do is develop better-looking websites. In order to be a better front-end developer you are supposed to be creative in your designs. Learn how to use softwares like AdobeXd, Figma, Photoshop, Illustrator for designing and coming up with prototypes of eye-catching websites. Remember, the interface is what draws an user to a website. Functionality comes right after.

furthermore, get inspired by visiting pleasing (design-wise) websites on the internet like [*dribbble*](https://dribbble.com/) and [*awwwards*](https://www.awwwards.com/). Few websites are truly a visual treat and looking up to them could highly enhance your designing ability. You can learn all the designing principles and elements of modern web designing from articles and YouTube. Personally I learnt a lot from [*Design Course*](https://www.youtube.com/user/DesignCourse) and [*Flux*](https://www.youtube.com/c/FluxWithRanSegall).

> I hope you can design and develop some cool website.

####Choosing a perfect framework for you

Back to being stuck between what framework to choose, you are required make a choice between [*AngularJS*](https://angularjs.org/), [*ReactJs*](https://reactjs.org/), and [*VueJs*](https://v3.vuejs.org/) *(of course, you can go with PHP, wordpress, etc, too)*. These are some of the most popular web frameworks and libraries used by top tech companies and MNCs. Additionally, they are all open-source.

* [*AngularJS*](https://angularjs.org/) is a structural framework for dynamic web apps. It uses HTML as template language and extend HTML's syntax to express your application's components clearly and succinctly. It is developed and maintained by *Google*.

* [*VueJs*](https://v3.vuejs.org/) is a progressive JavaScript framework for building ***user interfaces (UIs)*** and single-page applications. it uses ***"high decoupling"***, allowing developers to progressively create user interfaces (UIs). It is developed and maintained by *Evan You*.

* [*ReactJs*](https://reactjs.org/) is a JavaScript library for building ***UI components***. It is a component based library in which you can divide the entire website into simpler components which makes development a lot easier. It is developed and maintained by *Facebook*.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/slrhhhawvmgrbsp6m3ng.png">

I chose ***ReactJs*** because it is easier to learn and is used by many tech companies. I highly hope that it will not be replaced in the next 5 to 10 years. I personally feel comfortable with react which is why I don't regret choosing it. If you're looking forward to choosing *ReactJs*, you will need to learn how to create components; either ***Functional component*** or ***Class based component***. My preference would be functional component because it can be used effortlessly. Also, it is the current trend.

Finally, try to understand the *life cycle of a component, hooks, styled component*, and *state management*. For state management, you can basically use ***Context API*** or ***Redux*** (*Context API* is much simpler than *Redux*). You can also use ***Material-UI*** to style your app it makes development a lot easier.

####Conclusion
So, that was a basic road map to learning front-end development. If you follow the path sketched throughout the blog, you can develop pretty great websites but always remember, learning never ceases. You have a lot more to learn and explore. As your next step, try building your own portfolio and do some projects that are based on your tastes *(you can do freelancing🚀)*. Taking on a project can be highly fruitful because you will learn; how to be committed to your work, finishing work before deadlines, time management, communicating with clients and finally, become experienced. So, there you have it. Your path to becoming a reliable web developer (There is always an alternative, you can go with *Wix*.)

Happy Learning 😊 !!!

---

**Thank you for reading this far. If you enjoyed this post, please share, comment, and press that ❤️. . .**

**Follow me on [*dev.to*](https://dev.to/vishnuramv), [*Instagram*](http://instagram.com/vvishnu___) and [*Medium*](https://vishnuramv.medium.com/) if you're interested in more in-depth and informative write-ups like these in the future!**