HTMLto do it.
Thimble is a code editor that works in your browser. Code is a set of written instructions that a computer can understand. Each set of instructions is stored in a separate file. Each file can represent a separate web page, an image, or other mechanics of the web.
In the various
.html files, locate the quiz heading, prompt, and button text. You will likely find this text between
h1, h2, h3 tags.
Edit the text to match your Would You Rather Quiz prototype from Challenge 2.3
Hit the button on the top-right to make your remix live on the web!
There are two ways that we can swap images in the HTML code. Actually, there's really only one way, by changing the
img src="URL" to point to a different image on the web. BUT, Thimble allows you to save images to it's own server: your new personal, special spot on the web!
.htmlpage, find the
imgtags contain a
src="image.jpg"attribute. You can change the
image.jpgfilename to point to any image URL (or image file in the file structure).
img src=""filenames the URL for a banana image.
However, it's best to put image files right into the Thimble file structure because if the websites hosting your images ever shut down, your images will no longer appear! If you save them in the Thimble file structure, they will always be there. To add a file:
+button to the right of
FILESto upload your image file...
Did you notice that anything wasn't quite right? Yup, some of the buttons in the quiz have been mixed up or de-activated! Just like in the Pop Quiz in Challenge 2.4, the links connecting the buttons to the pages are broken!
HTML tag for links is
a and inside the tag, the
href="URL" determines which website the link will lead to. Can you figure out how the links in this quiz connect the buttons to the pages and fix the quiz?
Now that you've updated the text and images, you've got yourself a bon-a-fide Would You Rather quiz remix! (★ω★)/ Nice!!!
Let's start with a couple of simple modifications. Want to change the button colors? The page background color? The text colors? To do this, we're going to use Cascading Style Sheets, or
index.htmlfile first, then find the
style.cssstyle sheet file and click on that one next.
colorattributes are specified for
Awesome! You've coded a website using HTML and CSS!