A guide covering the HTML/CSS languages including the applications and tools that will make you a better and more efficient HTML/CSS developer.
Note: You can easily convert this markdown file to a PDF in VSCode using this handy extension Markdown PDF.
HTML (HyperText Markup Language) is the basic building blocks of the Web. It defines the meaning and structure of web content along with other technologies used to describe a web page's appearance/presentation using CSS or functionality/behavior using JavaScript.
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS also describes how elements should be rendered on screen, on paper, in speech, or on other media.
Microsoft Certified Solutions Associate (MCSA): Web Applications
Intro to HTML/CSS: Making webpages by Khanacademy
Intro to HTML and CSS by Udacity
Modern HTML & CSS From The Beginning (Including Sass) by Udemy
Using Glitch for Developer Relations
WebStorm is a professional IDE for JavaScript(including support for both HTML and CSS) developed by JetBrains. WebStorm comes with intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JavaScript, TypeScript, stylesheet languages, and all the most popular frameworks(Angular, React, Vue.js, Ionic, Apache Cordova, React Native, Node.js, Meteor, and Electron).
Codeanywhere is a Cloud Integrated Development Environment. Our Cloud IDE saves you time by deploying a development environment in seconds, enabling you to code, learn, build, and collaborate on your projects.
Adobe Brackets is a modern open-source code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript.
Adobe TypeKit is the Adobe font subscription service for both web and desktop fonts, that makes thousands of fonts from quality foundries accessible, with no extra licensing required.
Ultimate CSS Gradient Generator is a powerful Photoshop-like CSS gradient editor from ColorZilla.
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
PurgeCSS is a tool to remove unused CSS in your project.
Tailwind UI is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you want to build.
Sass(Syntactically Awesome Style Sheets) is a professional grade CSS extension language.
HTML KickStart is a ultra-lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you a lot of hours on your next web project.
Mercury is a full featured HTML5 editor. It was built from the ground up to help your team get the most out of content editing in modern browsers.
Maquetta is a WYSIWYG visual page editor for drawing out user interfaces using drag/drop assembly. Maqetta supports both desktop and mobile user interfaces.
Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate.
Radi is a tool designed from the ground up to help you create content that will take full advantage of HTML5 features.
Onsen UI is an open source framework that makes it easy to create native-feeling Progressive Web Apps (PWAs) and hybrid apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.
Framework7 is a free and open source framework to develop mobile, desktop or web apps with native look and feel. It is also an indispensable prototyping tool to show working app prototype as soon as possible in case you need to.
Gauge.js is a native and cool looking animated JavaScript/CoffeScript gauge.
SproutCore is an open-source framework for building blazingly fast, innovative user experiences on the web.
Tumult Hype is the HTML5 creation app for macOS. The animations and interactive content made with Tumult Hype work on desktops, smartphones and iPads with no code required.
CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites.
Glitch makes easier to build fast, full-stack web apps in your browser for free.
CSS Optimizer is an online tool to clean, compress, and optimize your CSS code.
Sciter is an embeddable HTML/CSS/scripting engine, Windows, MacOS and Linux.
Flexy is minimal CSS framework made with Flex.
Simple CSS is a tool that allows you to easily create Cascading Style Sheets from scratch, and modify existing ones, using a familiar point-and-click interface. With Simple CSS, you can manage multiple CSS projects, import existing .css files as desired, and export projects to .css files.
Conditional-CSS is a CSS module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.
Kotatsu is a straightforward CLI tool aiming either at running node.js scripts or serving JavaScript/TypeScript web applications in a modern environment.
AWK is a scripting language used for manipulating data and generating reports.
- If would you like to contribute to this guide simply make a Pull Request.
Distributed under the Creative Commons Attribution 4.0 International (CC BY 4.0) Public License.