https://github.com/basedhound/css-tricks

Collection designed to enhance CSS skills and deepen understanding of core CSS concepts. It includes a variety of practical examples and best practices that cover common challenges.
https://github.com/basedhound/css-tricks

css html mediaqueries responsive

Last synced: 11 days ago
JSON representation

Collection designed to enhance CSS skills and deepen understanding of core CSS concepts. It includes a variety of practical examples and best practices that cover common challenges.

• Host: GitHub
• URL: https://github.com/basedhound/css-tricks
• Owner: basedhound
• Created: 2024-08-03T13:54:21.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-04T08:43:48.000Z (almost 2 years ago)
• Last Synced: 2025-02-22T07:48:09.479Z (over 1 year ago)
• Topics: css, html, mediaqueries, responsive
• Language: HTML
• Homepage:
• Size: 4.89 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          




      

    

  
CSS Tricks & Good Practices



##  
 📋 Table of Contents

- ✨ [Introduction](#introduction)

- ⚙️ [Tech Stack](#tech-stack)

- 🚀 [Quick Start](#quick-start)

##  
 ✨ Introduction

**[EN]** This collection is designed to enhance your CSS skills and deepen your understanding of core CSS concepts. It includes a variety of practical examples and best practices that cover common challenges and advanced techniques in CSS.

**[FR]** Cette collection est conçue pour améliorer vos compétences en CSS et approfondir votre compréhension des concepts de base du CSS. Elle inclut une variété d'exemples pratiques et de bonnes pratiques qui couvrent les défis courants et les techniques avancées en CSS.



  
Content



- **Sticky Footer**: Creating a footer that sticks to the bottom of the page regardless of content height.

- **Responsive Media Queries**: Using media queries to create responsive designs that look great on all devices.

- **Fullwidth Background Inside a Container**: Techniques to apply a fullwidth background within a constrained container.

- **Flexbox and Grid Layouts**: Modern layout methods to create flexible and efficient page structures.

- **Responsive  Gallery**: Creating a responsive image gallery using Flexbox.

- **Twitch Category Clone**: Reproducing Twitch category layout using CSS Grid.

##  
 ⚙️ Tech Stack

- **HTML** (HyperText Markup Language) is the standard markup language used for creating web pages. It provides the structure of a webpage by defining elements such as headings, paragraphs, links, images, and other content. HTML elements are represented by tags, which tell the browser how to display the content.

- **CSS** (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML. CSS controls the layout, colors, fonts, and overall visual appearance of web pages. By separating content from design, CSS enables developers to maintain and update the visual style of multiple pages efficiently.

  

## 
 🚀 Quick Start

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.