Unless you printed this article off on a piece of paper, it’s a safe bet that you’re reading it on a website. You probably also bank on a website, chat with friends on a website, buy socks and books on a website.
Websites aren’t going anywhere. If anything, they’re powering more and more industries in to serve their customers in more effective ways. This is probably why web development is up there with data analyst and IT management as one of the more promising careers.
There are lots of places you can learn about web development (including a sizeable offering from Career Karma), but here we’re going to talk a little bit about an unusual way of picking up this skill: reading website code.
Why Would I Want to Look at Website Code?
It may not be obvious that reading the coding of a website is a good way to learn to code. While it is true you have to spend as much time writing code as you can, don’t underestimate the power of carefully studying the code of someone else’s successful project.
Think about it with this analogy: if you want to write well, you have to spend a lot of time writing. But nobody would tell you that you shouldn’t also read great literature.
It works the same with coding. Learning how to make your code modular, to elegantly solve a particular class of problems, or to cleverly use basic techniques are all helped along by seeing someone else do it.
This is no different than studying the way your favorite author handles tricky dialogue, and it’s just as effective.
Looking at Website Code
Believe it or not, website code isn’t stored in some far away place, locked up and invisible. It’s right beneath you, so to speak, and finding it is pretty straightforward. All major browsers have some way of seeing a website’s source code, usually requiring just a couple of clicks.
Chrome, for example, gives you two ways of checking out the source code of a website. First, you can right click on the page and choose ‘inspect source’ to see the raw HTML underlying the webpage. Second, you can choose or View -> Developer -> Inspect Elements to get a dashboard which dynamically highlights elements as you scroll over them.
With Firefox you can use the CTRL + U shortcut to see a page’s source code, or use Firefox -> Web Developer -> Page Source to do the same thing.
What you see when you inspect the code of a website like Google is a bunch of this:
<html itemscope=”” itemtype=”http://schema.org/WebPage” lang=”ko-US”>
<head><meta charset=”UTF-8″><meta content=”origin” name=”referrer”><meta content=”/images/branding/googleg/1x/googleg_standard_color_128dp.png” itemprop=”image”><meta content=”origin” name=”referrer”>
<title>Google</title>…
Browsing the markup and seeing if you recognize the tags or can puzzle out what it’s doing is a great way to whet your appetite for coding. It’s usually possible to enter ‘developer’ mode, too, which will allow you to see what effect each element has on the website.
This is an amazing way to test your growing knowledge of web development. Once big websites like Google start to look straightforward, you’ll know you’re ready to start making websites professionally.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
