WDI Fundamentals Unit 3
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 where we will build our memory card game.
titleelement to give the game a unique title, which should be displayed in the browser tab.
h1element to provide a heading for the game.
fundamentals folder you created in your home directory, create a new folder called
Open up Sublime Text Editor.
Open... and select the
memory_game folder you created in the first step.
Right click on the folder in the sidebar in Sublime and select the
New File option.
This should open a new tab in Sublime that says
untitled. Save this new file called
index.html. Be sure to save it in the
In this file, set up your HTML boilerplate code.
title element so the name of the game (
Memory Card Game) shows in the browser tab.
Create level one heading tags (
h1) and add in the name of the game —
Memory Game within those tags.
Add in two anchor elements — one should read
Instructions and the other should read
Game. For now you can just use
# for the value for the
href attribute like so:
<a href="#">Anchor Text</a>
Add in level two heading tags (
h2) and add the text
Instructions within those tags.
Below your level two heading tags, type the following text in between paragraph (
Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game in which all of the cards are laid face down 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.
Great! In order to preview your page, right-click your
index.html file and select "Open in 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.
Add another 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!
We'll dive deeper into adding color and other style customizations in the next unit.