In this lab, you will practice the previous topics we have learned before during the yearlong!
Refreshing your memories and reviewing specifically: HTML, CSS and JS.
First things first, fork this repo(sitory) and clone it to your desktop!
- Create a file
hello.html
.
Open thehello.html
file using a browser (Like Chrome/Firefox), the page should be empty. - Make your page stand out!
To do that change it to be about a topic that you're interested in,
your page should have the following (doesn't have to be in order):
- Add/change the title of your page
- A body tag
- A paragraph inside the body
- An h1 tag inside the body
- An h2 tag inside the body.
- Add an image.
In the samehello.html
file, add an image related to the topic you wrote about. Set the width to 400px. - Add a link.
Add a link to the Wikipedia page about the animal or the topic you're interested in.
-
Use the Tag selector to change the background of your HTML page to your favorite color.
-
Use an ID selector to set a CSS property of one element on your page.
A property could be: font-size, border, color, etc... -
Use a class selector to set a CSS property of one element on your page.
- Create a new file
main.js
, and link it tohello.html
. - In
main.js
, define a new function calledchangeBackgroundColor
, that takes 1 argument ->color
- The function should change the background color of "hello.html" to "color".
- Add a "button" tag in
hello.html
with a text that says "Change BG Color".- The button has to have an
onclick
attribute, linked to thechangeBackgroundColor(color)
function. - Fill in the
color
argument whatever you like!
- The button has to have an
- Test out your button!
- Try it with different
color
values.
- Try it with different
If you have finished and still have time, first of all GOOD JOB!
- Costumize the
changeBackgroundColor
function inmain.js
to change switch between 2 colors, instead of switching to 1 specific color.- For example:
- The background is Blue.
- On 1st button click, the background will change to Yellow.
- On 2nd button click, the background will change to Blue.
- And so on... (Keeps switching between Yellow and Blue on every new click!)
- For example: