https://github.com/ujblockchain/css

CSS tutorial series - UJ Blockchain
https://github.com/ujblockchain/css

css3 visual-studio-code vscode

Last synced: about 1 month ago
JSON representation

CSS tutorial series - UJ Blockchain

• Host: GitHub
• URL: https://github.com/ujblockchain/css
• Owner: ujblockchain
• License: mit
• Created: 2024-01-19T13:58:00.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-05T08:11:53.000Z (11 months ago)
• Last Synced: 2024-02-05T09:29:07.130Z (11 months ago)
• Topics: css3, visual-studio-code, vscode
• Language: HTML
• Homepage: https://blockchain.uj.ac..za
• Size: 74.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![image info](https://blockchain.uj.ac.za/static/images/main-logo.png)

# SARChI - Complete CSS Tutorial for Beginner

South Africa-Switzerland Bilateral Research Chair in Blockchain Technology aims to explore blockchain integrations with real-world applications and development in Agric-food.

## Structure

The tutorial is divided into several folders, each focusing on a specific topic:

1. [01_Intro_to_CSS](01_Intro_to_CSS/index.html): Introduction to CSS

2. [02_units_and_sizes](02_units_and_sizes/index.html): Understanding units and sizes in CSS

3. [03_borders_and_shadows](03_borders_and_shadows/index.html): Working with borders and shadows

4. [04_float_and_clear](04_float_and_clear/index.html): Understanding the float and clear properties

5. [05_overflow_&_zIndex](05_overflow_&_zIndex/index.html): Working with overflow and z-index

6. [06_display_property](06_display_property/index.html): Understanding the display property

7. [07_height_and_width](07_height_and_width/index.html): Working with height and width

8. [08_grid_layout](08_grid_layout/index.html): Understanding grid layouts

9. [09_centering_element_horizontally_and_vertically](09_centering_element_horizontally_and_vertically/index.html): Centering elements horizontally and vertically

10. [10_images](10_images/index.html): Working with images

11. [11_flex_layout](11_flex_layout/index.html): Understanding flex layouts

12. [12_transform_and_transition](12_transform_and_transition/index.html): Working with transforms and transitions

13. [13_media_queries_and_inspect_element](13_media_queries_and_inspect_element/index.html): Understanding media queries and inspect element

14. [14_variables](14_variables/index.html): Working with variables

15. [15_functions](15_functions/index.html): Understanding functions

16. [16_animation](16_animation/index.html): Working with animations

17. [17_html_css_project](17_html_css_project/index.html): Final project to apply what you've learned

## Usage

To use this tutorial, simply clone the repository and open the `index.html` file in each folder in your web browser. You can modify the HTML and CSS files as you go through the tutorial to experiment and learn.

## Video Tutorials

For those who prefer to learn by watching videos, we have created a YouTube playlist that covers the same topics as these tutorials. You can access the playlist [here](https://www.youtube.com/playlist?list=PLYAUzWboAWPjMefw3x970oGhjYv8njMM2).