In this tutorial we will tackle creating one of my favourite Brain Games, Card Match.

Type these lines into Atom and save them as index.html in a new folder, project_4:

index.html
<html>
<head>
<title>Card Match</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
  <div id='row1'>
    <img src='cards/1.png' id='0' class='card'>
    <img src='cards/2.png' id='1' class='card'>
    <img src='cards/3.png' id='2' class='card'>
    <img src='cards/4.png' id='3' class='card'>
    <img src='cards/5.png' id='4' class='card'>
    <img src='cards/back.png' class='card'>
  </div>
</body>
</html>

And this one too ...

styles.css
#row1 {
  display:flex;
  width:98vmin;
  justify-content:space-around;
}
.card {
  height:20vmin;
}