Skip to content

Instantly share code, notes, and snippets.

@JohnReeves JohnReeves/website_xray_goggles.md Secret

Last active Apr 9, 2019
Embed
What would you like to do?
making websites - step 1 getting used to websites

1. Introduction

We're going to use a neat web tool called Xray Goggles to enable us to change other peoples websites into our own!

Octocat

2. Installing Xray Goggles

As Xray Goggles is a web app, we can install it on any web browser (although it works best on something like Google Chrome, or Mozilla Firefox).

Visit this webpage (right click to open in a new tab) - https://webmaker.org/en-US/goggles/install - and drag the yellow "install Xray Goggles" into your favourites or bookmark bar.

ImgurImgur

3. Visit Webpage

Next, we're going to visit a template website, so we can edit it for our own!

Visit this (right click to open in a new tab) - http://www.shegy.nazwa.pl/materialupmarket/mdlp/index_light.html

Before enabling Xray Goggles, you want to change the background colour to one that you want by clicking the little cog on the left.

Imgur

4. Editing!

Now we can enable Xray goggles and get to editing your webpage! Click on the link in your favourites bar to enable (it might take a few seconds to do).

Now when you hover over things, it should give you a box around each element and tell you what HTML thing it is.

E.g. Can you see the H2 word for the big title text?

Imgur

If you click on it, you can then change it. However you must only change the things inside the tags e.g.

<h2>Put text here</h2>

Imgur

5. Images

Changing the images is super easy, we can do that by Googling for an image. Selecting which image we want to use, and clicking View Image. That should open only the image in a webpage, you can then copy the URL at the top in the address bar.

Imgur

We can then paste that image url into the src="" attribute, inside the quotes (removing whatever was there before!)

Imgur

6. Finishing

Keep scrolling down the website, make sure you add many of the things that we came up with in the project ideas mindmap!

Finally, can you tell me what the following actually do:

  1. What is a <h2> tag, where is it used?
  2. What is a <p> tag, where is it used?
  3. What is a <img> tag, and what attribute do you need to change to change the picture?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.