https://github.com/basedhound/twitch-grid_css
Clone of the Twitch categories grid, built using only CSS Grid. This design replicates the layout of Twitch's category sections with a responsive and visually appealing grid system.
https://github.com/basedhound/twitch-grid_css
css design grid html responsive
Last synced: 10 months ago
JSON representation
Clone of the Twitch categories grid, built using only CSS Grid. This design replicates the layout of Twitch's category sections with a responsive and visually appealing grid system.
- Host: GitHub
- URL: https://github.com/basedhound/twitch-grid_css
- Owner: basedhound
- Created: 2024-02-09T07:59:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-06T05:05:05.000Z (almost 2 years ago)
- Last Synced: 2025-02-22T07:46:17.848Z (over 1 year ago)
- Topics: css, design, grid, html, responsive
- Language: HTML
- Homepage: https://twitch-grid-fv.netlify.app
- Size: 1010 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Twitch Grid
##
đź“‹ Table of Contents
- ✨ [Introduction](#introduction)
- ⚙️ [Tech Stack](#tech-stack)
- 🚀 [Quick Start](#quick-start)
**[EN]** Clone of the Twitch categories grid, built using only CSS Grid. This design replicates the layout of Twitch's category sections with a responsive and visually appealing grid system, showcasing how CSS Grid can be used to create complex, modern layouts with ease.
**[FR]** Clone de la grille des catégories de Twitch, réalisé uniquement avec CSS Grid. Ce design reproduit la disposition des sections de catégories de Twitch avec un système de grille réactif et visuellement attrayant, illustrant comment CSS Grid peut être utilisé pour créer des mises en page modernes et complexes avec aisance.
- **HTML** (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It provides the basic building blocks for web pages, defining elements such as headings, paragraphs, images, links, and more. HTML forms the backbone of any web document and is essential for web development.
- **CSS** (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of web pages. It allows developers to apply styles such as colors, fonts, spacing, and positioning to HTML elements. CSS enhances the visual appeal and user experience of a website by enabling the separation of content and design.
- **CSS Grid** is a powerful layout system in CSS that enables the creation of complex and responsive grid-based layouts. It allows developers to design web pages using a grid structure, defining rows and columns to place and align content precisely. CSS Grid provides a flexible and efficient way to manage the layout of elements, making it easier to build sophisticated and responsive designs with consistent alignment and spacing.
- **Responsive Design** refers to a web design approach that ensures a website or application adjusts seamlessly to various screen sizes and device types. It involves using flexible layouts, images, and media queries to create a fluid and adaptable user experience. Responsive design aims to provide optimal viewing and interaction by dynamically adjusting the content and layout based on the device's screen size, orientation, and resolution.
- **Media Queries** are a feature of CSS that allows developers to apply different styles based on the characteristics of the device or viewport, such as screen size, resolution, or orientation. Media queries enable conditional CSS rules, which help in creating responsive designs by targeting specific device features. This ensures that web content is presented in an optimal way across various devices, from large desktop monitors to small mobile screens.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone {git remote URL}
```
**Running the Project**
Use [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
to launch a development local server with live reload feature for static & dynamic pages.****