Skip to main content
Version: v1.1

✏️ 1.1.2.3 Practice: Inline Elements

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​

Ask yourself the following questions before moving on:

  • 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. It isn't required but it will give you more experience and we encourage you to do it when you are able to.

If you have completed the lessons and exercises thoroughly, 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 of yours. Create multiple pages for the site.

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.

While this is difficult we encourage you to be open to asking your peers and instructors to look at your code and being open trying to look at the code of others. Some good questions to consider when doing so would be:

  • 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 some projects!