--- title: Web Design description: Web design combines aesthetics and usability to create digital interfaces. Learners will understand layout principles, typography, color theory, and user experience (UX) design to build visually engaging and functional websites. category: programming-tech subcategory: web-development difficulty: beginner, intermediate, advanced url: /subject/web-design --- # Web Design Web design combines aesthetics and usability to create digital interfaces. Learners will understand layout principles, typography, color theory, and user experience (UX) design to build visually engaging and functional websites. ## Available Resources 1 Videos • 4 Books • 2 Courses • 4 Websites ## Websites ### 1. MDN Web Docs Mozilla's structured curriculum for HTML, CSS, JavaScript and accessibility, with reference pages and browser-support tables beside each tutorial. Working through it builds the standards knowledge needed to lay out and style pages correctly. **Difficulty:** Beginner | **Price:** Free **Link:** https://developer.mozilla.org/en-US/docs/Learn **Tags:** html, css, javascript, web-standards, accessibility ### 2. css-tricks.com CSS-Tricks is a comprehensive frontend development resource offering tutorials, articles, and code snippets focused on HTML, CSS, and modern web design. It features in-depth guides, a CSS Almanac, and practical examples for building responsive layouts and interactive UI. **Difficulty:** Intermediate | **Language:** English | **Price:** Free **Link:** https://css-tricks.com **Tags:** websites, technology-computer-science, web-development ### 3. awwwards.com Awwwards is a premier platform that showcases and awards the best in web design. It features winning sites, design inspiration, case studies, and articles on UX, UI trends, and development. **Difficulty:** Intermediate | **Language:** English | **Price:** Free **Link:** https://awwwards.com **Tags:** websites, technology-computer-science, web-development ### 4. smashingmagazine.com Smashing Magazine is a design-focused publication offering practical articles, tutorials, and ebooks for web designers and developers. It covers layout, composition, typography, UX, and responsive design, with code samples and design patterns. **Difficulty:** Intermediate | **Language:** English | **Price:** Free **Link:** https://smashingmagazine.com **Tags:** websites, arts-design, graphic-design ## Videos ### 1. Build a Responsive Website | HTML, CSS Grid, Flexbox & More A full build-along tutorial constructing a responsive multi-section marketing site from scratch with semantic HTML, CSS Grid, and Flexbox, covering navbars, cards, animations, and media queries so viewers can reproduce a production-style layout themselves. **Difficulty:** Beginner | **Price:** Free **Link:** https://www.youtube.com/watch?v=p0bGHP-PXD4 **Tags:** html, css-grid, flexbox, responsive-design, front-end ## Courses ### 1. What The Flexbox?! **Author:** Wes Bos Free 20-video course by Wes Bos on CSS Flexbox, covering axes, direction, wrapping, flex-grow, flex-shrink, flex-basis and alignment, followed by projects such as navigation bars, pricing grids and app layouts, so learners can build responsive layouts confidently. **Difficulty:** Beginner | **Price:** Free **Link:** https://flexbox.io **Tags:** css, flexbox, css-layout, responsive-design, front-end ### 2. Responsive Web Design Free self-paced freeCodeCamp curriculum that teaches HTML and CSS through small guided projects, covering semantic markup, the box model, Flexbox, CSS Grid, media queries and accessibility basics. Learners can build and publish simple websites that adapt to phone and desktop screens. **Difficulty:** Beginner | **Price:** Free **Link:** https://www.freecodecamp.org/learn/responsive-web-design/ **Tags:** responsive-design, html, css, accessibility, web-development ## Podcasts ### 1. ShopTalk Show **Author:** ShopTalk ShopTalk is a podcast about front end web design, development and UX. Each week Chris Coyier and Dave Rupert are joined by a special guest to talk shop and answer listener submitted questions. **Difficulty:** Beginner | **Language:** en-us | **Price:** Free **Link:** https://shoptalkshow.com **Tags:** front-end, css, javascript, web-development, ux ## Books ### 1. The Design of Everyday Things **Author:** Don Norman Don Norman's revised and expanded classic on user-centred design, explaining affordances, signifiers, mapping, feedback, conceptual models and human error, so readers can diagnose why products confuse people and design interfaces that communicate how they work. **Difficulty:** Beginner | **Language:** English | **Price:** Paid **Link:** https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654?tag=edmonddante07-20 **Tags:** user-centered-design, usability, affordances, interaction-design, human-error ### 2. The Principles of Beautiful Web Design **Author:** Jason Beaird, James George A SitePoint primer on visual design fundamentals for developers: layout and grids, color theory, typography, texture, and imagery, worked through a single sample site so readers can justify aesthetic decisions rather than copy templates. **Difficulty:** Intermediate | **Language:** English | **Price:** Paid **Link:** https://www.amazon.com/dp/0992279445?tag=edmonddante07-20 **Tags:** books, technology-computer-science, web-development ### 3. Don't Make Me Think **Author:** Steve Krug Short, illustrated guide to web usability built on the idea that pages should be self-evident. Covers navigation conventions, scannable copy, and cheap do-it-yourself usability testing, giving readers a practical checklist for spotting friction in an interface. **Difficulty:** Intermediate | **Language:** English | **Price:** Paid **Link:** https://www.amazon.com/dp/0321344758?tag=edmonddante07-20 **Tags:** books, business-entrepreneurship, entrepreneurship ### 4. Designing with Web Standards **Author:** Jeffrey Zeldman The manifesto that pushed the industry toward standards-based markup, arguing for semantic XHTML, CSS layout, and separation of structure from presentation, and showing how forward-compatible sites reduce maintenance cost and stay accessible across browsers and devices. **Difficulty:** Intermediate | **Language:** English | **Price:** Paid **Link:** https://www.amazon.com/dp/0735712018?tag=edmonddante07-20 **Tags:** books, technology-computer-science, web-development --- *This content is part of Dantes.io - Your Treasure Map to Knowledge* *Curated by humans at Dantes.io. Personal study use welcome; republishing this curation requires permission (team@dantes.io).* View this page online: https://dantes.io/subject/web-design