![]() |
|
Hi! I'm Alejandro Sanchez @alesanchezr, really excited to have you here! ๐ ๐ Learning to code is hard, you need coaching! DM me on twitter if you have any question.
-
Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a
<style>
tag or using an external stylesheet<link>
. -
Selecting HTML Elements from your website to apply the styles to.
-
Apply CSS Rules (styles) to those elements.
-
Use the most popular CSS Rules.
-
Learn the most popular CSS Tricks.
- Learn HTML
- Learn HTML5 Forms
- Learn CSSโ ๐ฅ your are here now
- Learn CSS Layouts
- Learn Bootstrap
Complete selection of autograded CSS exercises, anyone interested in learning CSS!
- Install the learnpack package manager for education and the html plugin to compile an test html exercises:
$ npm i learnpack -g
$ learnpack plugins:install learnpack-html
- Download the exercises
$ learnpack install css-tutorial-exercises-course
Note: Once you finish downloading, you will need to cd
into the exercises folder and you will find a "exercises" folder that contains all the exercises within.
- Start the tutorial/exercises by running the following command at the same level were your learn.json file is:
$ npm i [email protected] -g
$ learnpack start
Note: The exercises have automatic grading but its very rigid and strict, my recomendation is to ignore the tests and use them only as a recomendation or you can get frustrated.
Each exercise is a small react application containing the following files:
- index.html: all websites and exercises start from the index.html.
- styles.css: your CSS code goes here, some exercises will make you update this file.
- README.md: contains exercise instructions.
- test.js: you don't have to open this file, it contains the testing script for the exercise.
Thanks goes to these wonderful people (emoji key):
-
Alejandro Sanchez (alesanchezr), contribution: (coder) ๐ป (idea) ๐ค, (build-tests)
โ ๏ธ , (pull-request-review) ๐ (build-tutorial) โ (documentation) ๐ -
Paolo (plucodev), contribution: (bug reports) ๐, contribution: (coder), (translation) ๐
-
Daniel Machota (@d4rkm0nst3r), contribution: (build-tutorial) โ , Translation ๐
This project follows the all-contributors specification. Contributions of any kind are welcome!