Web Making Guides
Not Your Typical Horizontal Rules
– The personal website of Sara Soueidan, inclusive design engineer
Interneting Is Hard
Friendly web development tutorials for complete beginners
How to add a copy to clipboard button to code blocks
A copy button enables quick copying of code to the clipboard. I will show how to use the Clipboard API, style the button, and provide user feedback.
SmolCSS
Minimal snippets for modern CSS layouts and components
Build a link tree website - W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Simple.css Framework
Simple.css is classless CSS template that allows you to create a good looking website very quickly.
px to rem
Resources for Webweaving
Color Hex Color Codes
Color hex is a easy to use tool to get the color codes information including color models (RGB,HSL,HSV and CMYK), css and html color codes.
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
Grid Garden
A game for learning CSS grid layout
CSS Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
ColorKit - Color Palettes, Gradients, Inspiration, and Color Tools
For artists and designers, bring your designs to life with our collection of online color tools and color palette inspiration.
A Beginner's Guide to HTML and CSS
Web#small web#Classic Homepage Project#Make Your Own Website#web dev#website#webweaving#HTML#CSS#guide
An Interactive Guide to Flexbox in CSS
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨
CSS Reference
CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
Modern CSS Solutions
A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 15+ years.
Flexbox Froggy - A game for learning CSS flexbox
A game for learning CSS flexbox