How can I start my journey as a frontend developer ?.

Hi there, Welcome to the fundamental guide to kickstart your journey as a frontend developer.

Have you been looking for a way to get into tech from other fields or want to sharpen your Frontend development? Well, I’m here to offer a guide to make it easier. Oh no, not easier but make it better and definitely going to be fun too. I will be sharing few resources and tutorials which are going to be useful on the run. So let’s get started.

Firstly, what comes to your mind when you hear frontend development? well, this is just the development of the graphical interface of a website. When you open your browser and search for a website, all the what is displayed like header, menu, buttons, images, slideshows, etc. All these amazing and appealing designs are made by Frontend developers to provide great interaction and navigation between the users/visitors with the website.

To make interactive designs like that, you need proficient knowledge in HTML, CSS, and Javascript
Oops! This is much, where do I start learning all these three Languages?.

Well, HTML is just a markup Language while CSS is a style sheet basically for styling. Javascript is the only Kick in the ass, programming among them but when you understand the way, it is going to be easy and fun as stated earlier. So Let’s start with HTML and CSS to build a beautiful website.

You need to have an editor installed on your device or still choose any of the editors on the lists below to download before we start proceeding to the next Phase

Vscode Download here
Atom download link
Sublime text download link
Nodepad++ download here

Kindly follow the guide on the editor you prefer and download it on your system.
Phase One
HTML : Hypertext Markup Lamguage.
This is the standard markup language for documents designed to display on the web browser and is supported by CSS (Cascading Stylesheet ).

These are few great resources to learn HTML and CSS for beginners for free

Video Format :
• Brad Traversy
• Net ninja
• CS50
• Pluralsight
Text Format Learning :
• Educative.io
• Freedcodecamp
• Codeacademy
• Khanacademy
Top resources: Paid version
• Udemy
• Coursera
• Educative.io

Learning HTML and CSS can roughly take 3-6weeks to be mastered by spending at least four hours on it daily. By the end of the fourth week, you should be able to design the following correctly’

• Login and Sign up page
• Landing page for business
• Basic components on the page such as slideshow etc

You can level up your design knowledge by building few designs on codepen , check out the following designs done with HTML and CSS.

Now let’s proceed to Phase 2 : Javascript
Javascript is used to improve the interactivity of the website and help to implement complex features on the web pages, instead of just displaying a static content, it helps in provide time information updates, animations, maps etc.

Kindly check out the following resources to improve your fundamental knowledge on javascript

Resources:

Few projects ideas to boost your understanding and learning process

BMI Calculator
To-do list
Contact App
Currency Converter
Image slider
Counter App
Color Generator
Birthday Reminder

You can search for interesting vanilla javascript projects.
Learning vanilla javascript and having solid knowledge on it will ease your progress when you start learning any javascript MVC framework like React, Angular, Vue etc.

Kindly take enough time building projects that you can, every big projects you see today started with hello world.

"For the things we have to learn before doing them, we
Learn by doing them" - Aristotle

Keep learning !!!

Thanks for Reading.