FrontEnd Review - HTML, CSS, JS

Objective:

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.

HTML Section

1. Create a file hello.html.
   Open the hello.html file using a browser (Like Chrome/Firefox), the page should be empty.
   
   
2. 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.
  
  

3. Add an image.
   In the same hello.html file, add an image related to the topic you wrote about. Set the width to 400px.
   
   
4. Add a link.
   Add a link to the Wikipedia page about the animal or the topic you're interested in.
   
   

CSS Section

1. Use the Tag selector to change the background of your HTML page to your favorite color.
   

2. Use an ID selector to set a CSS property of one element on your page.
   A property could be: font-size, border, color, etc...
   

3. Use a class selector to set a CSS property of one element on your page.
   

Javascript Section

1. Create a new file main.js , and link it to hello.html.
2. In main.js, define a new function called changeBackgroundColor, that takes 1 argument -> color
   • The function should change the background color of "hello.html" to "color".
3. 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 the changeBackgroundColor(color) function.
   • Fill in the color argument whatever you like!
4. Test out your button!
   • Try it with different color values.

If you have extra time, continue to the Bonus Problems below. If not, make sure you submit your code here.

Bonus Problems:

If you have finished and still have time, first of all GOOD JOB!

1. Costumize the changeBackgroundColor function in main.js to change switch between 2 colors, instead of switching to 1 specific color.
   • For example:
     1. The background is Blue.
     2. On 1st button click, the background will change to Yellow.
     3. On 2nd button click, the background will change to Blue.
     4. And so on... (Keeps switching between Yellow and Blue on every new click!)

make sure you submit your code here.