The Ultimate Guide To Front end web development
Front end development is very popular now, especially during this technology age, it may seem an easy task to convert the design to a real website, web app however it is not that easy, you’ll need a lot of work to be a good front end developer not only because the work is not easy but also because the fast-changing in the front end development technologies.
I will do my best to help you get into front-end web development faster. When you start searching for web development you will find that is a two-stage process, to make a website you need a front end developer who converts the website design into HTML, CSS, and Javascript code, so he invents a way for users to interact with the back end.
So, what is the back end developer do? The back-end developer works with the server and database to provide data to users and a lot more and he works with different languages like PHP, Python, Ruby, SQL, etc…
But we won’t talk about back end development, we are interested in front end development now.
Where to start?
Everything you see when you are navigating around the internet from fonts and colors to dropdown menus and sliders that is the front end of the websites, also the front end developers can build static websites like companies websites as well as dynamic web applications like Facebook, Twitter, and Instagram.
Whenever you search for front-end web development you will find that HTML, CSS, and JavaScript are the main languages the front-end developer uses to build the user interface.
But how the front-end developer builds the user interface using these three languages?
Building a website is like building a house, so we need a base for the house and also we need to add some colors, furniture, and decoration for our house also we need water, and electricity so we can live in this house
HTML is what we use to build our house base, CSS is what we use to add some style and colors to our home, also Javascript is what brings our website to life, it gives the website the ability to interact with users.
Of course, to be a front end web developer you need more than these three languages but you should be familiar with those languages first before moving further in the front end development
Responsive web design
Responsive web design is your next step in learning front-end web development. So, what is responsive web design?
It is the ability to make your website layout fit in almost all screen sizes, you need your website to look great on mobile phones, tablets, smartwatches, smart TVs, laptops, PCs …etcetera, so that is a very important skill to have.
CSS frameworks
CSS again?! Yes but this time it’s a CSS framework, but what CSS frameworks do? Simply they make it easy to structure and build websites as they provide custom CSS classes (premade CSS code) that simplify laying out content and ensure that your content looks great no matter the device. The most popular CSS framework is Bootstrap, and I recommend learning the latest version of it.
JavaScript frameworks
Yes, also JavaScript has frameworks! And this time these frameworks make it easy for you by helping (enforcing) you to have an organizational pattern for your files and that is a major help as they are helping to make working with big projects easier.
The most popular JavaScript frameworks now are React.js, Angular, and Vue.js, you don’t need all of them, just choose one and master it.
That is pretty much good for starting, of course, there are other topics to study like testing and web performance but I don’t want you to be confused or distracted so if you learned the mentioned topics you will cover almost 90% of what you need to be a front end web developer so be calm and enjoy learning. For further research, you can read the Udacity front end web developer skills chick list and this practical guide to learning front end development for beginners.
But there is a big question now, where to find trusted learning sources?
Learning Sources:
I will try here to add learning sources that I have used
- Coursera:
Coursera has a significant amount of courses that are from trusted universities and institutes around the world and also you can apply for financial aid to take the course for free, so I recommend it. - Udacity:
Udacity has a lot of free courses with very high quality, however, the best courses are the paid Nanodegrees which expensive, however, you can have it at almost no cost at all if you applied for one or more of these scholarships. Here you can find more about Udacity scholarships. - edX:
edX has a lot of free courses from well-known universities like Harvard that you can take for free and also there are paid courses that are at good prices compared to Udacity for example. - Udemy:
And of course, there is Udemy, I didn’t use Udemy before but there are a lot of good and cheap courses but you need to choose a trusted one as not all courses are of good quality.
Summary:
This image has a good summary of all you need to learn to be a front-end web developer.
If you read through here I want to thank you and I hope that you find this helpful, wish you the best of luck.
