The following are the best resources for this dive, broken down by beginner, intermediate, and advanced.
This HTML/CSS Resource Handbook Below
Proudly Brought to you by Break Diving, Inc.
It's more fun to study and grow with others! Break Diving (the site you are on now) is a worldwide not-for-profit community focused on helping our 1470 members in 110 countries and 300 world cities to dramatically improve their happiness, success, and friendships. We help you level up, get recognized for your life accomplishments, make new friends, accomplish more, feel AWESOME about yourself, and become the best version of you---and all with other members rooting you on! Apply now and see major positive changes in your life in just two weeks!
HTML/CSS - Resources
Resources
HTML/CSS Notes for Professionals
1 Break Diver Vote
HTML/CSS Notes for Professionals, offered by Goalkicker, is a complete and comprehensive guide, with multiple examples and in-depth explanations on various topics. The books are updated weekly and are downloadable in PDF format.
Category: Textbooks
Skill Levels:
- Intermediate
- Advanced
CSS Notes for Professionals
Shay Howe Basic & Advanced CSS
1 Break Diver Vote
This is a free course that not only covers basic CSS, but also advanced CSS. Go through both of these tutorials and you'll have a very good foundation of all the key principles including transforms, transitions, and animations!
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
- Advanced
SoloLearn
1 Break Diver Vote
SoloLearn offers an introductory course on HTML/CSS (and many other languages) that you can access anywhere, even on your phone! Go through the lessons and hands-on exercises then test your knowledge with interactive quizzes. The site also allows the community to discuss answers to questions and provides an online playground.
Category: Self-Study
Skill Levels:
- Beginner
SoloLearn CSS
The 30 CSS Selectors you must memorize
1 Break Diver Vote
In detail article about 30 CSS selectors.
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
W3Schools HTML/CSS
1 Break Diver Vote
W3schools is an excellent educational website where you can learn web development and programming languages, such as HTML/CSS. The tutorials mainly consist of readings with examples, plus a small exercise or quiz at the end of each lesson. The website also provides references to HTML/CSS keywords that you may find useful. Definitely recommended!
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
W3Schools CSS
150 Amazing Examples of CSS animation & effects
0 Break Diver Votes
Amazing collection of cool CSS effects helpful to create a stunning website.
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
- Advanced
A Complete Guide to Flexbox
0 Break Diver Votes
This is a comprehensive guide to Flexbox. It includes helpful diagrams to show how different properties affect divs and their positioning.
Category: Other Books & Resources
Skill Levels:
- Beginner
- Intermediate
A Complete Guide to Grid
0 Break Diver Votes
This is a comprehensive guide to CSS Grid. It includes helpful diagrams to show how different properties affect divs and their positioning. This resource will help you master the power of the CSS Grid!
Category: Other Books & Resources
Skill Levels:
- Beginner
- Intermediate
A Smarter Way to Learn HTML/CSS
0 Break Diver Votes
A Smarter Way to Learn HTML/CSS takes a basic approach, assuming nothing about your knowledge base, but it still takes you quite far. It’s divided into brief chapters: each chapter is broken up into 2-3 pages of practical, comprehensible examples followed by 20 free sample exercises available on the author’s website.
Category: Textbooks
Skill Levels:
- Beginner
Codecademy
0 Break Diver Votes
Codecademy is an online platform that offers both free and paid coding lessons. This link takes you to all the courses covering or related to HTML/CSS. There are no prerequisites, so you don't need any experience prior to starting. You can access the lessons without cost, but the additional practice (projects and quizzes) require Codecademy Pro. However, they refused to help Break Diving and never responded to any of our emails, so think twice before paying them any money.
Category: Self-Study
Skill Levels:
- Intermediate
- Beginner
CodePen.io
0 Break Diver Votes
CodePen.io is a free open Javascript/HTML/CSS playground that allows you to create multiple "pens" (i.e. projects). You can input JavaScript, HTML, and CSS and see the output of your code. You can even switch the themes between dark and light mode if you want. Definitely check it out! You can also learn a lot by looking at (and following) the pens of other coders.
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
- Advanced
Codrops CSS Reference
0 Break Diver Votes
Comprehensive collection of important CSS properties explained in details.
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
- Advanced
Coursera
0 Break Diver Votes
Coursera is an online learning platform that works with universities and companies to offer courses on a variety of academic subjects. There are several HTML/CSS courses offered by prestigious universities, and they consist of videos, readings, and quizzes. The peer-graded assignments and projects help to make the courses a more hands-on experience.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
- Advanced
CSS Tricks
0 Break Diver Votes
Very useful Article about Web Development Subjects
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
CSS Zen Garden
0 Break Diver Votes
Collection of beautiful CSS designs which demonstrates what can be accomplished through CSS-based design.
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
- Advanced
Egghead
0 Break Diver Votes
Egghead is a group of working web development professionals and open source contributors who provide concise, information-dense video courses on the best tools in the industry. These courses range in difficulty, from helping you build a solid HTML/CSS foundation to teaching you advanced techniques. Egghead courses are designed to teach you everything you need to know to succeed with professional development work.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
egghead.io The Best HTML5 Courses
Feather Icons
0 Break Diver Votes
Similar to FontAwesome, but a different set of icons with different styles. You can change the size and color of the icons by adjusting the controls on the right.
Category: Other Apps & Websites
Skill Levels:
- Intermediate
- Advanced
Flexbox Froggy
0 Break Diver Votes
In this game, you must bring the frogs to their lilypads. Interesting way to practice your CSS Flexbox skill.
Category: Other Apps & Websites
Skill Levels:
- Intermediate
freeCodeCamp
0 Break Diver Votes
FreeCodeCamp provides a comprehensive tutorial for the entire HTML/CSS process—from starting off to creating your first program as an online web developer using node.js. It also provides free certifications when you complete different sections. Note: It starts off easy but gets overly difficult quickly with less-than-adequate explanations and instructions as you go. Don't be discouraged—you can start here, but eventually, you need to go elsewhere to fill in the many gaps it leaves. As a side note, they refused to help Break Diving when we reached out and never responded to any of our emails, so better to donate to Break Diving rather than FCC. Also, their online community isn't so friendly. Nothing like Break Diving!
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
Link to YouTube Playlist
Frontend Masters
0 Break Diver Votes
Frontend Masters will help you become an expert in CSS. The courses dive into advanced topics, such as state management, containers, and accessibility, to help you truly master front-end development. Most courses have free previews, but you'll have to pay to get full access.
Category: Self-Study
Skill Levels:
- Advanced
GeeksforGeeks
0 Break Diver Votes
GeeksforGeeks is a computer science portal for HTML/CSS enthusiasts. These tutorials provide basic instructions as well as explanations of more intermediate concepts and algorithms. Although a bit more challenging than usual, these tutorials are a valuable resource for those who want to get a solid background in HTML/CSS.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
GeeksforGeeks CSS
Hour of Code
0 Break Diver Votes
Hour of Code provides fun tutorials for all skill levels. The games are targeted towards those in grade school, which makes the topics very digestible.
Category: Other Apps & Websites
Skill Levels:
- Intermediate
- Advanced
- Beginner
HTML.Com
0 Break Diver Votes
This is a website created specifically for beginners who want to learn HTML.
Category: Self-Study
Skill Levels:
- Beginner
HTML/CSS For Dummies
0 Break Diver Votes
From the famous For Dummies series, this book not only teaches the basics of HTML/CSS, but also goes further and explains HTML/CSS. You can't go wrong with the Dummies books.
Category: Textbooks
Skill Levels:
- Beginner
- Intermediate
HTML/CSS H.A.C.K.ers
0 Break Diver Votes
HTML/CSS H.A.C.K.ers is a worldwide community of programmers who help one another to improve not only as HTML/CSS coders, but also in general areas of life. It's a really unique experience, brought to you by Break Diving (this website you're on now). Come chat and get support from other Break Divers pursuing HTML/CSS as a dive!
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
- Advanced
Khan Academy
0 Break Diver Votes
The Khan Academy Computer Programming course provides introductions to a variety of coding languages, such as HTML/CSS. The challenges and projects on the site help you develop a solid foundation in HTML/CSS.
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
Learn HTML
0 Break Diver Votes
Learn HTML is a set of online tutorials and practice problems for the HTML programming language. Most lessons include multiple examples and practice problems to help drill in the concepts. This resource is particularly helpful for those who are more used to a hands-on approach to learning, practicing, and applying the concepts that they have learned in order to truly master them.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
MDN web docs
0 Break Diver Votes
MDN has some of the most detailed sets of documentation for programming languages. The MDN docs and tutorials are a very comprehensive and reliable reference, especially when you want to explore some of the more advanced and nuanced uses of HTML/CSS. They also provide succinct tutorials to introduce beginners to HTML/CSS.
Category: Self-Study
Skill Levels:
- Intermediate
- Advanced
MDN HTML
MDN CSS
Murach's HTML5 and CSS3, 4th Edition
0 Break Diver Votes
This book is great for both learning and reference. It starts off with the basics and ends with more involved concepts such as JavaScript and JQuery. It is a great addition to your developer library!
Category: Other Books & Resources
Skill Levels:
- Beginner
- Intermediate
Scrimba
0 Break Diver Votes
This tutorial course is the perfect starting point for aspiring HTML/CSS developers. You'll learn all the key concepts while building apps and doing interactive coding challenges along the way.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
Semantic UI
0 Break Diver Votes
Another development framework (like Bootstrap) that makes it easier to design beautiful websites and layouts. It is easier to understand than Bootstrap because it uses "human-friendly HTML".
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
- Advanced
SitePoint
0 Break Diver Votes
SitePoint offers an incredible selection of online books, tutorials, and more. You can also buy many of their books online. This is a wonderful repository of excellent tutorials and books that will help you level up your HTML/CSS programming skills.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
- Advanced
SitePoint HTML & CSS Path
The Odin Project
0 Break Diver Votes
The Odin Project is an open-source community and curriculum on web development. The curriculum teaches you to build websites from scratch, focusing on the backend.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
Traversy Media HTML & CSS
0 Break Diver Votes
Traversy Media features online web development and programming tutorials for the latest web technologies. Brad Traversy is one of the well-known instructors in the web development community. In this HTML/CSS series, he teaches users to develop simple and elegant websites.
Category: Video
Skill Levels:
- Beginner
- Intermediate
200+Design & UI Resources for Developers
Tutorials Point HTML/CSS Tutorial
0 Break Diver Votes
TutorialsPoint offers a set of very helpful beginner tutorials to introduce you to HTML/CSS and programming in general. Its mission is to deliver "Simply Easy Learning" with clear to-the-point content. No prior knowledge is assumed and the tutorials take care to explain each step in detail. There are also multiple examples that illustrate the concepts being taught, which help to make the concepts comprehensible.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
Tutorials Point CSS
Tuts Plus Tutorials
0 Break Diver Votes
Tuts Plus offers amazingly detailed tutorials that teach you how to solve specific problems. Difficulty ranges from complete basics to more advanced app building.
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
- Advanced
Tuts Plus CSS Tutorials
Udacity
0 Break Diver Votes
With Udacity, you can learn the basics (and the nuances) of HTML/CSS through video lessons and interactive quizzes. Industry professionals, mentors, and career coaches are available to help you master essential programming skills.
Category: Schools
Skill Levels:
- Beginner
- Intermediate
Udemy Courses
0 Break Diver Votes
Udemy is an online learning platform consisting of video tutorials on a variety of topics. This link will take you to the top free HTML/CSS courses on Udemy, but there are paid options as well that offer more than just video content. There are video courses on many topics of HTML/CSS, ranging from total beginner courses to field-specific ones. In addition, each course has a rating, and it is probably best to look for the ones with higher ratings and more users.
Category: Self-Study
Skill Levels:
- Beginner
- Intermediate
- Advanced
Udemy Free CSS Courses
Undraw Illustrations
0 Break Diver Votes
SVG and PNG illustrations to use on your projects. You can change the colors using the control on the top right.
Category: Other Apps & Websites
Skill Levels:
- Intermediate
- Advanced
WebsiteSetup
0 Break Diver Votes
This link takes you to a comprehensive HTML/CSS cheat sheet. It summarizes the important points in HTML/CSS so that you have a clear reference to refer back to when coding.
Category: Other Apps & Websites
Skill Levels:
- Beginner
- Intermediate
- Advanced
HTML5 Periodic Table
CSS Cheat Sheet
Wes Bos CSS Courses
0 Break Diver Votes
Wes Bos is one of the best teachers for modern CSS. His YouTube channel offers many tutorials for you to learn from. He also offers excellent free and premium courses on his website. Check it out!
Category: Video
Skill Levels:
- Intermediate
Wes Bos Courses
Wes Bos YouTube
HTML/CSS - Resources
Why pursue the HTML/CSS dive alone when you can dive in and learn with 1470 new supportive friends in 110 countries pursuing 140 collective dives from 300 world cities? Apply now to join Break Diving!
Apply Now