Week 1 Homework due Week 2 Saturday

Written HW

  • What is HTML, and what does it stand for?
  • What is CSS, and what does it stand for?
  • What is the purpose of HTML, and what does it do?
  • What is the purpose of CSS, and what does it do?
  • How do you create a new HTML document, and what are some of the essential tags you need to include?
  • How do you add styles to an HTML document using CSS, and what are some of the basic CSS properties you can use?
  • What is the box model in CSS, and how does it work?
  • How do you create a responsive website using CSS media queries?
  • What is the difference between inline, internal, and external CSS, and when should you use each one?
  • What are some common accessibility issues to be aware of when designing and developing websites, and how can you address them using HTML and CSS?

Answer these questions in an html file using an ordered list ol and li and style the page to your liking.

Practical Homework Assignment: Create a Clickable Button

Goal

Create a clickable button that changes color and displays a message when clicked.

Instructions

  1. Go to Codesandbox.io and create a new sandbox.
  2. Add a new HTML file called index.html to your sandbox.
  3. Inside the body element of index.html, create a button element with the text "Click Me!".
  4. Add a CSS style to the button element that sets its background color to blue and text color to white.
  5. Add a JavaScript event listener to the button element that changes the background color to green and displays the message "Button clicked!" when the button is clicked.

Requirements

  • The button should be centered horizontally on the page.
  • The button should have a minimum width of 200 pixels and a height of 50 pixels.
  • The button should have a cursor that changes to a pointer when hovered over.
  • The button should change color and display the message "Button clicked!" when clicked.
  • The HTML, CSS, and JS should be properly formatted and commented.

Tips

  • You can use the text-align property in CSS to center the button horizontally on the page.
  • You can use the cursor property in CSS to change the cursor to a pointer when hovering over the button.
  • You can use the addEventListener() method in JavaScript to add a click event listener to the button.
  • You can use the style property in JavaScript to change the button's background color and display a message.

Submission

When you're finished, copy the URL of your sandbox and submit it to your instructor.

Theoretical Homework Assignment: FizzBuzz

Goal

Write a program that prints the numbers from 1 to 100. But for multiples of three, print "Fizz" instead of the number, and for multiples of five, print "Buzz". For numbers that are multiples of both three and five, print "FizzBuzz".

Instructions

  1. Go to CodePen and create a new pen.
  2. Create a new JavaScript file by clicking on the "JS" tab at the bottom of the screen.
  3. Write a JavaScript program that prints the numbers from 1 to 100 following the rules above.
  4. Test your program by running it using the "Console" feature in CodePen.
  5. Submit your CodePen URL to your instructor.

Requirements

  • The program should print the numbers from 1 to 100.
  • For multiples of three, the program should print "Fizz" instead of the number.
  • For multiples of five, the program should print "Buzz" instead of the number.
  • For numbers that are multiples of both three and five, the program should print "FizzBuzz".
  • The program should be written in JavaScript and should be submitted as a CodePen URL.
  • The program should be properly formatted and commented.

Tips

  • You can use a loop to iterate through the numbers from 1 to 100.
  • You can use the modulus operator (%) to determine if a number is divisible by another number.
  • You can use the console.log() method to print output to the console.

Submission

When you're finished, copy the URL of your CodePen and submit it to your instructor.