Let’s make three rows, four card each by setting width to 25% and height to 33.333% minus 10px from margin. * styles.css */Įach card width and height is calculated with calc() CSS function. By setting flex-wrap to wrap, flex-items wrap along multiple lines, accordingly to their size. By default, the items are set to shrink in width to fit the container. memory-game will also be a flex-container. memory-game container, it will be centered both vertically and horizontally. The box-sizing: border-box property includes padding and border values into element’s total width and height, so we can skip the math.īy setting display: flex to the body and margin: auto to the. We will use a simple but yet very useful reset, applied to all items: /* styles.css */ The set of cards will be wrapped in a section container element. The assets for this project can be downloaded at: Memory Game Repo The first one represents the card front-face and the second its back-face. memory-card, which holds two img elements. The game has 12 cards and each card consists of a container div named.

The initial template linking both css and js files. 🌹 touch index.html styles.css scripts.js Let’s start creating the files in the terminal: 🌹 mkdir memory-game If you prefer, a Portuguese translation of this tutorial can be found If you know what HTML, CSS and JS are for, it’s more than enough! You are not expected to have much prior knowledge in programming. We will discuss data-attribute, positioning, perspective, transitions, flexbox, event handling, timeouts and ternaries. This tutorial explains some basic HTML5, CSS3 and JS concepts.

Memory games flip cards