Launching Into Front-End for Absolute Beginners

Hello new devs, I'm almost still one of you. It wasn't long ago I was typing my fist line of HTML. I remember how overwhelming it was starting out. I tried to read articles, but fifty percent of terms that the authors used made no sense! Typing "beginner" in the search bar didn't usually help very much. Most things where still geared toward somebody who already knew a little bit, not for absolute beginners.

So, all that said, in writing this post I am trying to form a road map for any beginner, launching into front-end, even if they're an absolute beginner.

Front-End

Well, I think the first question would be, "what is front-end???" Now, I could dig real deep, and get very involved in answering this question, but it wouldn't do you any good, because I'd have to explain using concepts you have yet to learn. In a nutshell, though:

Front-end is the code that directly deals with whoever is using the software.

If you feel like the above sentence is too vague for you, just know, even experienced devs I talk to can stutter a bit when trying to outline the logical reason front-end is front-end. The best way to know what front-end is, is to learn it.

Learning Front-End

And so, how do you start learning front-end? Well, there's no one right way, there are just quite a few wrong ways. But, if I were to start rattling of wrong ways, it would overwhelm you. You don't need to be told where not to go. You need to be told where to go. So, I will outline a good starting course, that should serve you well.

Step 1 - HTML and CSS

What are HTML and CSS? In short, HTML is like the framework of a house. All the solid materials that make it up, such as two-by-fours and drywall.

CSS is like the paint, and outlet covers of a house. It turns a website from an ugly, spartan experience, to something that looks nice, and is visually appealing.

Now, how do you go about learning HTML and CSS? I would recommend the freeCodeCamp online course.

As the name denotes freeCodeCamp is totally free to use (they don't even have a premium version, so you won't be frustrated by constantly running into closed doors). They have a project-based learning course for HTML and CSS. It's great! Also, they have a very active forum, where you can get answers to any questions that come up, about the curriculum, or totally separate from it.

Step 2 - JavaScript

Once you have successfully worked your way through the HTML and CSS course, you'll want to move on to JavaScript.

Now, what is JavaScript? Well, let's go back to the house analogy. JavaScript is like the electricity and plumbing in you house. It's what actually makes you website more than a bunch of shapes, and some text on a screen.

JavaScript is what is called a "programming language." There are many different programming languages. They all have several things in common, and are all built on the same fundamental principles.

Now, freeCodeCamp does have a JavaScript course, but I do not recommend it. It moves way to fast, and never gives you a good grounding in the fundamental principles behind JavaScript.

Instead I would recommend you read a book. Yes, even if it doesn't seem as "fun," it will pay off in the end, trust me. The book I suggest you read is called You Don't Know JavaScript by Kyle Simpson.

It will teach you "the reasons why" in JavaScript. Read it from cover to cover (including the introduction, it matters!). It is an involved read, and you may find yourself re-reading each paragraph several times, but this fact just goes to prove that Kyle Simpson isn't just skimming the surface. He's explaining it thoroughly. As you read make sure to actually write the code as you read about it, that's key!

Step 3 - Go!

Now you should know enough to start building! But... where do you start with that? Well, I would personally recommend you join a group of developers. I have a particular group in mind. This group works on a project called Savvato's Mock Programming Job. This is a group of developers, at all different stages of learning, who are building several apps. You can join for free, with little to no experience, and you are welcome! It doesn't matter where in the world you are. At Savvato you will get hands on experience in a professional environment. I can say I've learned a lot by working there, and the mentality at Savvato seems to be "the more the merrier," so don't feel shy.

All you have to do to get started is click the provided link. It will direct you to an invite page, to join the groups channel on Discord. You'll need to sign into Discord, or create an account if you don't have one. With that done, all you have to do is navigate to the "getting started" channel, using the sidebar on Discord. Once you're in that channel type "Hello @haxwell, where do I start?" and you'll be directed from there.

Conclusion

I hope this piece of guidance I have just written is of great help to those reading it. If I was unclear in any point, feel free to tell me so in the comments, and I will amend my mistake. Also, if you have any front-end related questions, as a beginner, fell free to ask down in the comments, or you can contact me with my email below:

const email = "Ben_Leevey@proton.me";

All for now!