Getting Started

First Milestone: Fundamentals & Essentials

HTML5 & CSS3

• The World Wide Web Consortium (W3C) http://www.w3.org/

• Web Hypertext Application Technology Working Group https://whatwg.org/

• HTML - Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/HTML

• CSS - Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/CSS

• MarkSheet: Free tutorial to learn HTML and CSS http://marksheet.io/

• The W3C Markup Validation Service https://validator.w3.org/

• The W3C CSS Validation Service https://jigsaw.w3.org/css-validator/

• WHATWG: Validator.nu (X)HTML5 Validator https://html5.validator.nu/

• Can I use... Support tables for HTML5, CSS3, etc https://caniuse.com/

• HTML5test - How well does your browser support HTML5? https://html5test.com/

• Character Entity Reference Chart - World Wide Web Consortium https://dev.w3.org/html5/html-author/charref

• Date and Time Formats - World Wide Web Consortium https://www.w3.org/TR/NOTE-datetime

• All About Floats - CSS-Tricks https://css-tricks.com/all-about-floats/

• The Lengths of CSS - CSS-Tricks https://css-tricks.com/the-lengths-of-css/

• CSSMania - Biggest CSS Showcase all over the globe http://www.cssmania.com/

• CSS-Tricks https://css-tricks.com/

Tools / Services

• Firefox Developer Edition - Mozilla https://www.mozilla.org/en-US/firefox/developer/

• Visual Studio Code - Code Editing. Redefined https://code.visualstudio.com/

• Firefox Developer Tools - MDN https://developer.mozilla.org/en-US/docs/Tools

• Keyboard shortcuts - Firefox Developer Tools - MDN https://developer.mozilla.org/en-US/docs/Tools/Keyboard_shortcuts

• Keyboard shortcuts - Perform common Firefox tasks quickly https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly

• Emmet Documentation - Abbreviations http://docs.emmet.io/abbreviations/

• ShareX - Screen capture, file sharing and productivity tool https://getsharex.com/

• Auto Reload - Add-on for Firefox https://addons.mozilla.org/en-US/firefox/addon/auto-reload/

• Lorem Ipsum - Lipsum generator http://lipsum.com/

• Lipsum Banners http://lipsum.com/banners/

• Placehold.it - Quick and simple image placeholders https://placehold.it/

• Thimble by Mozilla - An online code editor for learners & educators https://thimble.mozilla.org/

• Create Gist - Instantly share code, notes, and snippets - GitHub https://gist.github.com/

• CodePen - Front End Developer Playground & Code Editor in the Browser https://codepen.io/

• The ultimate favicon generator - Favic-o-Matic http://www.favicomatic.com/

• Favicon Generator for all platforms: iOS, Android, PC/Mac https://realfavicongenerator.net/

• 📙 Emojipedia — 😃 Home of Emoji Meanings http://emojipedia.org/

• Emoji Cheat Sheet - Emoji.codes https://www.emoji.codes

• Screen specifications for the most popular devices http://screensiz.es/

• mydevice.io : web devices capabilities https://mydevice.io/

• httpbin(1): HTTP Client Testing Service http://httpbin.org/

• Adobe Color https://color.adobe.com/

• LOL Colors - Curated color palette inspiration https://www.webdesignrankings.com/resources/lolcolors/

• Color Hex - ColorHexa.com http://www.colorhexa.com/

• The ultimate CSS tools for web designers | CSSmatic http://www.cssmatic.com/

• Create Your Own @font-face Kits - Font Squirrel https://www.fontsquirrel.com/tools/webfont-generator

Design

• The Best Designs - Web Design Inspiration - Cobble Hill https://www.thebestdesigns.com/

• SiteInspire - Web Design Inspiration https://www.siteinspire.com/

• Unsplash | Beautiful Free Photo Community https://unsplash.com/

• PhotoPin - Free Photos for Bloggers via Creative Commons http://photopin.com/

• Free vectors, photos and PSD Downloads - Freepik http://www.freepik.com/

• Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of free icons http://www.flaticon.com/

• Brick: Webfonts that actually look good http://brick.im/

• Free Fonts! Legit Free & Quality Fonts - Font Squirrel https://www.fontsquirrel.com/

Useful

• Emoji Keyboard - Add-on for Firefox https://addons.mozilla.org/en-US/firefox/addon/emojikeyboard/

• Wappalyzer - Add-on for Firefox https://addons.mozilla.org/en-US/firefox/addon/wappalyzer/

• Greasemonkey - Add-on for Firefox https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

• uBlock Origin - Add-on for Firefox https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/

• Generate a Random Name - Fake Name Generator http://www.fakenamegenerator.com/

• BuiltWith Technology Lookup https://builtwith.com/