{"id":15728524,"url":"https://github.com/mikeroyal/html-css-guide","last_synced_at":"2025-03-13T02:31:21.698Z","repository":{"id":51281987,"uuid":"301200930","full_name":"mikeroyal/HTML-CSS-Guide","owner":"mikeroyal","description":"HTML/CSS Guide ","archived":false,"fork":false,"pushed_at":"2022-01-03T22:06:50.000Z","size":29,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-10T23:11:43.990Z","etag":null,"topics":["css","css3","html","html-css","html5"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikeroyal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-04T18:40:27.000Z","updated_at":"2023-12-01T16:07:50.000Z","dependencies_parsed_at":"2022-08-28T02:23:59.949Z","dependency_job_id":null,"html_url":"https://github.com/mikeroyal/HTML-CSS-Guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeroyal%2FHTML-CSS-Guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeroyal%2FHTML-CSS-Guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeroyal%2FHTML-CSS-Guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeroyal%2FHTML-CSS-Guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikeroyal","download_url":"https://codeload.github.com/mikeroyal/HTML-CSS-Guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221333950,"owners_count":16799714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","html","html-css","html5"],"created_at":"2024-10-03T23:03:21.210Z","updated_at":"2024-10-24T17:22:00.779Z","avatar_url":"https://github.com/mikeroyal.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/45159366/95024326-33fb3080-0637-11eb-9ecc-156776139eb4.png\"\u003e\n  \u003cbr /\u003e\n  HTML/CSS Guide\n\u003c/h1\u003e\n\n#### A guide covering the HTML/CSS languages including the applications and tools that will make you a better and more efficient HTML/CSS developer.\n\n**Note: You can easily convert this markdown file to a PDF in [VSCode](https://code.visualstudio.com/) using this handy extension [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf).**\n \n \u003cp align=\"center\"\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/45159366/123170959-fbeb8600-d42f-11eb-972b-a0b836e6070b.png\"\u003e\n  \u003cbr /\u003e\n\u003c/p\u003e\n\n# HTML/CSS Learning Resources\n\n[HTML (HyperText Markup Language)](https://developer.mozilla.org/en-US/docs/Web/HTML) 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.\n\n[Cascading Style Sheets (CSS)](https://developer.mozilla.org/en-US/docs/Web/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.\n\n[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)\n\n[Airbnb CSS / Sass Style Guide](https://github.com/airbnb/css)\n\n[HTML Styles CSS](https://www.w3schools.com/html/html_css.asp)\n\n[CSS Tutorial](https://www.w3schools.com/Css/)\n\n[Microsoft Certified Solutions Associate (MCSA): Web Applications](https://docs.microsoft.com/en-us/learn/certifications/mcsa-web-applications-certification)\n\n[Intro to HTML/CSS: Making webpages by Khanacademy](https://www.khanacademy.org/computing/computer-programming/html-css)\n\n[Intro to HTML and CSS by Udacity](https://www.udacity.com/course/intro-to-html-and-css--ud001)\n\n[Learn to style HTML using CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS)\n\n[The HTML and CSS Workshop](https://www.packtpub.com/product/the-html-and-css-workshop/9781838824532)\n\n[Modern HTML \u0026 CSS From The Beginning (Including Sass) by Udemy](https://www.udemy.com/course/modern-html-css-from-the-beginning/)\n\n[Using Glitch for Developer Relations](https://glitch.dev)\n\n# HTML/CSS Tools and Frameworks\n\n[WebStorm](https://www.jetbrains.com/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](https://angular.io/), [React](https://reactjs.org/), [Vue.js](https://vuejs.org/), [Ionic](https://ionicframework.com/), [Apache Cordova](https://cordova.apache.org/), [React Native](https://reactnative.dev/), [Node.js](https://nodejs.org/), [Meteor](https://www.meteor.com/#!), and [Electron](https://www.electronjs.org/)).\n\n[Codeanywhere](https://codeanywhere.com/) 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.\n\n[Adobe Brackets](https://github.com/adobe/brackets) is a modern open-source code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript.\n\n[Adobe TypeKit](https://fonts.adobe.com/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.\n\n[Ultimate CSS Gradient Generator](https://www.colorzilla.com/gradient-editor/) is a powerful Photoshop-like CSS gradient editor from [ColorZilla](https://www.colorzilla.com).\n\n[PostCSS](https://postcss.org) 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.\n\n[PurgeCSS](https://purgecss.com/) is a tool to remove unused CSS in your project.\n\n[Tailwind UI](https://tailwindcss.com/) 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.\n\n[Sass(Syntactically Awesome Style Sheets)](https://sass-lang.com/) is a professional grade CSS extension language.\n\n[HTML KickStart](https://github.com/joshuagatcke/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.\n\n[Mercury](https://github.com/jejacks0n/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.\n\n[Maquetta](https://github.com/maqetta/maqetta) is a WYSIWYG visual page editor for drawing out user interfaces using drag/drop assembly. Maqetta supports both desktop and mobile user interfaces.\n\n[Initializr](https://www.initializr.com/) is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate.\n\n[Radi](https://radiapp.com/) is a tool designed from the ground up to help you create content that will take full advantage of HTML5 features.\n\n[Onsen UI](https://onsen.io/) is an open source framework that makes it easy to create native-feeling Progressive Web Apps (PWAs) and hybrid apps. Based on [Web Components](https://webcomponents.org/), and provides bindings for Angular 1, 2, React and Vue.js.\n\n[Framework7](https://framework7.io/) 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.\n\n[Gauge.js](https://github.com/bernii/gauge.js/) is a native and cool looking animated JavaScript/CoffeScript gauge.\n\n[SproutCore](https://sproutcore.com/) is an open-source framework for building blazingly fast, innovative user experiences on the web.\n\n[Tumult Hype](https://tumult.com/) 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.\n\n[CSS Gradient](https://cssgradient.io/) is a happy little website and free tool that lets you create a gradient background for websites.\n\n[Glitch](https://glitch.com) makes easier to build fast, full-stack web apps in your browser for free.\n\n[CSS Optimizer](https://www.csstidyonline.com) is an online tool to clean, compress, and optimize your CSS code.\n\n[Sciter](https://github.com/c-smile/sciter-sdk) is an embeddable HTML/CSS/scripting engine, Windows, MacOS and Linux.\n\n[Flexy](https://vladocar.github.io/flexy/) is minimal CSS framework made with Flex.\n\n[Simple CSS](https://www.hostm.com/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.\n\n[Conditional-CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules) 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.\n\n[Kotatsu](https://github.com/Yomguithereal/kotatsu) is a straightforward CLI tool aiming either at running node.js scripts or serving JavaScript/TypeScript web applications in a modern environment.\n\n[AWK](https://awk.js.org/) is a scripting language used for manipulating data and generating reports.\n\n\n## Contribute\n\n- [x] If would you like to contribute to this guide simply make a [Pull Request](https://github.com/mikeroyal/HMTL-CSS-Guide/pulls).\n\n\n## License\n\nDistributed under the [Creative Commons Attribution 4.0 International (CC BY 4.0) Public License](https://creativecommons.org/licenses/by/4.0/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikeroyal%2Fhtml-css-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikeroyal%2Fhtml-css-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikeroyal%2Fhtml-css-guide/lists"}