/css-layouts-tutorial-exercises

Primary LanguageJavaScript

CSS Layouts Exercises

By @alesanchezr and other contributors at 4Geeks Academy

last commit build by developers build by developers

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.

You'll be learning the following concepts:

  1. Display vs Position

  2. Display: Flex property.

  3. Float property.

  4. Center Content.

  5. Sidebar Layouts.

  6. Using :before and :after.

Before we start... other related tutorials

  1. Learn HTML
  2. Learn HTML Forms
  3. Learn CSS
  4. Learn CSS Layouts← 🔥 your are here now
  5. Learn Bootstrap
Complete selection of autograded CSS exercises, anyone interested in learning CSS!

One click installation:

Open in Gitpod

Local installation

  1. 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
  1. 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.

  1. Start the tutorial/exercises by running the following command at the same level were your learn.json file is:
$ npm i jest@24.8.0 -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.

How are the exercises organized?

Each exercise is a small react application containing the following files:

  1. index.css: your CSS code goes here.
  2. index.html: your HTML code goes here.
  3. README.md: contains exercise instructions.
  4. test.js: you don't have to open this file, it contains the testing script for the exercise.

Contributors

Thanks goes to these wonderful people (emoji key):

  1. Alejandro Sanchez (alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (build-tutorial) ✅ (documentation) 📖

  2. Paolo Lucano (plucodev), contribution: (coder), (build-tests) ⚠️

This project follows the all-contributors specification. Contributions of any kind are welcome!