Read on Twitter
The past month I re-taught myself CSS.
I thought I knew it after a quick overview but I was wrong.
You canât rush the basics, otherwise you have to go back anyways most of the time.
Hereâs a list below of resources I used to really grasp basic css!
I thought I knew it after a quick overview but I was wrong.
You canât rush the basics, otherwise you have to go back anyways most of the time.
Hereâs a list below of resources I used to really grasp basic css!
First was @TheOdinProject ! They have an amazing list of resources for full stack, but for css you can just stick to the web development 101 section!
https://www.theodinproject.com/courses/web-development-101">https://www.theodinproject.com/courses/w...
https://www.theodinproject.com/courses/web-development-101">https://www.theodinproject.com/courses/w...
Next is @freeCodeCamp . What they provide for free is amazing. Their responsive web design section was incredible.
If you find it as helpful as me, consider singing up for the $5 a month to support them! https://www.freecodecamp.org/ ">https://www.freecodecamp.org/">...
If you find it as helpful as me, consider singing up for the $5 a month to support them! https://www.freecodecamp.org/ ">https://www.freecodecamp.org/">...
Next are a few @css articles I found incredibly helpful. This first one is all about box-sizing and how to use it to keep your stuff contained. https://css-tricks.com/box-sizing/ ">https://css-tricks.com/box-sizin...
We always joke about not being able to center a div 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ" title="Gesicht mit FreudentrĂ€nen" aria-label="Emoji: Gesicht mit FreudentrĂ€nen">
You know what they say, always some truth behind most jokes.
Hopefully this will help you keep your sites and your mind centered https://css-tricks.com/centering-css-complete-guide/">https://css-tricks.com/centering...
You know what they say, always some truth behind most jokes.
Hopefully this will help you keep your sites and your mind centered https://css-tricks.com/centering-css-complete-guide/">https://css-tricks.com/centering...
Now weâre getting a little deeper, weâve reached flexbox!
An amazing layout tool, one that took me forever to figure out.
I still use this on a regular basis anytime Iâm styling a site or project. https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/...
An amazing layout tool, one that took me forever to figure out.
I still use this on a regular basis anytime Iâm styling a site or project. https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/...
Another fun flexbox tool, which has helped me figure out the concepts in a fun way is this game from @playcodepip https://abs.twimg.com/emoji/v2/... draggable="false" alt="đž" title="Froschgesicht" aria-label="Emoji: Froschgesicht"> ! https://flexboxfroggy.com/ ">https://flexboxfroggy.com/">...
Now to the big deal, grid https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ€Ż" title="Explodierender Kopf" aria-label="Emoji: Explodierender Kopf">. Grid is one that still can throw me through a loop, but itâs amazing for photo layouts and odd designs! This resource from @css is amazing. https://css-tricks.com/snippets/css/complete-guide-grid/">https://css-tricks.com/snippets/...
Another fun game from @playcodepip to help you understand grid in a less stressful way here! http://cssgridgarden.com/ ">https://cssgridgarden.com/">...
I hope you find these resources as helpful as I did!
Remember that you can do this, even when it doesnât seem possible.
Celebrate the little victories and keep pushing forward, you got this!!!
Let me know if thereâs any resources you used to help others that I missed!!
Remember that you can do this, even when it doesnât seem possible.
Celebrate the little victories and keep pushing forward, you got this!!!
Let me know if thereâs any resources you used to help others that I missed!!
Oo and not directly css related but really helped with responsive design was @ResponsivelyApp !!
View multiple different layouts at once!
Free and open source software thatâs incredible! https://responsively.app"> https://responsively.app
View multiple different layouts at once!
Free and open source software thatâs incredible! https://responsively.app"> https://responsively.app
Hope this helps some of the #100DaysOfCode community as well.
Quality resources should be shared often and as far reaching as possible!
Quality resources should be shared often and as far reaching as possible!
