![]() ![]() 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |