📓1.1: Web Development

Table of Contents

Introduction to Web Development

What do web developers do? In short, they build and maintain websites.

Web developers often work for clients who are trying to get their product or service onto the web. The work is typically project-focused and involves collaborating with a team to coordinate the client’s needs into the end product. The client could be a tech company, an organization, or a government. The work could involve front-end, back-end, or full-stack web development.

Web development could be a good profession for you if you like solving logical problems, building useful things, and experimenting with new technologies. Web developers are in high demand, generally have a good work-life balance, and command comfortable salaries. Google your specific location to get a better sense of your local web development job opportunities.

Types of Web Developers

Earlier, we mentioned that web development work could be in the front end, the back end, or the full stack. What exactly do these terms mean?

image

  • The front end is the stuff you see on the website in your browser, including the presentation of content and user interface elements like the navigation bar. Front-end developers use HTML, CSS, JavaScript, and their relevant frameworks to ensure that content is presented effectively and that users have an excellent experience.

  • The back end refers to the guts of the application, which live on the server. The back end stores and serves program data to ensure that the front end has what it needs. This process can become very complicated when a website has millions of users. Back-end developers use programming languages like Java, Python, Ruby, and JavaScript to work with data.

  • Full-stack developers are comfortable working with both the front and back ends.

X-Ray Goggles Activity

🥽 X-Ray Goggles is a free tool from Mozilla that lets you remix any page that you find on the Internet. (Note: it doesn’t change the way others see the page, it only changes the way that you see it.)

To use X-ray Goggles you need to install it in your Chrome bookmarks bar. Then you can launch it on any webpage. When you launch X-ray Goggles you will be able to select images and text on a page and see the code behind your selection. X-ray Goggles will let you then alter the code to display new things on that page!

🌐 Use GOOGLE CHROME as your web browser!!! You may have to use a personal Chrome profile rather than your BWL account for this particular activity.

PART A: Introduce Developer Tools

Open any website, right click (or hold ⌃ CONTROL + click on Mac) anywhere on the page, then select View Page Source to show the code behind a website. Another thing you can do is select Inspect to open up Chrome’s Developer Tools, which includes the code behind the website PLUS some extra features that web developers may use to test/investigate code.

Feel free to check these out, but don’t worry – all the code behind websites is written in three different new languages so it may look pretty overwhelming at first.

We’ll learn how to play around with Inspect and more Dev Tools later on in the course, but for now, we’ll use something more user friendly to explore the code behind websites.

PART B: Install X-Ray Goggles

  1. Follow instructions on the page to install the X-Ray Goggles Extension in your Bookmarks Toolbar.

  2. Staying on the X-Ray Goggles website, click the Bookmark you just installed to activate it.

  3. Use X-Ray Goggles to change 🔤TEXT🔤 on the page.

    💡 HINT: Text is usually contained in HTML elements like p, h1, h2, h3, etc

  4. Use X-Ray Goggles to change 🖼️IMAGES🖼️ on the page:
    a. Go to Google Image Search and find an image you would like to use, ⌃ CONTROL + click on the image and select Copy Image Address. This gives you the URL (Uniform Resource Locator - basically an address/location on the web) of the image.

    b. Activate X-Ray Goggles, then click on the image on the page that you would like to change.

    NOTE: Some pictures might actually be a contained in a different kind of HTML element like a link, iframe, etc. so make sure you pick something that is contained in an <img> tag specifically!

    c. Look for the src=" then delete everything until the next quotation mark (the old image’s URL/address).

    d. Paste the copied image address (the new image’s source) between the quotations that follow the src=

    e. Then click Update and your image should change on the website!

PART C: Hack the News

First, discuss the definition of “hacking”: What is Hacking?

  1. Navigate to one of the following news websites: BBC, Gothamist, Vogue, Bleacher Report.

    You can try another news site if you prefer, but I’ve confirmed that these options work well with X-Ray Goggles.

    Don’t worry — you’re not actually hacking the site for others — just yourself. You’re changing a local version of the site that only you can see.

    🚨 Be careful not to reload the page or you will lose your changes!

  2. Decide on one of these fun remix themes (or one of your own)

    The year 2525: What’s on the front page of the paper in the year 2525? Are humans living on the moon yet? Have robots taken over? You decide!

    Your Birthday: Write the headlines for the day were born. Do some research to find out what happened that day. What was the weather was like? What song was most popular?

    Zombie Apocalypse: It’s the day after the zombies have risen from the dead – what is on the cover of the newspaper? Interviews with zombies? Survival tips? Ideas about what caused the spread of Zombie-ism?

  3. Activate the Goggles by clicking on your Bookmark. Now when you mouse over elements of the news page, you’ll see the code underneath.

  4. Change all of the text and swap in new images.

    Try changing the headlines and rewriting some of the stories. The more content you change, the more believable your remix will be.

  5. 📸 Take a screenshot (Mac shortcut: ⌘ COMMAND + ⇧ SHIFT + 3) and email it to me!

Coding Motivation

Learning to code is incredibly rewarding but can also be difficult and frustrating. The strongest assets you can have as a student are a desire to build, a problem-solving mind, and persistence in the face of setbacks.

The web development industry has a long history of successful developers with varying backgrounds, so people tend to care more about what you’ve actually built than how you got there.

  1. Read our course website’s Mindset & Motivation Tips page and follow along with the activities in class.
  2. Check out the post “Why Learning to Code is So Damn Hard” so you have a good idea of what the journey ahead is like.
  3. Read the Wikipedia entry on web design that describes the breadth of the web development profession.
  4. Read Udacity’s blog post on front-end, back-end and full stack developers.

Additional Resources

GitHub Account Setup

  1. Go to: GitHub Sign Up
  2. Enter your @gbwl.org school email
  3. Create a password that you’ll remember
  4. Enter a username that follows this pattern: FirstName LastInitial GradYear

    For example: KaterinaN2014

    DO NOT include your entire last name (privacy reasons)

  5. After verifying your account, let me know so I can add you to the GitHub Classroom group!

Acknowledgement

Content on this page is adapted from The Odin Project.