Dev Tools 🛠

Web Developer 👩‍💻 "Cheat Codes"

Ok, now that we know about our browser, our client, and a bit about the web... 🎶let's get it started in here! In order for use to make it into the spotlight quickly, let's find a super popular website.

1. Click here to open JMU's website in a new browser tab.
2. Find a nice prominent place that we could put... YOUR NAME!
3. Right-click on that text

   

4. In the context menu that pops up when you right-click, choose Inspect Element

   1. Hang in there! 😺

      There's about to be a lot of code on your screen. Don't worry 😅, this is what we are looking for. Let's figure it out together.🤝

5. 

   Now you see it 👀

   You should now see something like this... It's so much Code! 😱🤯
6. 

   🔍 Let's take a closer look 🔬

   We don't need to worry about all that code just yet, for now, let's just see that it does say Admissions, and that's what we're looking for.
7. Now, simply double-click on Admissions
8. Type your name
9. Press Enter or Return
10. Observe 👀, you're on the front page of JMU's website! 🏆 🤩

Colors

There are soooo many colors to choose from on the web 🌈. No really, the monitor you're using could support displaying over 1 BILLION! How can we tell the computer what color we want to use? 🎨 I don't know 1,000,000,000 different color names. Do you?

Subpixels

There are a few color systems that web pages can use. Some of these systems rely on telling the computer to mix three different colors of light. The subpixels of modern display technologies are red, green, and blue, or RGB.

Color names

One way to specify smoe colors is with a simple color name in English, like red

red, green, blue

To specify an "RGB" color value, we have to decide how much of each color to mix in. The least of any of the three colors we can ask for is 0. The most is 255. In this system, the color black is rgb(0,0,0) (0 red, 0 green, and 0 blue).

Hexadecimal

This color specification system is very similar to RGB, in that we decide how much of each of the 3 colors (red, green, and blue) we would like to mix, but we specify how much or how little using hexadecimal

Colors Activity

Since you already made yourself famous (above), let's now give your name some color!

1. Choose a color that you like. Let's have our first one be from the Color names list (e.g. I like maroon).
2. Right-click on your name
3. In the context menu that pops up when you right-click, choose Inspect Element
4. This time, we want to look at a different part of the DevTools.

   

5. Click on this color and then type in the color you like
6. Press Enter or Returnon your keyboard.
7. Observe 👀, your color in action! 🎬📣

Images

Most websites use images to illustrate their text, or simply to entertain. You will have noticed by now that JMU's site includes a large image when you load it.

Did you notice the the JMU Wordmark is actually an image also?

While there are several kinds of images, those that work well in the web (esp. jpg, gif, png, and svg), are often all written in to the web page in one of two ways. For now, let's just focus on one of these: the <img> tag.

Images Activity

Let's find a goofy picture and sneak it into JMU's website.

1. Search the web for an appropriate image. There's so many places you can try.
   1. Wikimedia Commons
   2. Google Image Search
   3. Catalog of other image sources
   4. For this example, I'll use https://upload.wikimedia.org/wikipedia/en/thumb/a/a6/Goofy.svg/323px-Goofy.svg.png
2. once you find an image you like, you need to copy its URL.
   1. Right-click on the image and select Copy Image Location
3. Right-click on the HUGE image on JMU's front page
4. In the context menu that pops up when you right-click, choose Inspect Element.
   1. You should see that part of the <img> tag has a src attribute (it says src="...").
5. Double-click on the text inside the quotes.
6. add the URL that you found for the goofy image (perhaps by pasting what you copied earlier?)
7. Press Enter or Returnon your keyboard.
8. Observe 👀, your goofy image! 🎬📣

Going Further

So what exactly is all this code we've been editing small parts of? The next video from the Khan Academy Into to HTML for Hour of Code starts to dig into HTML.

The Khan Academy Into to HTML for Hour of Code also has a few more activities you may enjoy.

Starting from "scratch"

How would you like to continue your work so far by building your very own site from scratch?

1. First Download a few starter files. You can pick either of the following.
   • Basic Starter Files
   • Advanced Starter Files
2. Next, you will have to unzip these files.
3. Launch Visual Studio Code to edit these files.
4. Go to the File menu and choose Open Folder
5. Select the folder containing the files you unzipped.
6. Begin building! What do you mean what should you build?! You can build whatever you want! Perhaps you would enjoy:
   • Creating multiple pages and having links between them?
   • Using interesting color choices to make a delightfully colorful textual site?
   • Collecting funny animal pictures and creating a gallery?

Getting more help

• Mozilla's Learn Web Development
  • Mozilla's Introduction to HTML
  • Mozilla's CSS First Steps