Self-learning the basics of HTML, CSS, & JavaScript

What worked for me (and is hopefully helpful for you!)

Below is a quick and dirty summary of what I did to get strong enough writing code to get accepted into Fullstack Academy’s Software Engineering Immersive program. I spent 2–3 months working through a handful of the resources below, primarily on the JavaScript side since that’s a little hairier in general.

Hopefully this will be helpful to you if you’re exploring the idea of learning to code but just aren’t sure where to even start.

Photo by Alexandru Acea on Unsplash

I never appreciated teachers more than when I had to try designing a curriculum myself.

One of the hardest things about self-paced, independent learning was wading through the massive amounts of content available, in many cases totally free (one of the coolest things about this industry, btw!). In such a rapidly evolving space like web development, it was really tough to figure out which courses (and technologies) were still relevant, which courses were actually being taught well, and frankly which courses would not just be a big waste of time.

I was fortunate enough to have a handful of close friends that are software engineers, so I got some great guidance along the way. I encourage you to reach out to anyone you know in the industry for the same.


Where to begin?

It was recommended to me to ease into coding by trying my hand at basic HTML & CSS, which looking back was definitely the right move.

HTML is a collection of predefined elements that can be combined into a tree-like collection that defines the structure of a webpage. These elements are defined by their various tags, for example:

<h1>Header tags for... well, headers</h1>
<p>Paragraph tags for body text</p>
<a
href="somewebsiteURL">Anchor tags for hyperlinks</a>

From a beginner’s perspective, I think starting in HTML makes sense because it doesn’t require a lot of complex logic. It’s more about understanding how a basic website structure is defined under the hood, so you can focus on the basics.

CSS — or cascading style sheets — provide the styling of a website. It’s how you dictate things like the font, text sizes, background colors, and way too many other things to list (like Flexbox fun).

What did I use for learning HTML & CSS?

My first foray into HTML and CSS (and a little bit of jQuery) was a paid course (like $9.99) on Udemy by Jonas Schmedtmann titled Build Responsive Real World Websites with HTML5 and CSS3. I coded side-by-side with each video in the course, and felt it gave me a solid foundation in HTML/CSS. And while jQuery isn’t necessarily the “hot thing” anymore, there is plenty of legacy code out there and the course still provides a useful lesson in DOM manipulation (further solidifying your knowledge of HTML and its structure), so that’s worthwhile as well.

I felt this course gave me a solid enough base in HTML and CSS, so after I finished, I just moved on to JavaScript (which is a beast of its own).

If you’re looking for something free — or just a few more places for HTML- and CSS-focused material — the following would be helpful (I used many of these sites while learning JS):

  • freeCodeCamp’s Basic HTML and HTML5 and Basic CSS curriculum (I did all of the HTML section and a good chunk of the CSS section, but admittedly got a little bit bored with this one, though I know others have really enjoyed it)
  • Codecademy’s Learn HTML course
  • Other resources that are supposed to be great (and free!) but I don’t have experience with: treehouse, Coursera, edX (founded by Harvard and MIT), and Khan Academy

And now for the JavaScript…

Learning foundational JavaScript is a bit more involved than HTML or CSS. Not only does it involve a totally new syntax, but it’s where all of the logic of your webpage will be defined as well. JavaScript is what makes a webpage interactive and there’s just a lot more going on behind the scenes than you’d realize.

Unlike HTML and CSS, which remain largely static (the exception being changes driven by JS), JavaScript is constantly orchestrating a continual cadence of change on a site.

The below are all resources that I used and strongly recommend. I’d also advise tackling them in the following order, too:

  • Codecademy’s Introduction to JavaScript is probably my #1 recommendation for where to start. It hits on all the foundations, while also getting you comfortable with ES6 (ECMAScript 6), which is the latest version of JavaScript standards.
  • Udacity’s Introduction to JavaScript is fantastic and was recommended before submitting my application to Fullstack Academy. Udacity also offers a dedicated ES6 course, too.
  • Fullstack Academy also makes this awesome resource available online for free: Bootcamp Prep, which I highly recommend! It gives you everything you need to get comfortable enough with JS to successfully apply to FSA. I’d recommend completing one of the two aforementioned courses first, though.
  • Eloquent JavaScript, Chapters 1–5. How cool is this? Marijn Haverbeke wrote an entire book on virtually every major JavaScript topic, and then just put it online for anyone to access, 100% free. Just about every bootcamp I looked into has this on their prerequisite reading list.
  • Gordon Zhu’s Practical JavaScript is another great resource that is best completed by coding side-by-side through each of his lessons. It hits on some more advanced topics and is probably best to save until you’ve finished a couple of the previously listed courses.

These are all great for getting your hands dirty with the foundations of HTML, CSS, and JavaScript.

If you’ve got other courses you’d recommend, or just want to say hi, shoot me a line at dtrabka@gmail.com :)