Pokemon Teams Template

Posted on 16 Jan 2020

HTML Template


The template portion of a Pokemon-Teams React-app.

Project Screenshot

Click on image to enlarge

Tech Stack


HTML, CSS, SASS, JSON, jQuery, Font Awesome 5


CSS Grid, Flex


This project is the first part of a 2-part project I’m in the midst of building. The second part is to build this project in ReactJS.

I first sketched up the mockups of the app pages in Affinity Designer.

I then built the template in HTML and SASS, using the Live Sass Compiler VS Code extension to compile the SASS scripts.

This template features CSS Grid and Flex. CSS Grid is used to lay out the main components like the sidebar and main sections, and Flex is used to lay out the Team-cards.

jQuery is used to render the Team-cards and the Team-list on the sidebar. Dummy team data is stored in a JSON file and is pulled in and displayed by the Team-cards.