loading...
Cover image for You want to learn HTML & CSS but don't know where to start?

You want to learn HTML & CSS but don't know where to start?

denicmarko profile image Marko Denic ใƒปUpdated on ใƒป2 min read

In this article, I prepared a list of resources for everything you need to learn HTML and CSS, but also for the next steps on your journey, like hosting for your projects, CV generators, websites to find a job, and much, much more. Enjoy.

Choose a Code Editor:

๐Ÿ’ป Visual Studio Code [VS Code]
๐Ÿ’ป Sublime Text
๐Ÿ’ป Atom
๐Ÿ’ป Brackets
๐Ÿ’ป Vim

Learning Platforms:

๐Ÿ“Œ http://freecodecamp.org
๐Ÿ“Œ http://sololearn.com
๐Ÿ“Œ http://developer.mozilla.org
๐Ÿ“Œ http://w3schools.com
๐Ÿ“Œ http://khanacademy.org
๐Ÿ“Œ http://codecademy.com
๐Ÿ“Œ http://frontendmentor.io

Books:

๐Ÿ“š HTML and CSS: Design and Build Websites, by Jon Duckett
๐Ÿ“š Web designing books by Nick Pettit
๐Ÿ“š The Essential Guide to CSS and HTML Web Design, by Craig Grannell
๐Ÿ“š Smashing CSS, by Eric Meyer
๐Ÿ“š HTML5 and CSS3 All-in-One Book For Dummies, by Andy Harris

YouTube Channels:

โ–ถ๏ธ Traversy Media
โ–ถ๏ธ freeCodeCamp
โ–ถ๏ธ DesignCourse
โ–ถ๏ธ The Net Ninja
โ–ถ๏ธ Dani Krossing
โ–ถ๏ธ Web Dev Simplified
โ–ถ๏ธ Florin Pop

Newsletters:

๐Ÿ“จ Accessibility Weekly
๐Ÿ“จ CSS Weekly
๐Ÿ“จ Responsive Design Weekly
๐Ÿ“จ Frontend Focus

Learn CSS by playing games:

๐ŸŽฎ CSS Diner
๐ŸŽฎ Flexbox Zombies
๐ŸŽฎ Grid Garden
๐ŸŽฎ Flexbox Defense
๐ŸŽฎ Flexbox Froggy
๐ŸŽฎ CSS Battle

Docs:

๐Ÿ“œ http://cssreference.io
๐Ÿ“œ http://cssvalues.com
๐Ÿ“œ http://devdocs.io/css
๐Ÿ“œ http://developer.mozilla.org/en-US/docs/Web/CSS
๐Ÿ“œ http://w3schools.com/cssref
๐Ÿ“œ http://w3.org

Glossary:

๐Ÿ“˜ http://codecademy.com/articles/glossary-html
๐Ÿ“˜ https://www.codecademy.com/articles/glossary-css

Free HTML/CSS templates:

โš’๏ธ http://inovatik.com
โš’๏ธ http://templated.co
โš’๏ธ http://tooplate.com
โš’๏ธ http://html5up.net
โš’๏ธ http://mobirise.com
โš’๏ธ http://templatemo.om
โš’๏ธ http://uideck.com
โš’๏ธ http://freehtml5.co

UI inspiration

โงฉ http://siteinspire.com
โงฉ http://uimovement.com
โงฉ http://uigarage.net
โงฉ http://collectui.com
โงฉ http://behance.net
โงฉ http://awwwards.com
โงฉ http://sitesee.co
โงฉ http://onepagelove.com
โงฉ https://dribbble.com

Find icons for your project:

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

Choose font for your project:

โœ๏ธ http://fonts.google.com
โœ๏ธ http://fontspace.com
โœ๏ธ http://1001fonts.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:

๐Ÿ“‹ http://resume.io
๐Ÿ“‹ http://visualcv.com
๐Ÿ“‹ http://resume.com
๐Ÿ“‹ http://novoresume.com
๐Ÿ“‹ http://wtfresume.com
๐Ÿ“‹ http://resumake.io
๐Ÿ“‹ http://flowcv.io

Apply for jobs:

๐Ÿ’ผ http://stackoverflow.com/jobs
๐Ÿ’ผ http://flexjobs.com
๐Ÿ’ผ http://remote.co
๐Ÿ’ผ http://justremote.co
๐Ÿ’ผ http://weworkremotely.com
๐Ÿ’ผ http://remoteok.io
๐Ÿ’ผ http://jobspresso.co
๐Ÿ’ผ http://europeremotely.com
๐Ÿ’ผ http://wfh.io

Good luck! โค๏ธ

If you liked this article, be sure to โค๏ธ it.

Initially created on Twitter:

Let's keep in touch:

Blog: markodenic.com
Twitter: @denicmarko
Github: github.com/MarkoDenic
Codepen: codepen.io/denic

Discussion

pic
Editor guide
Collapse
iwpgeek profile image
Mohammed Imtiyaz

Hi Marko,
Thanks for the great collection.
Just wanted to let you know there is a typo error for the link khanacademy.org

Collapse
denicmarko profile image
Marko Denic Author

Hi Mohammed!

Thank you. Fixed!