FRONTEND DEVELOPER GUIDE - PART 1
Tags: html, css, javascript, frontend
Published: 2020-05-25 05:45:25

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](https://www.youtube.com/watch?v=SWYqp7iY_Tc) 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](https://www.youtube.com/watch?v=fnPhJHN0jTE) 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](https://youtu.be/Xm790AkFeK4) video and [this](https://www.learnenough.com/command-line-tutorial) 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](https://codingkilledthecat.wordpress.com/2012/06/26/how-to-ask-for-programming-help/)
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](https://learn.shayhowe.com/). 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](https://developer.mozilla.org/en-US/docs).

* 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](https://100dayscss.com/) 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](https://getbootstrap.com/). 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](https://surge.sh/),
[GitHub Pages](https://pages.github.com/) or for more ambitions stuff [Heroku](https://www.heroku.com/). 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](https://www.khanacademy.org/computing/computer-programming/html-css-js)
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](https://javascript.info/) and
[MDN's Javascript Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript). 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](https://javascript30.com/). 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](https://www.hackerrank.com/), [CodinGame](https://www.codingame.com/) or [CodeWars](https://www.codewars.com/users/sign_in).

* 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](https://www.edx.org/course/programming-web-javascript-pennx-sd4x).
If you want more Computer Science specific stuff do [CS50](https://www.edx.org/course/cs50s-introduction-computer-science-harvardx-cs50x) or
tackle some of the stuff in [Teaching yourself CS](https://teachyourselfcs.com).

---

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!