The Basics (.dev)

You can file this one under “super-proud-but-shy-to-say-it” because I made a thing that I love but am absolutely the worst when it comes to talking about this stuff.

I’d like you to meet The Basics. It’s an online course that teaches — you guessed it — the basic principles of front-end development, focusing specifically on HTML and CSS. I’m almost afraid to call it an “online course” because that term is all sorts of convoluted with things like coding bootcamps, and The Basics is vastly different.

Allow me to elaborate a teeny bit.

For one, it assumes that anyone taking the course has zero experience writing code. If you jump into any bootcamp covering similar concepts, you’ll find that they cater to folks like you and me who are coming equipped with plenty of experience wrangling code and are there to level up. The Basics is different. It’s a true entry point for those coming into front-end development cold, or perhaps for someone with experience writing code years ago who wants to jump into modern-day development.

I think “entry point” is key here. I recently wrote about the ongoing disappearance of resources for true beginners to crack into web development — something I first became aware of from Rachel Andrew — saying this:

[My] point is that there are more resources than ever for learning web development, but still painfully few entry points to get there. The resources we have for learning the basics are great, but many are either growing stale, are quick hits without a clear learning path, or assume the learner has at least some technical knowledge. I can tell you, as someone who has hit the Publish button on thousands of front-end tutorials, that the vast majority — if not all — of them are geared toward those who are already on the career path.

And that’s where I think I’ve been able to close a gap between all of the various learning materials out there and having an established place for beginners to gain the context they need to understand those materials.

Code is scary, even for seasoned professionals like us who have notched more than 20 years of experience. Learning something new requires a certain level of vulnerability and willingness to spend time out of your comfort zone. It’s easy for us to take beginner-level things like HTML and CSS for granted, but there are plenty of more advanced things out there that are capable of scaring the bejeezus out of someone like me. Like, right now, I’m completely afraid of newer web features like web components even if I’m super excited to learn more about them.

You know that’s how absolute beginners feel when opening a code editor for the first time. Oh, wait, what the heck is a code editor? Maybe we should start there before we write any HTML. What? You’re not sure what HTML is? The Basics goes all the way back without skipping over the sorts of things that someone might be expected to know along the way.

What learners need is an opportunity for deep learning. Unfortunately, many if not most existing articles, tutorials, videos, and bootcamps are prepared by developers rather than educators who understand learning experience design and how to leverage it to accommodate different learning styles and needs. That’s where I consider myself to be a niche specialist because I’ve earned my Master’s degree in Education with a focus on educational technology and adult learning.

In other words, The Basics is less a learning resource than it is an educational experience. It’s designed to help learners develop new knowledge through a variety of learning principles. I’d like to think that The Basics is not just another tutorial because it’s a complete set of lessons that includes reading, demonstrations, videos, lab exercises, and assessments, i.e., a myriad of ways to learn. I’d also like to think that this is more than just another bootcamp because it is curricula designed to develop new knowledge through reflective practices, peer learning, and feedback. It’s quite literally the same materials I use in the classes I teach at the college level.

That’s all I really want to say for now. Again, If you’re reading this, it’s very likely that you, too, work on the front end. The Basics isn’t for you exactly, though I’d argue that brushing up on fundamentals is never a bad thing, regardless of your profession, but especially in front-end development, where standards are well-documented but ever-changing as well.

The Basics is more for your clients who do not know how to update the website they paid you to make. Or the friend who’s learning but still keeps bugging you with questions about the things they’re reading. Or your mom, who still has no idea what it is you do for a living. It’s for those whom the entry points are vanishing. It’s for those who could simply sign up for a Squarespace account but want to understand the code it spits out so they have more control to make a site that uniquely reflects them.

If you know a person like that, I would love and appreciate it if you’d share The Basics with them. Thanks a bunch!

✏️ Handwritten by Geoff Graham on June 11, 2024

778 Comments

  1. # June 11, 2024

    @geoff 🤩 Wow, congrats, Geoff!

    Reply
  2. # June 11, 2024

    @matthiasott Thank you! Means a heckuva lot to me for you to check it out. :)

    Reply
  3. # June 11, 2024

    @geoff Given all the web dev articles you’ve helped put out there — not to mention your career in education — there’s not a lot of people who’d be as qualified as you for this kind of undertaking. Congratulations! 🤘

    Reply
  4. # June 11, 2024

    @chriskirknielsen Damn, thanks so much for the encouragement! I can tell you that your wisdom for sure made its way into those lessons, as I’ve learned a ton from you.

    Reply
  5. # June 11, 2024

    @geoff Shared it on LinkedIn for you 😉

    Reply
  6. # June 11, 2024

    @geoff Thank you for sharing this!

    Reply
  7. # June 11, 2024

    @geoff

    Bookmarked. Thank you.

    Reply
  8. # June 11, 2024

    @geoff super cool. 🤘 But hard to read on mobile (FF) …

    Reply
  9. # June 11, 2024

    @geoff Looks cool, Geoff! Boosted! 💖
    P.S. Welcome to Mastodon. ;)

    Reply
  10. # June 11, 2024

    @geoff First, congratulations on getting this out there! :) A question: to what degree did you take accessibility into account while making this course? A lot of the beginner courses decide to not cover this because insert-your-favorite-excuse-here which as a result means we’re often perpetuating antipatterns down from the very basics and I’d love to hear your course is the odd one out where that’s concerned :)

    Reply
  11. # June 11, 2024

    @geoff Well done Geoff, this looks very awesome! I can’t think of anyone better to teach people this stuff 💖

    Reply
  12. # June 11, 2024

    @geoff I am a boomer that wrote COBOL for Boeing back in the day. But after a few years of that I switched careers and did decades in the real estate field. When I got back into coding about 15 years ago I sure wish I would have had a resource like this so I could start at the beginning and learn how to code for the web. I distinctly recall so many times when I would look at a resource for ‘beginners’ only to see that it assumed prior knowledge. Well done! 👍

    Reply
  13. # June 11, 2024

    @geoff well done mate!
    When I started in 1993/4 when <br> happend woooo! & images were a “what you can put images on!” At first in line with content! But it was reduced to monitor colours & very small download @28k modem is sloooow!

    Reply
  14. # June 11, 2024

    @PabloMartini Ha! It’s funny, but I felt like learning was much easier then because everything felt like an “a-ha!” moment. It’s different these days, but doesn’t have to be. :)

    Reply
  15. # June 11, 2024

    @geoff Ayyy! Congrats on the launch 🎉

    Reply
  16. # June 11, 2024

    @eric And thank YOU for all you’ve taught me — I most certainly cite your work in the lessons.

    Reply
  17. # June 11, 2024

    @geoff I will definitely do this. I’m a backend programmer, but because of the projects that my team takes on, it would be really good if I knew enough about these things to not always be as clueless as I currently am.

    Reply
  18. # June 11, 2024

    @geoff Oh wow, that’s really cool. Thank you 😭

    Reply
  19. # June 11, 2024

    @geoff would you consider this suitable for 10 year old kids?

    Reply
  20. # June 11, 2024

    @geoff AHH! I have sort of retired or retired-ish! but I found doing contract work for designers like front end & CSS which I found a doddle & way more profitable & interesting! So find your niche!
    When I started I had to sell it, spec it, story book it, design it and produce it for the numpties in “business” mmmm!

    Reply
  21. # June 11, 2024

    @geoff you just enjoy it it’s gotta be fun (or do something else?) that’s me!

    Reply
  22. # June 11, 2024

    @geoff

    Webpage under construction …

    Reply
  23. # June 11, 2024

    @geoff hell yeh!!

    Reply
  24. # June 11, 2024

    @geoff fantastic, congratulations!!

    Reply
  25. # June 11, 2024

    @kusalananda @geoff I’m going to check it out too! I’m excited. I’ve been thinking about building a new website for myself. Thanks so much, Geoff!

    Is there anything like this for backend stuff? I have done some frontend work (though not in ages), but I never did quite get how backend works.

    Reply
  26. # June 11, 2024

    @spiegelmama @kusalananda Good question! Is there a particular language you’re hoping to learn?

    Reply
  27. # June 11, 2024

    @geoff @kusalananda Even just a brief lesson on what constitutes backend development and the options therein would help me. It might exist somewhere, but I just have no clue.

    Reply
  28. # June 11, 2024

    @geoff Hey, I’ve been wanting to do this myself… So, this is great in my mind. Doesn’t stop me wanting to do something myself. Just that you’ve got something good here, that I appreciate.

    Reply
  29. # June 11, 2024

    @soulcutter Ooo, inieresting! The lessons are tightly based on my college curricula. So, while the concepts will likely be accessible for a 10-year old, the structure might not.

    There’s a full refund policy for the course, so maybe check it out and request a refund if it feels like too much.

    Reply
  30. # June 11, 2024

    @spiegelmama @kusalananda I wonder if Web Bos’ courses might be a good fit. They straddle the line between front-end engineering and development which makes it easier to see how they relate, but are different. https://wesbos.com/courses
    Courses

    Reply
  31. # June 11, 2024

    @jigmedatse I appreciate that a lot — the more ways we offer folks to get into front-end design and development, the better! I’m always happy to look at something or offer any advice I might have.

    Reply
  32. # June 11, 2024

    @geoff way to go! It’s been YEARS since developing web pages using html and css, but I -still- use what I know to troubleshoot when Uptrends tests against developers web pages fail. Learning html and css is well worth the time. Wishing your work much success!

    Reply
  33. # June 11, 2024

    @geoff Congratulations on publishing this project! This looks nice.

    I think most people who are completely new to coding will not know what “front-end development” means. Maybe you can sprinkle some “learn to make websites” in there?

    Reply
  34. # June 11, 2024

    @geoff awesome, congrats on shipping!

    Reply
  35. # June 11, 2024

    @geoff I sent the link to some family who aren’t in the fediverse, and bookmarked for myself too, thanks very much!!

    Reply
  36. # June 11, 2024

    @apriloq Oh gosh, thank YOU very much. I appreciate your help getting the word out.

    Reply
  37. # June 11, 2024

    @geoff you’re welcome, and I hope you get tons of learners!

    Reply
  38. # June 11, 2024

    @geoff Very nice! I’ve recommended it for a co-worker’s professional development.

    Reply
  39. # June 12, 2024

    @geoff 💪🏻💪🏻💪🏻

    Reply
  40. # June 12, 2024

    @geoff When I was a boy tinkering around with making my own website I used a resource called HTML Goodies (now dead) which assumed no prior knowledge. I applaud the creation of similar resources for the current generation, when #WebDevelopment has gotten so complex by default.
    webdevelopment

    Reply

Leave a Reply

Markdown supported