Fab

Posted on May 31, 2020

How to get started with web development (Front-End)?🤔 [Part - 1]

#webdev #codenewbie #javascript #html

So you are perhaps a newbie? Or someone learning to code online but feel like you are missing out something or might not be doing it right? Well, this article is just for you ...most probably XD.

Before I share the road to start Web Development I want to say that whatever I say is no way near a perfect Roadmap, I will just be sharing what I learned from my experience in the last 1 year since I started learning Web Development, feel free to twist the things your way but remember the concept remains same anyways.

What to start with?

The most simple answer to this question is - Start with HTML and CSS followed by JavaScript. Now let's get a bit deeper into it.

Why do you need to start with HTML and CSS?

Let's understand what's HTML and CSS?

In my language, I call HTML - the skeleton, CSS - the makeup or styling and JavaScript the muscles responsible for the functionality of a webpage.

Now we know what does HTML and CSS mean, lemme clear the most common misconception that HTML and CSS are programming languages they are not! HTML is a markup(structure) language that stands for HyperText Markup Language and CSS means styling sheet which stands for Cascading Style Sheets, both are used to structure and style a webpage but can't make it function like a programming language. So HTML and CSS are the essentials(for web development) that you have to learn before you move onto a programming language (JavaScript, we'll talk about it later).

But now the question comes where can I learn them? Well for that, I'm listing some Free resources where anyone can start learning or revise what they know already.

Free Resources to get started with HTML and CSS:-

Choose one from the above and get going ✨

Before you move on to building layouts make sure you know:-

HTML Basic and Semantic Tags
CSS Selectors, box-model, basic properties with their values, positioning
CSS Flexbox (lifesaver - here is Wes Bos Free course which is a good one flexbox.io)
CSS Grid (Here is Wes Bos another free course for CSS Grid cssgrid.io)
CSS Media Queries for Responsive layouts

Now that you know the Basics with CSS Flexbox and Grid, you have to practice building some web pages and I am gonna recommend you an awesome site where you can try building layouts and get some feedback for your work too.

Frontendmentor.io is an awesome site that contains layout challenges for beginners as well, they will basically give you a zip file containing images, design, and style guide which you'll have to follow and you just have to code it without thinking about designing at all! Just choose a beginner level challenge and start doing it. This was where I got my confidence that Yes, I can build layouts now. You can join the Frontendmentor community on Slack where you can have some mates and share your work and get some awesome feedback which will result in your growth.

These were some of the best resources for HTML and CSS that I have used during the last year since I started my journey.

Now that you are comfortable with building Responsive layouts Lets move onto the muscles of a webpage I mean JavaScript.

Haha, these gifs are cool 😂, I hope you enjoy them along with the blog.

Why do we need to learn JavaScript?

JavaScript is must know programming language if you want to become a good web developer as its responsible for the functioning of a webpage like in order to make a button do something (known as DOM manipulation) you'll need JavaScript and so the list goes on. In earlier days, JavaScript was just used as a client-side programming language (scripting that is present inside the client's HTML page) but nowadays we can use it for back end (refers to parts of a computer application or a program's code that allow it to operate and that cannot be accessed by a user) too with the help of Node.js which is a JavaScript runtime environment and can be used to build games, desktop apps, mobile apps and much more. AWESOME RIGHT?

Yeah Fab, we got it now tell us where can we learn this amazing language?😆 Sheesh, I was just coming to that...

Where can you start learning JavaScript?

There are so many resources that people often get confused, so I will explain when and why to use the mentioned resources.

Free resources for learning JavaScript

Colt Steele YouTube Beginner Course (latest) - This video is an almost 3-hour video where Colt (My fav online teacher) walks you through the very basics of JavaScript after which you can move onto learning more advanced stuff. I would recommend this to a complete beginner totally.
Florin Pop's Youtube Channel - This guy is a wizard seriously, after going through the Colt's video you can check out Florin's Learn JavaScript and JavaScript Arrays playlists to learn more advance concepts and practice them. He has other playlists for CSS and Freecodecamp's HTML and CSS curriculum so you can check them out too.
Traversy Media, DevEd, and The Net Ninja Youtube Channels - These are amazing guys who have many videos and playlists for learning JavaScript along with videos which include building a fully functioning webpage with HTML, CSS, and JavaScript(DOM Manipulation).
Wes Bos YouTube Channel - Wes has a JavaScript30 playlist where he teaches us to build 30 things with Vanilla JavaScript in 30 days. It's a must after you understand the basics of JavaScript and are familiar with ES6 (you might want to check out Freecodecamp's ES6 module for this).

These were all visual learning resources but if you like to learn from written resources - I gotcha 🥳.

Hehe I know I am just so Fab 😁 (Sorry cockiness comes with me as a package)

FreeCodeCamp.org, Codecademy.com, and Scrimba.com - All of them are awesome for practicing JavaSript and improve your problem-solving.
You don't know JS - Might not be your best option as a beginner but you can try reading the book after you get good at fundamentals from the above-mentioned resources.
Flavio Copes Handbooks and Blogs - He is an awesome blogger and his handbooks for HTML, CSS, and JavaScript along with others are really handy plus if you want then subscribe to his newsletters which contain tutorials and many more things.
Catalin Pit Blogs - His Blogs are really helpful and for more, you can get connected to him on Twitter and Instagram @catalinmpit.
Chris Ferdinandi Go make things newsletter - An Awesome Daily Tips Newsletter that will teach you many new things and help you to grow as a developer.

Make sure you actually know the below-mentioned concepts in JavaScript after learning it from any of the above resources:-

Variables
Data types
String manipulation
Functions
Arrays
Closures
Scope
Objects
Prototypes
Classes
Promises, Async/Await
DOM Manipulation - Document Object Model is an object-oriented representation of the web page, which can be used to update the content, structure, and style of the HTML and CSS Documents.

Phew, that was a lot, although I still have some resources as a beginner, these will be enough. (Stay tuned for upcoming blogs with more resources). All that I mentioned above comes under Front End Development (Deals with client-side development - what a user can see and use)

So now after you have learned JavaScript you HAVE TO build few things to practice what you learned before you move forwards, trust me it's the only way to become good at it.

Start from building Landing Pages which require some DOM manipulation through JavaScript - it can be as simple as hiding and showing a thing or changing the style on a click, etc, the main point is to practice DOM Manipulation as much as you can.
After you are comfortable with building static sites its time to move onto a bit complex part - to build web apps (Don't worry, if you followed the above-mentioned track you'll be ready to get your hands dirty with some code). Now now, I am not asking you to build the new Facebook or Twitter, We'll start small with a CRUD Todo App which stands for Create Read Update Delete that means building an app where a user can create Todo's, Update and Read the existing ones along with being able to Delete the desired ones. Try creating this on your own at first and don't be afraid to google anytime you feel like you're stuck or can't think of anything (cuz that will happen a lot, trust me).
When you're comfortable with building a Todo App from the scratch without any tutorials at last, on your own then move onto building an app where you fetch some data from an API and display accordingly on the webpage. It can be a Dad Jokes App followed by A Weather App or A Movie App.

You can surely find tutorials for the above-mentioned Projects but try doing these projects again till you can create them on your own without tutorials which can be your 2nd, 3rd, or 4th try doesn't matter how long it takes but make sure you are good at it in the end.

A few tips I would like to give at the end are:-

Don't be sad if you can't remember all HTML tags or CSS at first, it's totally normal to not remember anything at the start. You will remember them better when you keep building stuff more often plus Google exists for a reason alright even senior devs use google all time and its one of the most important skills as a developer to know how to google so don't you dare feel bad for googling too much.

Use your mind as a processor, not as a memory - Just know what and where to find stuff and you are good to go.

Building layouts will feel like climbing Mount Everest at first but don't worry just break down page sections into blocks, use pen and paper and make boxes around elements and then try building the page in chunks - this is the best way to learn.
JavaScript will make you feel overwhelmed (100% guaranteed) but don't give up just because you can't solve the problem on your own or need hints and google for it - its normal because at first, our mind is still adapting the language so it's fine to look at other people code and their solutions and UNDERSTAND why and how that works. Try until you can solve your problems with little or no help but till then its fine to look at solutions to understand how things are done.
Building Web Apps will make you feel - "Holy Cow, how am I supposed to think like that ?"
But don't worry once you get familiar with how others build things your mind will start thinking like that too, just be patient as Patience is the key.
I won't say don't compare yourself to others as I still couldn't get myself to do that completely but I'll share what I do when I start comparing myself to others - I tell myself "It's okay if someone learned it faster than me or became good at something fast, I have a different life with a different timetable so I'll go according to mine and let others go according to theirs. I am doing my best and I am enjoying the process, I'll reach my destination sooner or later but I WILL"
Don't let questions like "I am not good enough, maybe it's not for me?" get to you, you can effin do whatever you want once you are determined.
If you get stuck and have googled enough (< a day) then try contacting other developers asking for help telling them straight that you are stuck here and have googled but couldn't solve it still. Never message anyone just Hey or Hi, mention why are you DMing them as it increases the chance of them helping you. Instagram and twitter have amazing #100DaysOfCode, #Buildupdevs and #DevinitelyHealthy community which are very active and always ready to help others.
At last but not least PLEASE take breaks frequently as they help to refresh your mind and come back stronger.

I am gonna wrap this blog here as its enough for a beginner and I don't want anyone to get overwhelmed with the extra Information. I will be continuing the series in the future as I keep learning more.

PS: If you need help or have any questions then connect with me on Twitter and Instagram @fabcodingzest (I won't be active on Instagram for June 2020 as I am taking Insta Break but you can find me on Twitter)

Top comments (37)

Jakub • Jun 3 '20

This is impressive 🤩 I'm sure this must be helpful to every starting web developer... maybe I can consider myself being one? (because you've included so many free resources, you're basically disproving everyone complaining about not having money to learn lol). Keep going, I'm looking forward to reading more of your posts. 😛

Fab • Jun 4 '20

Aw man thank you so much, and yeah the main purpose to mention free best resources only was to make it available for everyone and no one feels like they are missing out on something.
THANK YOU SO MUCH FOR TAKING OUT YOUR PRECIOUS TIME TO READ THIS, I TRULY APPRECIATE ✨🤗👊🔥

Manan Gouhari • May 31 '20

Super detailed roadmap, a must have resource for any begginer!

Fab • May 31 '20

Thank you so muchhhhh, don't forget to recommend it to any beginner XD 😂🥳😎✨

Manan Gouhari • Jun 1 '20

Already done that✌🏼

Ridho Febriansa • Jun 1 '20

Great roadmap, thank you for sharing!

I've been doing freelance with backend in these last 2 years, simply because I'm really not good at HTML and CSS. Lot of clients are asking fullstack apps, it consist of backend plus HTML and CSS (JS opt). I could finish the backend part in a week, yet I spend more than 3 weeks to finish the frontend. There are lot of things that I couldn't find the exact way to google, so I spent lot of times to google simple things on HTML/CSS part such as how I could put header navigation stick at the top while scrolling and etc.

So I decided to start learning fundamentals of frontend to make my working experience become better. And your roadmap is really great because you are mentioned lot of resources, why we should learn something, and your personal experience during your learning.

Thank you!

Fab • Jun 1 '20

Oh my god thank youuuuu 🤗
This was my first blog and I was nervous but I tried my best to mention all the best resources and struggles which one will face definitely so that they know they are not alone.
I hope you can use these resources to get better! You can do it!👊🔥
Feel free to hmu if you need help (with front end cuz I don't know back end YET XD).
and you're welcome 👊✨

Matt Studdert • Jun 3 '20

Awesome roadmap, Fab! Thank you so much for the Frontend Mentor shoutout. I'm really happy you're finding the challenges useful! 🙂

Fab • Jun 4 '20

No problem Matt,
Thank you for making such a platform where everyone can grow and learn✨🤗

Quen-Quen • Jun 1 '20

Great post, detailed roadmap! Thanks for sharing, congrats!

Fab • Jun 1 '20

My Pleasure and Thank you so much for reading itttttt✨

Duane Chetcuti • Jun 1 '20

Great article! I love flexbox.

Fab • Jun 2 '20

Thank you and me tooooo 😆

Maxime Veber • Jun 3 '20

God. Why isn't openclassroom listed here ? openclassrooms.com/en/ (actually it's best for french, but super cool also in english)

Fab • Jun 4 '20 • Edited

I am sorry I never used this resource plus I am not a french so plus I just mentioned free resources so everyone can use em.
I hope you found the mentioned resources somewhat useful.🤗✨