Exercise Monday

Goal: Familiarize yourselves with the usage of inline HTML elements while continuing to practice Git, indentation and spacing. Inline HTML elements are an important building block of most any website, so it's important to become comfortable with them now.

Warm up


Discuss the following with your partner:

  • What is the difference between block elements and inline elements?
  • What are 2 examples of inline elements?
  • Why is an alt attribute on an image necessary?

Code


HTML Elements Practice

Here are some exercises for you to practice using inline HTML elements. Don't forget to commit your changes and push to your remote repositories on GitHub. Continue to make sure you are using proper indentation to keep your code clean and readable!

  • Add <strong> and <em> tags to your my-first-webpage.html, like I did in the lesson.
  • Add photos of your favorite things to your favorite-things.html page. Make an img folder to hold these photos and make sure the path is correctly written on your webpage.
  • In your favorite-things.html page, add links to your favorite websites.
  • Update your cat's homepage or your dog's blog with photos, links, and <strong> and <em> tags.

Further Exploration

The "Further Exploration" section contains additional exercises and activities to explore if all other coursework for the day has been completed.

If you and your partner have completed each of today's lessons and exercises thoroughly with time to spare, below are some additional activities to get started on. Continue practicing implementing HTML elements, tracking changes with Git, correct indentation and spacing and pushing to Github.

  • Add additional pages to your animal site. This could include pages for other pets, playdate calendar, biography or 'about me' page, a contact page, or anything else you can think up!
  • Create an additional HTML website for any topic of your choosing. This could include your friend's local business, your favorite camping spot, or something dedicated to a hobby you and your partner share. Create multiple pages for the site.

Peer Code Review


Programming does not happen in a vacuum. It requires collaboration and communication. By reviewing the code of a peer, you are able to see alternative solutions to the same problems that you were tackling. You will also experience what it feels like to walk into a code base that you have not contributed to before - something that will be a regular occurrence outside of Epicodus.

At roughly 4:15pm plan to begin reviewing the code of your peers (your computer should receive a pop-up reminding you around this time). It's alright if you're not yet 100% done! This is a friendly and informal process.

Open the code from a site you've created today in Atom, and its corresponding GitHub repository in the browser. Then, go to review the code of a pair across from you. They will review yours. Look at their code and provide feedback on the following questions:

  • Is the HTML code indented and spaced properly?
  • Does each project have frequent Git commits? Are the messages descriptive, and in the proper tense?
  • Are HTML tags opened and closed properly? Are the correct tags being used for the correct purposes?
  • What was completed particularly well?

Also, ask questions. Clarify areas you may not understand. Share ideas. Offer advice and perspective. Admire and support your peers. Embrace the opportunity to support and congratulate each other on completing your first day of code school!