FRONTEND DEVELOPER GUIDE - PART 1

#html #css #javascript #frontend

Welcome to the first official blog series that I'm doing to practice writing guides/tutorials.

Who this guide is for: complete beginners and practicing developers.
Who this guide is NOT for: intermidiate or advanced devs.

This is my "Baby steps to getting going doing front-end web development for beginners by a beginner". I'm not some
tech-speaker guy who made insane OSS projects or an advocate for a large tech firm. I'm a junior dev who a few months
ago got his first ever job and I want to share some tips on how I got there, so that maybe you can get your feet off
the ground and make some stuff.

This series will have 3 parts: Part 1: Resources to learn, Part 2: Making and hosting projects and
Part 3: Advice for job searching

WELCOME TO PART 1!

The core things that you need for a front-end developer focused productivity are the holy trifecta of web dev: HTML, CSS
and JS. I won't go into too much detail about each language and technology. That's what the resources are for. But in my
own words:

HTML is the skeleton and the whole reason why you can put things up on the screen in your browser. It serves as the architecture and structure of your site or the content if you will.
CSS is the styling component. Colors, fonts, positioning, size or things, animations etc. CSS does all of that and so much more.
JS is the interactivity component. This is the main thing you need to learn, the swiss army knife of web dev. If you can learn JS you can learn anything. It is the programming language of the web.

There are also things that aren't really programming or development specific, but are necessary to be productive in todays
web dev world:

Chrome Dev Tools is an essential tool for debugging, testing, checking and maintaining code. There will be resources to learn this but you can only learn from articles and videos so much. Best way to really learn dev tools is to work on projects.
Git/Github version control is also essential. I highly recommend this video by Traversy Media explaining how to make a repo, add code, do commit messages and push to master. Do this first before you do any projects or learning.
Markdown this isn't a necessity but it's a useful tool to write README files on GitHub and maybe blogs like this one.
VSCode you need an editor to write your code in. I recommend Visual Studio Code. If you need some help figuring out how they work this video will help.
Terminal/Console/CLI knowing how to operate a console is essential. Almost everything you are going to be programming will involve some use of a terminal. Use this video and this guide to learn.

Right. So are you aren't overwhelmed already are you? If you are it's ok. I was overwhelmed and so was everyone else that had
to learn this stuff. Don't worry about learning everything all at once, learn just the things you NEED. For everything else,
Google is your best friend.

I also highly recommend this
guide on how to ask programming questions. And yes it's essential because you are going to be doing two things a lot:

Asking questions
Searching for answers

Learning how to do these is the most important skill you can learn right now. Ok enough fluff, let's get to the resources.

HTML/CSS

These two are usually coupled together purely because you can't write CSS without HTML.

Shay Howe has two amazing tutorials for HTML and CSS both for advanced and beginner topics. It is my go to recommendation
for people learning these two. You can find the guide HERE. Do all the exercises, look at
the additional resources he provides, write code in your editor and push code to your repository. Don't use some online
editor, code on your own machine and save code to GitHub/GitLab. For references about HTML and CSS use MDN.
After you finish the Shay Howe guides I recommend you do two things: make your own website and do 100 days of CSS. To make
your own site you just need HTML and CSS. Make it ugly and messy, but finish it. Make it small. Use only things that are
necessary for showing who you are and what you do (introduction, what languages you know, experience and contact are good sections
to focus on). 100 Days Of CSS isn't recommended to do all the projects, just enough that you get good at CSS.
Do one project everytime you are bored or have an hour to kill.
Learn Bootstrap. This could easily be Foundation, Bulma, Semantic UI or no framework at all.
But Bootstrap is widely used to create websites faster. Redesign your personal site with Bootstrap. If you get stuck use the
official documentation or Google around. Teach yourself to know what you don't know.
At this point you can start learning JS, but if you still need practice you can clone the design of one of your favourite sites,
explore the different CSS frameworks mentioned above, learn more about SASS or LESS and maybe even Pug or HAML. The choice is
all yours, what matters is that you get to build something. You will not learn all of HTML and CSS by following guides, you learn
just enough so that you can use it somewhere. Don't go and learn the entire Bootstrap framework. Just use the assets and code
that you need for your project.
You might also be thinking: "Where can I host my sites?". I recommend one of the three options: surge.sh,
GitHub Pages or for more ambitions stuff Heroku. All of these are free
to use to a certain limit of data or size.

JavaScript

This part will be massive just a notice. The JS ecosystem is insanely large, but don't let that turn you away from learning it.
It used to piss me off just as much as you, but overtime you get to understand it and can write functioning applications and sites.

First off there isn't one amazing resource to learn JS. There are tons out there, some better than others. I will try and list
the ones that have actually helped me learn how to add JS to websites and how to use it the "modern way".
I would recommend starting with the Khan Academy videos
on DOM (Document Object Model) manipulation. You can also take the complete HTML/CSS/JS course there if you like. You might learn
something you haven't in the previous guides.
Next I recommend you maybe try and add some of what you have learned to your personal website. Maybe just a button that says "Hi!"
when you click it. After that I want to point you to javascript.info and
MDN's Javascript Documentation. Follow the javascript.info guide, learn as
much as you can from it, what you still don't understand you can lookup using MDN.
At this point I have to recommend that just doing programming exercises and doing guides won't be enough to learn JS. I strongly
recommend you start reading blogs, listen to podcasts, follow subreddits and watch videos on anything JS related. You need to learn
the terminology, design and architecture of writing JS and the guide alone won't teach you this. Consume a lot of programming media
related to JS.
After this you can head on to Wes Bos's JS30. You will need to understand ES6 by this point since
Wes is a heavy user of it. This is by far one of the best resources to really learn JS. You do 30 small projects in 30 days, or even watch them at your own
pace.
Next I want to recommend some sites similar to 100DaysOfCSS, where you can have on-going practice for JS. If you ever need more
practice hit up HackerRank, CodinGame or CodeWars.
Here you are ready to branch out and learn either React, Angular or Vue. They combine everything you have learned up untill this point. Pick one,
make something small with it, find out which one is best for you and which one makes you more productive. If you want to dive deep into more front-end
and back-end stuff I recommend Programming For The Web With JS.
If you want more Computer Science specific stuff do CS50 or
tackle some of the stuff in Teaching yourself CS.

That's kind of it! Those are my recommendations for what to learn. There are loads of things I probably forgot, but you are going to learn most
of them anyway when you go through all the resources :D

Hope you learn something and I will see you in Part 2!