If you already know how to code HTML, this post is NOT for youFeatured

At this point, if you’ve made it this far in your career without writing any code, you may be wondering whether it’s worth it to learn to code at all. Low-code/no-code tools like Webflow, Bubble, and Zapier make it easier than ever to publish and prototype without ever touching a code editor. So, why bother learning how it works behind the curtains?

Hear me out. Even if you have zero interest in becoming a full-stack developer, code literacy can unlock possibilities for you in life and at work.

Let’s say you have an idea for an app and you need a developer to take things from prototype to MVP. With a foundation of technical knowledge, you’ll hire better and communicate more effectively as you work together to scale your app.

Or, let’s say you need to change the color of a button in an email newsletter you want to send. Without any code, you’re limited to the constraints of the WYSIWYG editor. But, if you know a tiny bit of HTML, you can swap in the precise hex code for an on-brand color without waiting on anybody’s help.

While there are tons of programming languages worth learning (Python, Java, PHP, and so on), I personally like frontend web development languages like HTML, CSS and JavaScript. They’re accessible, fun, and useful for building things.

Here’s the problem: Docs and tutorials are often written by more experienced developers who don’t remember what it’s like to start from square one. People who had the opportunity to learn how to code in school or taught themselves to customize their own Myspace pages (am I aging myself?) might take for granted that they’ve always sort of understood how things work.

Even if you find a solid tutorial, getting your own developer environment setup can be a barrier to entry! Between finding the right code editor, connecting your Git repo, and learning your way around the terminal, it’s way too easy to hit an error. Who among us hasn’t found ourselves Googling, “Help! I’m stuck. How do I exit Vim?”

Bootcamps are awesome if you’re looking to make a major career shift, but they’re also expensive and super fast-paced. Probably overkill if you’re just looking to build some new skills on the side.

If you’re thinking, “You lost me at Vim. I know LITERALLY nothing,” please stick with me for a minute. I’ll teach you one thing you can do RIGHT NOW to learn about frontend web development without signing up for a tutorial course.

We’re going to hack this Elpha post, and I’m going to walk you through it step by step. Let’s go!

First, are you reading this post on your phone? Stop. Grab your laptop or head over to a desktop computer. Open up this page in a browser like Chrome or Firefox. (If you’re using Safari, you’ll need to go to Safari > Preferences > Advanced and check the box next to text that reads “Show Develop menu in menu bar.”)

Still with me? Nice. Now, follow these steps:

1. Right-click (or control + click) anywhere on this post in your browser.

2. Select “Inspect” or “Inspect element” from the dropdown menu. This should open a developer tools panel so you can see the code that’s rendering this web page you’re reading. Do you see all of the text that read div or span? Those are HTML tags. HTML tags act like wrappers for content like text.

3. Find a span tag with the CSS class “text-line”.

4. Click the little arrow next to any span tag to expand the text that’s wrapped within the span tag.

5. Double-click to select whatever text is shown between the “ “ quotes.

6. Click backspace (or delete) to clear out that text. Write your own sentence there. For example: “I am hacking this Elpha post right now!”

7. Hit enter (or return) to save your change.

8. Revisit your browser and find the text you wrote has replaced the text on the page!

Wild, right?! You just changed some HTML in the DOM. Take a screenshot for your scrapbook.

Don’t worry. Your hack isn’t going to break Elpha for everybody. The code you changed in your browser only shows up to you on your machine. If you refresh this page, your change will disappear. Poof!

Hacking HTML in your browser may seem silly, but it’s a great place to start. Sometimes it’s easier to tinker with something that already exists instead of writing code from scratch.

Did you try this out? Reply back with a screenshot and show us your hack!

Belle's profile thumbnail
This is such a great post! I always struggled to self teach code, because I'd hit a wall and get stuck and struggle to push through it! Now I remember very little of the bits I taught myself years ago, which can feel quite disheartening. Are you offering/suggesting good places to learn code as a total noob?
esolodow's profile thumbnail
Hi Belle, I've been using DataCamp (https://www.datacamp.com/) for the past year. It's around $250 for an annual subscription. They have classes in many languages (like SQL and Python, and they even do Excel tutorials). All classes are around 4 hours but broken into smaller section so you can learn chunks at a time. I try to do just fifteen minutes a day so I'm not overwhelmed with content! You can do all of the first chapters of their courses for free if you want to check it out. I highly recommend it. They also have Skill and Career tracks that compile courses together based on what you want to achieve, and you get a certificate at the end for posting on LinkedIn or adding to your resume.
Belle's profile thumbnail
That's so great, thank you! I was using codecademy, but even the paid for version didn't seem to quite teach enough for a proper understanding, hence the many walls I've hit haha
esolodow's profile thumbnail
DataCamp has such a diversity of courses that I found if I didn't quite gel with a concept in one course, the next one I took usually revisited similar concepts and gave me more practice so I could really learn how to do it. Let me know if you try it out!
Hello Belle Send me a Message I Can share quite a few Knowledge with You
annagavrilova's profile thumbnail
That's really fun, thank you!
melaniecrissey's profile thumbnail
YESSS. Love it! Look at that grit!
esolodow's profile thumbnail
How awesome! Thanks for this :)
melaniecrissey's profile thumbnail
YESSS kittens!
teresaman's profile thumbnail
LOVE how interactive this was! thank you 🙌Another fun one is also to type document.designMode = 'on' in console, which makes all text editable on site 😎
melaniecrissey's profile thumbnail
Today I learned! Love it!