You want to learn HTML & CSS but don& #39;t know where to get started?

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">

Choose a Code Editor:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="💻" title="Computer" aria-label="Emoji: Computer"> Visual Studio Code [VS Code]
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💻" title="Computer" aria-label="Emoji: Computer"> Sublime Text
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💻" title="Computer" aria-label="Emoji: Computer"> Atom
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💻" title="Computer" aria-label="Emoji: Computer"> Brackets
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💻" title="Computer" aria-label="Emoji: Computer"> Vim

Learning Platforms:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📌" title="Reißzwecke" aria-label="Emoji: Reißzwecke"> http://freecodecamp.org"> http://freecodecamp.org 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📌" title="Reißzwecke" aria-label="Emoji: Reißzwecke"> http://sololearn.com"> http://sololearn.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📌" title="Reißzwecke" aria-label="Emoji: Reißzwecke"> http://developer.mozilla.org"> http://developer.mozilla.org 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📌" title="Reißzwecke" aria-label="Emoji: Reißzwecke"> http://w3schools.com"> http://w3schools.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📌" title="Reißzwecke" aria-label="Emoji: Reißzwecke"> http://hkhanacademy.org"> http://hkhanacademy.org 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📌" title="Reißzwecke" aria-label="Emoji: Reißzwecke"> http://codecademy.com"> http://codecademy.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📌" title="Reißzwecke" aria-label="Emoji: Reißzwecke"> http://frontendmentor.io"> http://frontendmentor.io 

Books:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📚" title="Bücher" aria-label="Emoji: Bücher"> HTML and CSS: Design and Build Websites, by Jon Duckett
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📚" title="Bücher" aria-label="Emoji: Bücher"> Web designing books by Nick Pettit
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📚" title="Bücher" aria-label="Emoji: Bücher"> The Essential Guide to CSS and HTML Web Design, by Craig Grannell
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📚" title="Bücher" aria-label="Emoji: Bücher"> Smashing CSS, by Eric Meyer
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📚" title="Bücher" aria-label="Emoji: Bücher"> HTML5 and CSS3 All-in-One Book For Dummies, by Andy Harris

YouTube Channels:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="▶️" title="Nach rechts zeigendes Dreieck" aria-label="Emoji: Nach rechts zeigendes Dreieck"> Traversy Media
https://abs.twimg.com/emoji/v2/... draggable="false" alt="▶️" title="Nach rechts zeigendes Dreieck" aria-label="Emoji: Nach rechts zeigendes Dreieck"> freeCodeCamp
https://abs.twimg.com/emoji/v2/... draggable="false" alt="▶️" title="Nach rechts zeigendes Dreieck" aria-label="Emoji: Nach rechts zeigendes Dreieck"> DesignCourse
https://abs.twimg.com/emoji/v2/... draggable="false" alt="▶️" title="Nach rechts zeigendes Dreieck" aria-label="Emoji: Nach rechts zeigendes Dreieck"> The Net Ninja
https://abs.twimg.com/emoji/v2/... draggable="false" alt="▶️" title="Nach rechts zeigendes Dreieck" aria-label="Emoji: Nach rechts zeigendes Dreieck"> Dani Krossing
https://abs.twimg.com/emoji/v2/... draggable="false" alt="▶️" title="Nach rechts zeigendes Dreieck" aria-label="Emoji: Nach rechts zeigendes Dreieck"> Web Dev Simplified
https://abs.twimg.com/emoji/v2/... draggable="false" alt="▶️" title="Nach rechts zeigendes Dreieck" aria-label="Emoji: Nach rechts zeigendes Dreieck"> Florin Pop

Newsletters:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✉️" title="Briefumschlag" aria-label="Emoji: Briefumschlag"> Accessibility Weekly
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✉️" title="Briefumschlag" aria-label="Emoji: Briefumschlag"> CSS Weekly
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✉️" title="Briefumschlag" aria-label="Emoji: Briefumschlag"> Responsive Design Weekly
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✉️" title="Briefumschlag" aria-label="Emoji: Briefumschlag"> Frontend Focus

Learn CSS by playing games:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎮" title="Videospiel" aria-label="Emoji: Videospiel"> CSS Diner
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎮" title="Videospiel" aria-label="Emoji: Videospiel"> Flexbox Zombies
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎮" title="Videospiel" aria-label="Emoji: Videospiel"> Grid Garden
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎮" title="Videospiel" aria-label="Emoji: Videospiel"> Flexbox Defense
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎮" title="Videospiel" aria-label="Emoji: Videospiel"> Flexbox Froggy
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎮" title="Videospiel" aria-label="Emoji: Videospiel"> CSS Battle

Docs:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📜" title="Schriftrolle" aria-label="Emoji: Schriftrolle"> http://cssreference.io"> http://cssreference.io 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📜" title="Schriftrolle" aria-label="Emoji: Schriftrolle"> http://cssvalues.com"> http://cssvalues.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📜" title="Schriftrolle" aria-label="Emoji: Schriftrolle"> http://devdocs.io/css 
https://devdocs.io/css"... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="📜" title="Schriftrolle" aria-label="Emoji: Schriftrolle"> http://developer.mozilla.org/en-US/docs/Web/CSS
https://developer.mozilla.org/en-US/doc... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="📜" title="Schriftrolle" aria-label="Emoji: Schriftrolle"> http://w3schools.com/cssref 
https://w3schools.com/cssref&qu... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="📜" title="Schriftrolle" aria-label="Emoji: Schriftrolle"> http://w3.org"> http://w3.org 

Glossary:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📘" title="Blaues Buch" aria-label="Emoji: Blaues Buch"> http://codecademy.com/articles/glossary-html
https://codecademy.com/articles/... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="📘" title="Blaues Buch" aria-label="Emoji: Blaues Buch"> http://codecademy.com/articles/glossary-css">https://codecademy.com/articles/...

CSS Glossary | Codecademy

Programming reference for CSS covering Comments, Properties, and Selectors

http://codecademy.com/articles/glossary-html

Free HTML/CSS templates:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🏗️" title="Gebäude im Bau" aria-label="Emoji: Gebäude im Bau"> http://inovatik.com"> http://inovatik.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🏗️" title="Gebäude im Bau" aria-label="Emoji: Gebäude im Bau"> http://templated.co"> http://templated.co 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🏗️" title="Gebäude im Bau" aria-label="Emoji: Gebäude im Bau"> http://tooplate.com"> http://tooplate.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🏗️" title="Gebäude im Bau" aria-label="Emoji: Gebäude im Bau"> http://html5up.net"> http://html5up.net 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🏗️" title="Gebäude im Bau" aria-label="Emoji: Gebäude im Bau"> http://mobirise.com"> http://mobirise.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🏗️" title="Gebäude im Bau" aria-label="Emoji: Gebäude im Bau"> http://templatemo.om"> http://templatemo.om 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🏗️" title="Gebäude im Bau" aria-label="Emoji: Gebäude im Bau"> http://uideck.com"> http://uideck.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🏗️" title="Gebäude im Bau" aria-label="Emoji: Gebäude im Bau"> http://freehtml5.co"> http://freehtml5.co 

UI inspiration

⧩ http://siteinspire.com"> http://siteinspire.com 
⧩ http://uimovement.com"> http://uimovement.com 
⧩ http://uigarage.net"> http://uigarage.net 
⧩ http://collectui.com"> http://collectui.com 
⧩ http://behance.net"> http://behance.net 
⧩ http://awwwards.com"> http://awwwards.com 
⧩ http://sitesee.co"> http://sitesee.co 
⧩ http://onepagelove.com"> http://onepagelove.com 

Find icons for your project:

> http://fontawesome.com"> http://fontawesome.com 
> http://flaticon.com"> http://flaticon.com 
> http://icons8.com"> http://icons8.com 
> http://iconmonstr.com"> http://iconmonstr.com 
> http://freepik.com"> http://freepik.com 
> http://heroicons.dev"> http://heroicons.dev 
> http://simpleicons.org"> http://simpleicons.org 
> http://tablericons.com"> http://tablericons.com 
> http://css.gg"> http://css.gg 

Choose font for you project:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✍️" title="Schreibende Hand" aria-label="Emoji: Schreibende Hand"> http://fonts.google.com"> http://fonts.google.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✍️" title="Schreibende Hand" aria-label="Emoji: Schreibende Hand"> http://fontspace.com"> http://fontspace.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✍️" title="Schreibende Hand" aria-label="Emoji: Schreibende Hand"> http://1001fonts.com"> http://1001fonts.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✍️" title="Schreibende Hand" aria-label="Emoji: Schreibende Hand"> http://fontsquirrel.com"> http://fontsquirrel.com 

Done with learning? Deploy your projects:

* Netlify
* Firebase
* AWS
* Heroku
* Github Pages
* Vercel
* Surge
* Render
* Gitlab Pages
* Stormkit
* Azure
* Hostman

Done with projects? Make a CV:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📋" title="Klemmbrett" aria-label="Emoji: Klemmbrett"> http://resume.io"> http://resume.io 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📋" title="Klemmbrett" aria-label="Emoji: Klemmbrett"> http://visualcv.com"> http://visualcv.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📋" title="Klemmbrett" aria-label="Emoji: Klemmbrett"> http://resume.com"> http://resume.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📋" title="Klemmbrett" aria-label="Emoji: Klemmbrett"> http://novoresume.com"> http://novoresume.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📋" title="Klemmbrett" aria-label="Emoji: Klemmbrett"> http://wtfresume.com"> http://wtfresume.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📋" title="Klemmbrett" aria-label="Emoji: Klemmbrett"> http://resumake.io"> http://resumake.io 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📋" title="Klemmbrett" aria-label="Emoji: Klemmbrett"> http://flowcv.io"> http://flowcv.io 

Apply for jobs:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://stackoverflow.com/jobs 
https://stackoverflow.com/jobs"... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://flexjobs.com"> http://flexjobs.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://remote.co"> http://remote.co 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://justremote.co"> http://justremote.co 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://weworkremotely.com"> http://weworkremotely.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://remoteok.io"> http://remoteok.io 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://jobspresso.co"> http://jobspresso.co 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://europeremotely.com"> http://europeremotely.com 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💼" title="Aktenkoffer" aria-label="Emoji: Aktenkoffer"> http://wfh.io"> http://wfh.io 

Good luck! https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz">