search
HomeWeb Front-endH5 Tutorial20 documents and guides for front-end developers (2)

At the beginning of this week, you may want to calm down and learn something new, or improve your ability in a special computer language or technology.

In April, I put together a collection of useful docs and Guides (some useful documentation and guides) are packaged together, and that is a very popular post. Since then, I have collected a few more. Please enjoy!

  1. Adobe Web Platform Team(Adobe Web Platform Team)

## The newly designed Adobe The web platform of the Web Platform site has a lot of information and examples of new technologies. Includes SVG content, CSS The content of Regions, the content of Filters, the content of Web Extensions and other content. Many of the new standards they produced were adopted by the Adobe team Added to the Reference Manual, so the site lists some that you can click on to link to the Reference Manual and code examples.

20 documents and guides for front-end developers (2)

 2. Flexbox Cheatsheet Cheatsheet (Flexbox (flexible layout box) reference manual)

Joni Trythall's reference manual is based on multiple reference manuals and can help you understand Flexbox (flexible layout box). It's a flowchart decision tree that covers different aspects of Flexbox, so just by glancing at this diagram you can visualize everything you know about Flexbox. It can be used on the page as a PNG image or as a full-size PDF file.

20 documents and guides for front-end developers (2)

3. Flexy Boxes

It It is where Flebox (retractable layout box) is displayed and corresponding code can be generated. I love all the additional options on this one. There is a help description below each function, and you can also choose to use RTL writing mode to generate old code, and you can also view only the standard CSS version of the code without prefixes.

RTL introduction link address: http://baike.sogou.com/v4890574.htm?fromTitle=RTL

20 documents and guides for front-end developers (2)

 

4. Grid by Example

It is a resource-rich document created by Rachel Andrew that covers CSS Grid Layout Available examples of Module (CSS Grid Layout Module). Includes many relevant external links and lists the different parts of the manual covered, with visual examples.

20 documents and guides for front-end developers (2)

 

5. CSS Guidelines## Harry Roberts, whose goal is to "provide useful advice and guidance for rationally writing manageable and scalable CSS code." There's a lot of content here to suit different CSS developer levels.

20 documents and guides for front-end developers (2) 

6. Foundation 5 Cheat Sheet

## It is only one page (albeit a very long page) reference site to quickly see how class names are used in different parts of the popular ZURB front-end framework. I like that it includes examples sections directly on the page, with the necessary predefined classes listed next to each section.

## 

7. Cheetyr20 documents and guides for front-end developers (2)

 “It’s a handy manual and A collection of shortcuts that can be used to improve the work efficiency of designers and developers. "This project is still ongoing, but currently the site includes searchable CSS manuals, Git manuals, Vim manuals, Photoshop manuals, and Illustrator manuals. and InDesign Manual.

 

8. keyCod.es20 documents and guides for front-end developers (2)

A simple and fast manual, Helps you get the correct key values ​​for different keys on your keyboard. If you use event.keyCode or event.which in your script to determine which key was pressed by the user, this manual will come in handy sooner or later.

20 documents and guides for front-end developers (2)


##  9. AngularJS Style Guide(AngularJS Style Guide)

 “Its starting point is to provide convergence for AngularJS development teams through best practices.” It actually has a lot of documentation, covering more than 20 categories of AngularJS syntax.

20 documents and guides for front-end developers (2)


# 

10. Poor Man's Styleguide

"It is an emergency front-end style guide that can be copied directly and pasted into your CMS project." It provides all the differences in HTML and Markdown The code of the element, and all styles are displayed on the page.

Markdown introduction link address: http://baike.sogou.com/v7868944.htm?fromTitle=markdown

20 documents and guides for front-end developers (2)

 

11. Web Fundamentals(Web Basics)

It is the "currently developed best practice" for Google developers . It covers many different areas, including multi-strategy layouts and forms, and it's even partially profitable.

20 documents and guides for front-end developers (2)

 

12. CSS PRE(CSS preprocessing)

 One copy "One-stop manual" for comparing different CSS preprocessors. It includes a blog section, a dashboard, and a collection of conversion tools from Less, Sass, and Stylus.

The link address of Less’s introduction: http://lesscss.cn/

The link address of Sass’s introduction: http://baike. sogou.com/v73912368.htm?fromTitle=SASs

Link address introduced by Stylus: http://blog.fens.me/nodejs-stylus-css/

20 documents and guides for front-end developers (2)20 documents and guides for front-end developers (2)

 

 13. GitHub Cheat Sheet(GitHub Reference Manual)

 “It is A list of some of the cool features of Git and GitHub." Even if you are an advanced Git/GitHub user, you will clearly find something here that you have never seen before.

20 documents and guides for front-end developers (2)

 

14. HTML Vocabulary(HTML Vocabulary)

 At the end The documents that appear in the collection are similar to the "CSS Vocabulary", which focuses on different parts of HTML.

20 documents and guides for front-end developers (2)## 

15. iOS Human Interface Guidelines

 It is available for free in the iTunes store. It's mainly for iOS It is for app developers, but it also contains discussions on some commonly used UI design principles, which may be of some use to web platform developers or designers. Following design principles is very helpful in building responsive web-based sites, and it can make the native apps you make more usable.

20 documents and guides for front-end developers (2) 

16. HTML5 Cheat Sheet(HTML5 Reference Manual)

 It It is a reference manual for beautifully designed HTML5 tags. If you want to have a handy copy, it can be printed out as a PNG file or as a PDF file.

## 20 documents and guides for front-end developers (2)17. jQuery Coding Standards & Best Practices(jQuery Coding Standards & Best Practices)

It is a collection of best practices for developers writing jQuery. You may not agree with everything described, but you will undoubtedly find some suggestions worth thinking about.

20 documents and guides for front-end developers (2)

 18. HTML5 Game Engines(HTML5 game engine)

 It Really good. It compares different libraries for creating HTML5-based games. Each entry comes with extensive descriptions, cost (if any), filter tags, and there's even user star ratings and reviews on the page similar to Amazon's.

20 documents and guides for front-end developers (2)

## 19. You Might Not Need jQuery(You may not need jQuery)

You may have seen this before, as it was quite popular when it came out. it's a lot of vanilla An overview of JavaScript, equivalent to various jQuery methods. But later in the documentation there will be comments from experienced jQuery developers who will point out why you shouldn't abandon jQuery so quickly.

Vanilla Chinese community link address: http://vanillaforums.cn/

20 documents and guides for front-end developers (2)

## 20. Airbnb JavaScript Style Guide (Airbnb JavaScript Style Guide)

It is a style guide produced by the website developer of a popular international hotel. You don't have to follow some of the above, but like other style guides, you may be able to pick out some elements and apply them to your own work.

20 documents and guides for front-end developers (2)


Summarize

If you have written a tool or style guide for mastering some aspect of a front-end language or technology, please share it in the comment area, and maybe I will add it to a future article.

 

20 documents and guides for front-end developers (1)

The above is the detailed content of 20 documents and guides for front-end developers (2). For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Building Blocks of H5 Code: Key Elements and Their PurposeThe Building Blocks of H5 Code: Key Elements and Their PurposeApr 23, 2025 am 12:09 AM

Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.

HTML5 and H5: Understanding the Common UsageHTML5 and H5: Understanding the Common UsageApr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

HTML5: The Building Blocks of the Modern Web (H5)HTML5: The Building Blocks of the Modern Web (H5)Apr 21, 2025 am 12:05 AM

HTML5 is the latest version of the Hypertext Markup Language, standardized by W3C. HTML5 introduces new semantic tags, multimedia support and form enhancements, improving web structure, user experience and SEO effects. HTML5 introduces new semantic tags, such as, ,, etc., to make the web page structure clearer and the SEO effect better. HTML5 supports multimedia elements and no third-party plug-ins are required, improving user experience and loading speed. HTML5 enhances form functions and introduces new input types such as, etc., which improves user experience and form verification efficiency.

H5 Code: Writing Clean and Efficient HTML5H5 Code: Writing Clean and Efficient HTML5Apr 20, 2025 am 12:06 AM

How to write clean and efficient HTML5 code? The answer is to avoid common mistakes by semanticizing tags, structured code, performance optimization and avoiding common mistakes. 1. Use semantic tags such as, etc. to improve code readability and SEO effect. 2. Keep the code structured and readable, using appropriate indentation and comments. 3. Optimize performance by reducing unnecessary tags, using CDN and compressing code. 4. Avoid common mistakes, such as the tag not closed, and ensure the validity of the code.

H5: How It Enhances User Experience on the WebH5: How It Enhances User Experience on the WebApr 19, 2025 am 12:08 AM

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

Deconstructing H5 Code: Tags, Elements, and AttributesDeconstructing H5 Code: Tags, Elements, and AttributesApr 18, 2025 am 12:06 AM

HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.

Understanding H5 Code: The Fundamentals of HTML5Understanding H5 Code: The Fundamentals of HTML5Apr 17, 2025 am 12:08 AM

HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.

H5 Code: Best Practices for Web DevelopersH5 Code: Best Practices for Web DevelopersApr 16, 2025 am 12:14 AM

Best practices for H5 code include: 1. Use correct DOCTYPE declarations and character encoding; 2. Use semantic tags; 3. Reduce HTTP requests; 4. Use asynchronous loading; 5. Optimize images. These practices can improve the efficiency, maintainability and user experience of web pages.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version