When I learned to code, my whole perspective changed. I left an unfulfilling career in advertising and began my journey into the tech world. Now I teach at Skillcrush because one of my greatest passions is to show other unsuspecting smarties (like you!) how beneficial learning to code can be—for your career, your mind, your sense of self, your wallet, and anything else I missed.
Web development is a fabulously fun and creative career path that I LOVE watching students embark on. There’s nothing like working with a total code newbie, introducing them to tech, and witnessing that first “aha” moment. I can see our students thinking, “WOW! This is awesome! I want to do this for the rest of my life, starting RIGHT NOW!”
It’s pretty empowering to realize everything you can create once you learn to code. But if you’re totally new to the scene, you may be wondering—what can you really DO with that skillset?
The answer? Pretty much anything. As a developer, you’ll build stuff every day. And what you build is really up to you. Maybe you’ll create the next big food delivery app. Or a new platform for signing up for health insurance. Or a better website for booking concert tickets. Or you’ll help SpaceX have more successful launches. Or maybe you’ll just decide to hack Beyoncé’s Twitter. (More on that in a bit.)
If those possibilities seem overwhelming, don’t worry. No matter what you want to build with code, you’re going to start with the same handful of skills as the next coder.
One of the first tools you’ll learn about when you begin your journey into development is Chrome’s “Inspect Element” feature. And you don’t have to look anywhere special to find it. It’s already at your fingertips as you read in this browser. #meta
You can also use Firebug, the equivalent on Firefox. Both these tools behave similarly and their objective is to allow developers to:
- Instantly test the way your code will look in the browser before you make it “go live.”
- Make on-the-fly tweaks to a live website.
- Check out code used on other sites you love (or loathe!). It’s like checking below the hood.
- Conduct performance audits to check for statistics, like how long it takes your page to load.
No matter what direction you go with code, “Inspect Element” is one of those game-changing tools you wouldn’t know how to live without. In this article, I’ll walk you through using the Inspect Element tool in Chrome to give you a taste of just one of the types of tools developers use in their day-to-day workflow.
And don’t worry if you have yet to write your first few lines of code—this is a complete beginner’s guide and we’ll use BEYONCE’S TWITTER to have a little fun while we take the tool for a spin!
Yup, I said BEYONCE! We are going to hack her Twitter. She won’t mind. That’s because we’re not REALLY going to hack anything. AND we’re going to be responsible about it and not do anything to break the Internet. And best of all, we’re going to have FUN!
Download Chrome if you don’t have it
We’ll be working with Chrome, so if you don’t already have it installed, go ahead and do so by visiting the Chrome site and selecting the “Download Chrome” button. You’ll get a prompt to accept Google’s Terms of Service. Once you accept, Chrome will download on your desktop and you can follow the prompts to install it.
Open a new tab in Chrome and navigate to Beyonce’s Twitter account
Once Chrome is installed on your machine, double click to launch it. Open a new tab alongside this blog post so you can work side by side and easily follow instructions to Hack Bey’s Twitter feed.
Find the Inspect Element Tool
Once you’re on Beyonce’s Twitter feed, right click on your mouse (control + click on a Mac). A menu of options will pop up. At the very bottom, you should see the “Inspect Element” option. Click on it.
Note: If you like keyboard shortcuts, you can also use Ctrl+Shift+C (or Cmd+Shift+C on Mac) in lieu of clicking.
The Inspect Element console
Once you click on “Inspect Element” a drawer will emerge on the bottom of your Chrome browser window. This is called the “DevTools” window. At the very top of the DevTools window, you’ll notice 8 menu options:
We are only going to focus on the “Elements” piece for now. On your webpage, confirm that the elements option is selected.
Note: You are going to see a LOT of code. Don’t panic! You can’t break anything. Promise!
Now that you’re in the Elements option of the DevTools window, take a look at the left-hand side of the screen.
The left side of the screen shows you all the structural code associated with the website (HTML, for example). The right-hand side shows you all the CSS, or styles, associated with the website. The elements panel lets you take a look at the HTML & CSS of any web page. You can make tweaks to the code LIVE, and watch the changes take effect!
Let’s take Inspect Element for a Spin on Beyonce’s Twitter.
In the tab you loaded Beyonce’s Twitter Feed on, use inspect element on one of her Tweets. I’m going to use her very first Tweet as an example (note: Beyonce hasn’t Tweeted in years—it’s my hope this post will change her mind….and that she’ll take one of our signature career blueprints to kick off 2016!
As you can see above, I found one of Bey’s old Tweets. Here’s what I did.
1. Right clicked and selected “Inspect”. This loaded the DevTools window. (Don’t worry if your menu looks slightly different than mine, below.)
2. Used the drop down arrow next to the “p” tag (paragraph designation in HTML) on the left hand/structural side of the DevTools window to expand the Tweet. This allowed me to
3. Select Bey’s tweet, delete her words and replace them with my own!
Note: I selected the extra stuff below the Tweet and just hit “delete” to clean things up a bit and VOILA! I didn’t stop there of course and edited a few other Bey Tweets :)
SEE HOW FUN A DEVELOPER’S TOOLS ARE?!
You just went through and used the Elements functionality of the DevTools window! Want more? Join us in one of our Career Blueprints! We’ll share TONS more cool tools and tips in class.
You can also check out Google’s detailed guide on all the inspect element tool’s capabilities.
Don’t want to stop playing? I feel you! Why not try visiting your favorite websites and getting up to a little MORE mischief like I just did????
Can you spot my huge personal accomplishments in the screenshots below?