Learn CSS Grid by building a Pokémon card!

Name: Learn CSS Grid by building a Pokémon card!
Rating: 4.9 (8 reviews)

Learning a new tech is good. Building something with new tech is AWESOME!

Created byAustin Lovell

Last updated 1/2020

English

English [Auto],

What you'll learn

HTML
CSS Grid
Page Layout
Responsive Design

Course content

3 sections • 18 lectures • 1h 6m total length

Introduction1:15
Environment Setup - VS Code, SASS and Live Share1:30
Lets setup your environment so are ready to hit the ground running when we start writing some HTML and CSS!

Setup index.html1:43
Set up the project by creating a new folder for the pokemon card, generating an index.html with HTML scaffolding, and adding an h1 hello world to preview the page.
Enable Live Server1:03
Enable SASS2:50
Core Style Overrides2:40
Card Shaping2:28
Learn to shape a pokemon card with CSS grid by setting width to 450px and height to 672px, adding border radius, overflow hidden, and a shadow.
Title Row8:33
Design a Pokémon card layout using css grid, featuring a title row with rarity, name, health, and type. Configure grid areas, columns, and rows for precise alignment and styling.
Title Row Continued2:51
Learn to style a Pokémon card using CSS grid by adjusting the title row margins and adding a reusable icon element for a fire symbol, including image resource setup.
Character Image3:50
Character Meta2:43
Build and style the character meta section of a pokemon card using CSS grid, applying a yellow background, 25px height, and bold italic center-aligned text in a paragraph.
Character Ability10:06
Learn to build a Pokémon card UI with CSS grid, displaying character abilities, including ability name, description, cost, damage, and icons.
Character Stats4:45
Character Description3:34
Character Details6:57
Here is the dot you need for this lesson, ⬤ . Just copy and paste this in.
Card Background4:10
Apply a background image to the Pokemon card, position it behind with absolute positioning, set its size to cover, and use hue-rotate to simulate type colors.

Requirements

None! Well, you probably should have a computer. =)

Description

In this course I will be teaching you how to use CSS Grid to build a Pokémon card from scratch. I believe that building something fun is the fastest way to learn anything new, so why not a Pokémon card? Prior knowledge of CSS is not required. In fact, CSS Grid is so awesome it should be one of the first things you learn!

In my career I started off learning CSS by using tables, then floats, then flex and now grid. Its been fun seeing the evolvement of CSS through out my career. There are a lot of cool design libraries coming out that help reduce the need to know CSS at its foundation. These libraries are great and help get a product off the ground quickly but what happens when you need to design something custom a unique to your product? This is where knowing CSS from its core will help.

By the end of this course I hope you love CSS as much as I do. The ability create something from the ground up is very satisfying. Thank you for taking the time to check out my course on learning CSS Grid by building a Pokémon card!

Cheers!

Austin

Who this course is for:

Beginner and Advance web developers. CSS Grid is new and everyone should know how to use it.

Learn CSS Grid by building a Pokémon card!

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 3min

Draw Before Coding2 lectures • 6min

Coding14 lectures • 58min

Requirements

Description

Who this course is for: