HTML & CSS Games

Welcome back from Spring Break!

I’m fortunate to be taking Web Content Strategies & Management this semester with Dr. David Hopping. Here are some games and tools I learned about in class to help me practice my HTML and CSS knowledge. These games are helpful whether you’re just starting web development or looking to improve your skills.

Grid Garden

CSS Grid Garden Homepage

Grid Garden is a great way to practice placing items on a page using the CSS 2-dimensional grid layout. Water your carrots by moving the water placement on the grid using the grid-column-start property.

Flexbox Froggy

Flexbox Froggy Homepage

Flexbox Froggy teaches you how to justify items within a flexbox by writing CSS to move the frog to the lily pad.

CSS Diner

CSS Diner Homepage

When learning CSS, it’s essential to know how to select which specific items you want to change with your CSS code. In CSS diner, you can practice writing CSS selectors to select elements by their type.

CSS Challenges

CSS Challenges Homepage

See how far you can get in these CSS challenges! Try to copy the format shown in each example to progress.

W3 Schools

W3 Schools Homepage

For more resources on learning HTML, CSS, or other major web languages, visit W3Schools. This website has step-by-step lessons and tutorials for self-guided learning. If you get stuck on any of the previous games, W3 Schools might be able to help you figure it out.

These games and tools have helped me enjoy learning basic web development skills, I hope they help you have fun with the process too. Happy coding!