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.
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!