Beginner Web Design: Guides to HTML and CSS

There is no shortage of programming resources, tutorials, and videos available. If you have decided to learn how to design websites, the real difficulty is finding beginner friendly material that will still be useful. Here, we’ll take a look at some beginner web design resources you can use to study HTML and CSS— the fundamentals of web design. We’ll prioritize free resources, but will also mention low-cost books and classes if they are especially valuable for those just starting out.

• Beginner Web Design Overviews
  • Learn to Code HTML & CSS
  • Jon Duckett’s HTML and CSS
  • Khan Academy
  • Free Code Camp
• Intermediate and Reference
  • Flexbox Froggy
  • CSS Tricks

Beginner Web Design Overviews

Learn to Code HTML & CSS

Rather than run through the basics of HTML and CSS separately, Howe introduces both sets of design tools up front. HTML and CSS are used together to explain web design fundamentals. This invites the learner to focus on layout and overall appearance from the beginning, rather than getting bogged down in memorizing tags and attributes.

Jon Duckett’s HTML and CSS

While this is not a free resource, Jon Duckett’s textbook ‘HTML and CSS’, is one of those rare books that is both beautifully crafted and useful to read. If you wish to have at least one print book about web design fundamentals to show off, this is the one to get. Long after you’ve mastered the skills it covers, it will remain both a useful reference and a piece of art in book form.

Khan Academy

Khan Academy is an online learning resource dedicated to providing teaching and education resources to the world. The site’s ‘Making Webpages’ course offers an overview of the two toolsets. Once you finish this intro, you’ll be ready to move on to the more advanced web design courses in their free, comprehensive curriculum! Combine your work here with the material in the site’s JavaScript courses for a grounding in the web’s core languages.

Free Code Camp

Free Code Camp provides a comprehensive, project-based curriculum that can take you from zero experience to a professional web design job. Anyone can use the site’s comprehensive tutorials. After students have completed some of the site’s certifications, they are invited to gain experience and build a portfolio by designing websites for various nonprofit organizations.

Intermediate and Reference

Flexbox Froggy

Flexbox is a layout system for CSS. It works especially well for menus, cards, and boxes. Because of this, Flexbox is especially useful for developers designing mobile interfaces. Flexbox will continue to gain popularity as the industry adopts a ‘mobile-first’ design philosophy. Flexbox Froggy provides a series of puzzles that let you flex your skills! It’s a fun introduction to (or refresher for) one of the cornerstones of modern web design.

CSS Tricks

If you are having trouble figuring out how to do something in CSS, chances are someone else has run into the same issue before. CSS Tricks is a collection of ‘how tos’ that can walk you through everything from an overview of Flexbox to introductory color theory. If you understand CSS basics but need help with more advanced setups, look here first.

Once you have some experience with the basics, start setting up a portfolio page to show off your web design skills!