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";
Also, anyone is free to join my new, and growing community Code Discuss.
All for now!
Top comments (17)
Nice "Introduction To..."
Thank you Jordan. if you see any suggested improvements, please say so!
For front-end I think this is a great place to start. I've started my 8 year son on HTML to introduce design into his life and he's loving it. I started the same way but I never learned JavaScript, instead I focused on PHP to display dynamic sites. I don't doubt that JavaScript is powerful but back when I started learning all of it there was a lot of issues with browser support so I never felt the need to pick it up, and still don't for the projects I do.
That makes good sense. Your son started when he was eight! That is great, he'll know a lot by the time he's twenty.
That's what I'm hoping for. He's autistic but the high end of the spectrum. He grasps things like that very quickly
Okay. I'm glad you are making effort to be with, and teach your son. Whether the child is autistic or not, fathers have a God given responsibility to be with and teach their sons.
Sometimes he teaches me! He comes up and asks questions and I look up the answer and he's like yeah I already knew that and then start talking about it. I think it's his way of being able to have a conversation about something he's interested in without someone telling him that they don't know
Yes! I have heard many people say that in many ways their autistic children are a great blessing to them. Me and you should stay in touch. Do you have a Discord account?
I honestly haven't used it in a long time but I will get it back. That sounds great, I'd love to stay in touch!
Okay. I can link you to my account if that works.
Whatever works best for you, I'm more active on Twitter than anything but here are both handles of mine.
Discord: @jordantylerburchett
Twitter / X: @JTBurchett
Ya... I don't use twitter, so discord works best, if that's okay.
Okay. I sent you a friend request.
This language is in one word 🤨
Okay, you mean that it should be written "JavaScript?"
Yes 🙌😎
JavaScript | MDN
JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
Thanks. I'll fix that.