Friday, June 29, 2018

How to Become a Skillful Front End Developer - (Easiest Steps)

How to Become a Skillful Front End Developer - (Easiest Steps)

If you ask front-end web developers about how to learn Front-End web development, lot of them will tell you the common answer “learn html, CSS, JavaScript, Framework and here you go you are now a front-end web developer”, but the truth is something different.

What you’ll learn from this article?

Here I will walk you through the easiest steps in my mind to learn the Front-End web development, faster with the skills you need as a Front-End developer.

If you’re looking for the right way to start learning Front-End web development, this article is for you, I’ll tell you the skills you need and how you can get it them, the technology you need to know, how to choose the appropriate resource for you, and all the things you’ll need to get started learning web development.

Actually I found a lot of good resource out there, that tell you what to learn but they don’t tell how to learn, that’s the reason why I write this article, to help beginners choose the right way at the right time, so they can continue learning.

Start with HTML and CSS:

Yes you should learn these two, because they are the basis of every website.

What is HTML: stand for Hyper Text Markup Language and it’s responsible for describing the structure of web pages.

What is CSS: stand for Cascading Style Sheet and it’s responsible for the look of the web pages.

Start learning HTML and CSS:

iMac, ipad, and Macbook pro on Desktop (programmer work-space)

Don’t think about anything else focus your goal on learning HTML and CSS. 

Choose your resource and start learning:

 They’re a lot of resources free on the internet, and all of them will teach you almost the same things (basis of the languages), but you should choose a specific resource and stick with it until you’re done.

You need to decide the type of resources that will be comfortable to you   in general they are two types of resources:

1- Video:

Now a day, exist very good resources, some are free and some are paid, Udemy, Treehouse, Udacity, Envato Tuts are very good online education  platform, sure you can find the right course for you, take your time to choose one resource that will teach you both HTML and CSS.

If you choose to learn by videos, I suggest that you try to use Udacity, because it’s nice place to start learning HTML and CSS for free.

2- Text:

This type is exists everywhere, even if you choose to learn via video there will be times when you need to understand a principle or a property or something you didn’t understand on the course.

Google will help in most of the time, but you need to get familiar using Google to search in Mozilla Developer, by adding MDN after your keyword, for example if you want to search about the tag <p>, instead typing : ‘HTML p tag’ type ‘HTML p tag MDN’.

Now if you want to start learning using text resources, there are a lot of website that offer you free lessons, the popular one I believe is w3school, you’ll find complete lessons that will help you learn HTML and CSS from scratch.

There are also lot of books that teach you everything you need to know in HTML and CSS, I think HTML and CSS: Design and Build Websites by Jon Duckett is an great book if you are a book fun.

Practicing HTML and CSS:

The most effective way to practice what you’ve learned in HTML and CSS, and to learn new things, is to start making projects.

I'll give you a way to find projects to practice what you've already learned, and try to look for different website designs on the Dribbble, and try converting them from just images to a real world HTML and CSS website projects.

Start learning JavaScript and jQuery:

YouTube video player

Now I suggest that you already knowing HTML and CSS, and you have the skills you need to create every design that you imagine.

It’s time to learn a new thing, actually two more things, JavaScript and its popular Library jQuery.
To do that, you need to learn basics of JavaScript before to start learn jQuery, because jQuery require JavaScript.

I suggest the following resources to start learn JavaScript and jQuery for free, but if you already have your resource feel free to stack with it:

YouTube Playlists:



Practicing JavaScript and jQuery:

You can practice what you’ve learned in JavaScript and JQuery, by adding new features to the projects that you made in HTML and CSS part.

After learning JavaScript and jQuery you’ll be able to think in those features that you could add, for example if you made a design for a shopping store you can make shopping card, or popup subscribe form, just play with what you’ve learned to achieve something cool.


beautiful store front-end with open sign in it

I think after learning these 4 technologies HTML, CSS, JS and jQuery you will be able to find your own way to continue learning new stuffs like Bootstrap (CSS Framework), JSON (JavaScript Object Notation), AJAX (Asynchronous JavaScript And XML) , AngularJS,  and so on.

After learning the basics of every technology, don’t start another course in that same technology, but start make things and start use the official documentation Like MDN, W3C or the official site of the technology.

Other useful links:
How I Learned Front-end Web Development For Free In 5 Days (Mediums)
How do I get started with front-end development? (Quora)

Thanks for reading. If you enjoyed this article, feel free to share it with your friends.

Be sure to share it with your friends to help us provide more content, and also consider following us on social media.