Try   HackMD

ONLINE RESOURCES To Learn CSS

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
CHEAT SHEET

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)
https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/

CSS GRID GENERATOR
https://cssgrid-generator.netlify.com/

USEFUL CSS SNIPPETS
https://30-seconds.github.io/30-seconds-of-css/

CSS Snippets" + " | CSS-Tricks
https://css-tricks.com/snippets/

HTML & CSS Cheatsheet (PDF included)
https://ilovecoding.org/blog/htmlcss-cheatsheet

CSS selectors cheatsheet & details – Design & Code Repository
https://medium.com/design-code-repository/css-selectors-cheatsheet-details-9593bc204e3f

CSS Reference - A free visual guide to CSS
https://cssreference.io/

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
FREE

  1. Learn CSS in this free 6-hour video course
    https://www.freecodecamp.org/news/learn-css-in-this-free-6-hour-video-course/

  2. CSS Crash Course for Absolute Beginners - Full Course
    https://youtu.be/KN6oBEOz2ZI

  3. The CSS Handbook: a handy guide to CSS for developers
    https://www.freecodecamp.org/news/the-css-handbook-a-handy-guide-to-css-for-developers-b56695917d11/

  4. CSS in A Nutshell
    https://webgems.io/css/

  5. Easily Create Responsive Websites with the Foundation Framework
    https://www.freecodecamp.org/news/foundation-crash-course/

  6. The 30 CSS Selectors You Must Memorize
    https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

  7. HTML and CSS | The Odin Project
    https://www.theodinproject.com/courses/html5-and-css3

  8. The impossible CSS layout: Grid? Flexbox? Floats? Columns? JS!
    https://kutt.it/NNcWJI

  9. Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
    Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
    https://watercss.netlify.com/

  10. Can I use… Support tables for HTML5, CSS3, etc
    https://caniuse.com/#feat=css-sticky

  11. QUIZ: Well aimed? How well do you know CSS selectors?
    https://codepen.io/pehaa/pen/ROapJZ

  12. How to use CSS position to layout a website (with example code)
    https://coder-coder.com/css-position-layout/

  13. Menu Animation With CSS Transition
    https://codepen.io/moniet/pen/QWLqEEz?editors=0110

  14. Programming Foundations with JavaScript, HTML and CSS
    https://www.coursera.org/learn/duke-programming-web

  15. Learn HTML & CSS Correctly
    https://ilovecoding.org/courses/htmlcss2

  16. Learn CSS Grid
    https://scrimba.com/g/gR8PTE

  17. CSS Diner - Where we feast on CSS Selectors!
    https://flukeout.github.io/

  18. The main differences between Flexbox and CSS Grid
    https://medium.freecodecamp.org/the-main-differences-between-flexbox-and-css-grid-667c03461d2b

  19. Bulma: Free, open source, & modern CSS framework based on Flexbox
    https://bulma.io/

  20. Vocab Quiz
    using Bulma — CSS Framework
    https://wonderful-booth-06933f.netlify.com/

  21. Conquer Free Website Template | Free CSS Templates
    https://www.free-css.com/free-css-templates/page196/conquer

  22. CSS Animation - The Pulse Effect
    https://www.florin-pop.com/blog/2019/03/css-pulse-effect/

  23. If you've ever been curious about using CSS Grid to build intricate graphic layouts like this one 👇 but don't know where to start, my @smashingconf (Twitter) Toronto talk is for you.
    Hope to see you there!
    https://t.co/cFrFJVCiva

Grid Experiment No. 7
https://codepen.io/julesforrest/full/VqXvgQ

  1. CSS Magic
    https://glitch.com/@glitch/css-magic

  2. CSS NOTES for Professionals: Hints & Tricks
    https://books.goalkicker.com/CSSBook/

  3. Centering in CSS: A Complete Guide
    https://css-tricks.com/centering-css-complete-guide/

  4. A Smarter Way to Learn HTML & CSS - Index of Exercises
    http://www.asmarterwaytolearn.com/htmlcss/index-of-exercises.html

  5. Sass is basically a way to make CSS more manageable on bigger websites.
    https://www.creativebloq.com/web-design/what-is-sass-111517618

  6. MarkSheet: a short HTML and CSS tutorial
    https://marksheet.io/

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
TOOL

The W3C CSS Validation Service
https://jigsaw.w3.org/css-validator/

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
PROJECT

Here's a fun project to build: How to use a little CSS Grid magic to design a calculator app
https://medium.freecodecamp.org/how-to-use-a-little-css-grid-magic-to-design-a-calculator-app-e162afb2fdb4

Pure CSS Moustached Nanny
https://codepen.io/miocene/pen/mjLPVp

Wall of Panels
(Animated Landing Page with Sound Effect)
HTML, CSS, JavaScript
https://code.sololearn.com/Wen965eIRDOU/?ref=app

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
GAME

Flexbox Zombies | CSS GAME
Master Flexbox Layout: A Story Course
https://mastery.games/p/flexbox-zombies

Learning CSS Through Games
● http://flexboxfroggy.com/
● https://cssgridgarden.com/

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
PAID

  1. Web Design for Beginners: Real World Coding in HTML & CSS | Udemy
    https://www.udemy.com/course/web-design-for-beginners-real-world-coding-in-html-css/
Last changed by 
 
Digital Inovatif
0
939
Published on HackMD