We're going to use a neat web tool called Xray Goggles to enable us to change other peoples websites into our own!
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.
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.
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?
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>
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.
We can then paste that image url into the src="" attribute, inside the quotes (removing whatever was there before!)
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:
- What is a
<h2>tag, where is it used? - What is a
<p>tag, where is it used? - What is a
<img>tag, and what attribute do you need to change to change the picture?