https://github.com/rchillard/css.city

Website to illustrate a world of CSS possibilities :city_sunset:
https://github.com/rchillard/css.city

css teaching-website

Last synced: 17 days ago
JSON representation

Website to illustrate a world of CSS possibilities :city_sunset:

• Host: GitHub
• URL: https://github.com/rchillard/css.city
• Owner: rchillard
• Created: 2019-08-23T04:34:34.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-10-16T09:59:32.000Z (29 days ago)
• Last Synced: 2024-10-18T07:53:34.056Z (27 days ago)
• Topics: css, teaching-website
• Language: HTML
• Homepage: https://css.city
• Size: 2.51 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS.City

Website for illustrating the world of CSS possibilities. This site builds on [HTML.Haus](https://html.haus/), which will teach you HTML. Start there if you haven't learned HTML yet. If HTML is the haus ('house') or structure of webpages, then CSS is the paint, the lights, the trim, the style for houses, which makes the beautiful city that is the web possible.

I recently returned to the world of web development, and I've been delighted to learn how far CSS has come, especially in light of modern UI development frameworks which support _all sorts of strategies_ for styling components. [CSS.City](https://css.city/) is an introduction to CSS, a reference for common CSS strategies, CSS styles to get you started, and a guide on the various CSS approaches in modern web development.

## Sections

### Learn

Tutorials that take you through the basics of CSS:

- Introduction

- Selectors

- Colors

- Typography

- Units

- Positioning

- Box Model

- Layout

- Specificity

### Practice

- Building Memory

- Experimenting on the Playground

- Playing Games

### Reference

- Attributes

#### Strategies

- Stylesheets

- Inline styling

- CSS-in-JS

- CSS Modules

- Styled-components

#### Templates

- Font families

- Water.css

### Tools

- Specificity Calculator

- Minifier

## Cities

The following cities have been or will be implemented in a [CSS Zen Garden](http://www.csszengarden.com/) style way.  These are organized by continent to try and accomplish distribution:

Africa

- [ ] Cairo

- [ ] Dar es Salaam

- [ ] Johannesburg

- [ ] Khartoum

- [ ] Kinshasa

- [ ] Lagos

Asia

- [ ] Bangkok

- [ ] Beijing

- [ ] Delhi

- [ ] Dhaka

- [ ] Hong Kong

- [ ] Jakarta

- [ ] Karachi

- [ ] Mumbai

- [ ] Osaka

- [ ] Seoul

- [ ] Shanghai

- [ ] Singapore

- [ ] Tokyo

  

Europe

- [ ] Berlin

- [ ] London

- [ ] Madrid

- [ ] Moscow

- [ ] Paris

- [ ] Rome

Middle East

- [ ] Amman

- [ ] Baghdad

- [ ] Dubai

- [ ] Istanbul

- [ ] Tehran

- [ ] Tel Aviv

- [ ] Riyadh

North America

- [ ] Los Angeles 

- [ ] Mexico City

- [ ] New York

- [ ] Toronto

South America

- [ ] Buenos Aires

- [ ] Lima

- [ ] Rio de Janeiro

- [ ] Santiago

- [ ] Sao Paulo