Path to ace️ front-end web development.

Vishnu Ram V — Sun, 22 Nov 2020 11:37:46 +0000

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.

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 goes you just need to know all the different tags and where to use them. It's that simple.

Speaking about CSS you are required to understand flex and grid 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 are and how to achieve responsive web design.

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.

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. 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 and awwwards. 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 and Flux.

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, ReactJs, and VueJs (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 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 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 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.

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, Instagram and Medium if you're interested in more in-depth and informative write-ups like these in the future!

DEV Community: Vishnu Ram V

Path to ace️ front-end web development.

What can make you standout from that crowd?

Choosing a perfect framework for you

Conclusion