WDI Fundamentals

WDI Fundamentals Unit 2


Introduction to HTML

In this unit, we've already covered some of the core fundamentals of web development, including how the internet works as well as how websites are structured and styled.

As you move through the next several chapters, you will be building parts of a browser-based Memory Card Game. Eventually, once all of the pieces are complete, your game will be turned in as your final assignment for WDI Fundamentals. Each chapter will introduce you to new tools and ideas, and it will be your job to figure out how to incorporate and use these tools to complete the assignment.

With your newfound knowledge from this unit, let's go ahead and create the foundation of our Memory Card Game app. The goal of this exercise is to build the primary structure of the website that will host our memory card game.

Exercise

Requirements

  • Personalize your website by displaying the name of the game in a corresponding browser tab and including the name as a header.
  • Now, let's make sure everyone knows how to play. Under your header, include a subheader titled "Instructions", and add a section explaining how the Memory Card Game is played.
Here are the steps to complete your assignment:

1) Open up Sublime Text Editor.

2) Create a new file called index.html.

3) Set up your HTML boilerplate code.

4) Add a title element so the name of the game shows in the browser tab.

5) Create level one heading tags (h1) and add in the name of the game within those tags. In this case, the you can just title it, "Memory Game".

6) Add in level two heading tags (h2) titled "Instructions".

7) Below your level two heading tags, type the following text in between paragraph (p) tags:

Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso, or Pairs, is a card game in which all of the cards are laid facedown on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.

8) Great! In order to preview your page, double-click your index.html file to open it in the browser. If you want to make changes to your page and view those updates in the browser, simply make sure your file is saved before refreshing the page in the browser.

Bonus

  • Add a subheading to describe your game. What's fun about it? Why should people play?

  • Include some personal social media links so your users can learn about the developer behind the game - you!

  • Throw some paint on your canvas! Try adding some flare to your site by using the CSS property color to spice up your headers. First, add the color "teal" to your h1 tags. Second, add the color "gold" to your h2 tags.

We'll dive deeper into adding color and other style customizations in the next unit.


Deliverable