By @alesanchezr and other contributors at 4Geeks Academy
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.
-
Display vs Position
-
Display: Flex property.
-
Float property.
-
Center Content.
-
Sidebar Layouts.
-
Using
:before
and:after
.
- Learn HTML
- Learn HTML Forms
- Learn CSS
- Learn CSS Layoutsโ ๐ฅ your are here now
- Learn Bootstrap
- Install learnpack, the package manager for learning tutorials and the html compiler plugin for learnpack, make sure you also have node.js 14+:
$ npm i learnpack -g
$ learnpack plugins:install learnpack-html
- Download this particular exercises using learnpack and
cd
into the folder:
$ learnpack download css-layouts-tutorial-exercises
$ cd css-layouts-tutorial-exercises
Note: Once you finish downloading, 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 string, 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.css: your CSS code goes here.
- index.html: your HTML code goes here.
- 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 Lucano (plucodev), contribution: (coder), (build-tests)
โ ๏ธ
This project follows the all-contributors specification. Contributions of any kind are welcome!