# Learn HTML & CSS
> **HTML** - HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language. - wikipedia.org
> **CSS** - Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. - wikipedia.org
Liken to constructing a house, one might consider HTML the framing and CSS to be the painting & decorating.
##### General Learning:
- [codecademy.com HTML & CSS](https://www.codecademy.com/tracks/web) [interact]
- [Intro to HTML/CSS: Making webpages](https://www.khanacademy.org/computing/computer-programming/html-css) [watch]
- [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) [read]
- [Learn CSS Layout](http://learnlayout.com/) [read]
- [Front End Web Development: Get Started](http://www.pluralsight.com/courses/front-end-web-development-get-started) [watch][$]
- [HTML and CSS: Design and Build Websites](http://www.amazon.com/gp/product/1118008189/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1118008189&linkCode=as2&tag=fronenddevejo-20&linkId=V4CUOSZZARJURWZD) [read][$]
- [Front-End Web Development Quick Start With HTML5, CSS, and JavaScript](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) [watch][$]
- [HTML Mastery: Semantics, Standards, and Styling](http://www.amazon.com/gp/product/1590597656/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1590597656&linkCode=as2&tag=fronenddevejo-20&linkId=VFZVICLZO6GUZQI2) [read][$]
- [CSS Positioning](http://www.pluralsight.com/courses/css-positioning-1834) [watch][$]
- [HTML Document Flow](http://www.pluralsight.com/courses/html-document-flow-1837) [watch][$]
- [Introduction to HTML5 and CSS3](https://frontendmasters.com/courses/introduction-html5-css3/) [watch][$]
- [Absolute Centering in CSS](http://codepen.io/shshaw/full/gEiDt) [read]
- [Understanding the CSS Box Model](https://webdesign.tutsplus.com/courses/understanding-the-css-box-model) [watch]
- [Solid HTML Form Structure](https://webdesign.tutsplus.com/courses/solid-html-form-structure) [watch]
- [Semantic HTML: How to Structure Web Pages](https://webdesign.tutsplus.com/courses/semantic-html-how-to-structure-web-pages) [watch]
##### Mastering:
- [CSS Selectors from CSS4 till CSS1](http://css4-selectors.com/selectors/) [read]
- [CSS Diner](http://flukeout.github.io/) [interact]
- [CSS3 In-Depth](https://frontendmasters.com/courses/css3-in-depth/) [watch][$]
- [atozcss.com/](http://www.atozcss.com/) [watch]
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) [read]
##### References/docs:
- [htmlelement.info](http://htmlelement.info/)
- [MDN CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
- [MDN HTML element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
- [cssvalues.com/](http://cssvalues.com/)
- [CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE](http://csstriggers.com/)
- [HTML attribute reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
##### Glossary:
- [HTML Glossary Programming reference for HTML elements](https://www.codecademy.com/articles/glossary-html)
- [CSS Glossary - Programming reference for CSS covering Comments, Properties, and Selectors](https://www.codecademy.com/articles/glossary-css)
##### Standards/specifications:
- [HTML5 from W3C](http://www.w3.org/TR/html5/) : 5th major revision of the core language of the World Wide Web
- [The elements of HTML from the Living Standard](https://html.spec.whatwg.org/multipage/semantics.html#semantics)
- [The HTML Syntax](https://html.spec.whatwg.org/multipage/syntax.html#syntax) from the Living Standard
- [All W3C HTML Spec](http://www.w3.org/standards/techs/html#w3c_all)
- [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)
- [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification](https://drafts.csswg.org/css2/)
- [Selectors Level 3](http://www.w3.org/TR/css3-selectors/)
- [All W3C CSS Specifications](http://www.w3.org/Style/CSS/current-work#roadmap)
##### Architecting CSS:
- [oocss](http://oocss.org/) [read]
- [SMACSS](https://smacss.com/) [read][$]
- [SMACSS](https://frontendmasters.com/courses/smacss/) [watch][$]
- [Atomic Design](http://atomicdesign.bradfrost.com/) [read]
##### Authoring conventions:
- [idiomatic-css](https://github.com/necolas/idiomatic-css) [read]
- [Standards for developing flexible, durable, and sustainable HTML and CSS](http://mdo.github.io/code-guide/) [read]
- [cssguidelin.es](http://cssguidelin.es/) [read]
- [Google HTML/CSS Style Guide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#General_Formatting)
##### HTML/CSS newsletters:
- [HTML 5 Weekly](http://html5weekly.com/)
- [CSS Weekly](http://css-weekly.com/archives/)
- Introduction
- What is a front-end developer?
- Part I: The front-end practice
- Front-end jobs titles
- Common web tech employed
- Front-end dev skills
- Front-end devs develop for...
- Front-end on a team
- Generalist myth
- Front-end interview questions
- Front-end job boards
- Front-end salaries
- How FD's are made
- Part II: Learning front-end dev
- Self directed learning
- Learn internet/web
- Learn web browsers
- Learn DNS
- Learn HTTP/networks
- Learn web hosting
- Learn general front-end dev
- Learn UI/interaction design
- Learn HTML & CSS
- Learn SEO
- Learn JavaScript
- Learn DOM, BOM & jQuery
- Learn web fonts
- Learn accessibility
- Learn web/browser API's
- Learn JSON
- Learn front-end app architecture
- Learn Interface/API design
- Learn web dev tools
- Learn command line
- Learn node.js
- Learn module loader
- Learn package managers
- Learn version control
- Learn build & task automation
- Learn site performance optimization
- Learn JS testing
- Learn headless browsers
- Learn offline dev
- Learn security
- Learn multi-thing dev (e.g. RWD)
- Directed learning
- front-end schools, courses, & bootcamps
- Front-end devs to learn from
- Newsletters, news, & podcasts
- Part III: Front-end dev tools
- General front-end dev tools
- SEO tools
- Prototyping & wireframing tools
- Diagramming tools
- HTTP/network tools
- Code editing tools
- Browser tools
- HTML tools
- CSS tools
- DOM tools
- JavaScript tools
- App (desktop, mobile, tablet etc..) tools
- Templating tools
- UI/widget tools
- JSON tools
- Testing framework tools
- Data storage tools
- Module/package loading tools
- Module/package repo. tools
- Web/cloud/static hosting tools
- Project management & code hosting
- Collaboration & communication tools
- CMS hosted/API tools
- BAAS (for front-end devs) tools
- Offline tools
- Security tools
- Tasking (aka build) tools
- Deployment tools
- Site/app monitoring tools
- JS error monitoring tools
- Performance tools