JavaScript Tutorial - Create a Card Game
Offered By: freeCodeCamp
Course Description
Overview
Enhance your JavaScript skills by creating a basic card game with HTML and CSS in this comprehensive tutorial. Learn to develop dynamic user-interactive code using vanilla JavaScript, implement animation effects, and design responsive layouts using CSS grid, FlexBox, and media queries. Explore techniques for randomizing card positions in a CSS grid, utilize localStorage functionality, and much more. Follow along as you build a complete card game from scratch, covering topics such as creating cards dynamically, initializing card positions, implementing game logic for shuffling and dealing cards, and adding interactive features like card flipping and selection. Dive into styling and layout techniques, including responsive design principles, to create a polished and professional-looking game. By the end of this 1-2 hour tutorial, you'll have gained practical experience in combining JavaScript, HTML, and CSS to create an engaging and interactive web-based card game.
Syllabus
⌨️ Introduction
⌨️ Getting Started
⌨️ Live Server Extension
⌨️ Create Cards - HTML
⌨️ Create the Game Play Grid
⌨️ Create Cards Dynamically - JS Code
⌨️ Initialise Card Positions
⌨️ Load Game and Start Game
⌨️ Stack Cards
⌨️ Flip Cards
⌨️ Shuffle Cards
⌨️ Deal Cards
⌨️ Choose Card
⌨️ Styling and Layout
⌨️ Animation
⌨️ Responsive Layout
⌨️ Local Storage
Taught by
freeCodeCamp.org
Related Courses
Mobile Web DevelopmentGoogle via Udacity iDESWEB, Introducción al desarrollo web
Miríadax Information Design
University of California, San Diego via Coursera Advanced Styling with Responsive Design
University of Michigan via Coursera Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera