current position:Home>Super hard core web front-end Xueba notes, go to work after learning!

Super hard core web front-end Xueba notes, go to work after learning!

2021-08-24 16:54:36 enoy

Articles and tutorials


  • Front end memoir | Front end notebook - Experience and summary recorded by a front-end blogger
  • Hasnode - Hashnode Is in your personal domain free The easiest way to create a developer blog for free and connect with readers through our global developer community !
  • - DEV Is a community of software developers , They get together to help each other .
  • Hackernoon - An independent technical media website

Must possess Chrome add-in

  • DailyDev - stay Chrome Get information about... In the default tag Dev The latest news from the community .
  • WhatFont - Find out what font the website uses .
  • ColorPick Eyedropper - Just put down your pen , You can know what color the website uses .
  • Wappalyzer - Know the technology stack of any website
  • Web Developer - The extension has a number of tools .
  • React Developer Tools - React The developer tool is Chrome DevTools Expand , For open source React JavaScript library . It allows you to check Chrome In developer tools React Component hierarchy .

Front end performance analysis tool

  • PageSpeed Insights - PageSpeed Insights Be able to generate actual performance reports of web pages for mobile devices and desktop devices , And can provide suggestions on how to improve the corresponding web pages .
  • Lighthouse - Lighthouse It's an open source automation tool , To improve the quality of network applications . You can think of it as a Chrome The extension program runs , Or run... From the command line . You are Lighthouse Provide a URL you want to review , It will run a series of tests on this page , Then generate a report on page performance .
  • Pingdom - Online website speed detection tool is a web page speed detection tool launched by a website monitoring service company , Help users find out the reasons that affect the speed of the website , It also gives a feasible scheme to improve the performance of web pages , It is very practical for users with a website .
  • - It's an open source Web Performance testing tools , To measure Web The overall performance of the website , Help developers and testers analyze the loading speed and rendering performance of web pages .
  • Calibre - Caliber Is a multi-functional Performance Monitoring Suite , Can help you monitor and audit the performance of the website . It also allows you to specify the location of the test server by , Manage simulated advertising preferences and even simulate mobile devices to simulate real-world conditions . It also allows you to set a budget , And help you keep your budget within your budget by providing you with performance degradation .
  • SpeedTracker - SpeedTracker Is a run in WebPageTest Tools above , Regular performance testing can be done on your website , And visually display the way of various performance indicators changing with time . This allows you to continuously evaluate the website , And see how the new features affect the performance of your site . You can also define the budget and send it by email and Slack Get alert .

VS Code must have an extension

  • Compile Hero - Compile Hero Is a simple and easy to use for one click compilation Less, Sass, Scss, Styl, TS, TSX, Jade, Pug or JS And other file editor tools .
  • NPM - This extension helps you manage Package.json And provide warnings when dependencies are not installed , It will also help with version control .
  • Prettier - Prettier Is a self righteous code formatter . It works by parsing the code and using its own rules ( Consider the maximum ) Reprint the code , To achieve a consistent style , And package code if necessary .
  • Rainbow brackets - By color coding each bracket set in the environment , You can easily find the missing tag .
  • VS Code big icon - Visually identify files by type by applying the appropriate set of icons , So as to organize the environment .
  • Placeholder image - Such as and Such services are very useful . Now? , You can do this directly in VS Code Add placeholder images to save time
  • Vetur - official VueJS Expand
  • ESLint - The extension uses the... Installed in the open workspace folder ESLint library .
  • Real time server - Start the development local server with real-time reload function , For static and dynamic pages .
  • Visual Studio IntelliCode - This extension moves the most relevant completion recommendations to the top .
  • Chrome The debugger - This extension allows you to from VS Code Internal debugging is at Chrome Running in the browser JavaScript Code .
  • Microsoft Edge The debugger - stay Microsoft Edge Debug in browser JavaScript Code
  • Firefox The debugger - stay Firefox In the debugging Web Application or browser extensions
  • Bracket Pair Colorizer 2 - Customizable extensions , Used to color matching brackets

VS Code subject

DOCS And a memo

  • MDN Web Docs - MDN Web Docs The website provides information about Open Web Technical information , Including websites and progressive Web Application's HTML,CSS and API.
  • DevDocs - Quick for developers , Offline and free document browser . In a Web Search in applications 100 Multiple documents .
  • DEVHINTS - A few memo sheets .
  • FLEX-Malven - CSS Flex Visual memo for layout .
  • GRID-Malven - CSS Visual cheat sheet with grid layout .

How to operate ?

about HTML and CSS

  • Layout Demo - Study CSS Page structure layout
  • freeCodeCamp - Study Web Free courses developed .
  • Flexbox Froggy - One that helps you learn CSS Flex The game of .
  • CSS skill -Flexbox - Flexbox Complete Guide .
  • Grid Garden - One study CSS Grid The game of .
  • CSS skill - A complete guide to the grid - CSS A comprehensive guide to the grid , Focus on all settings of the grid, parent container and grid elements .
  • Learn CSS Grid - Jonathan Suh Write a comprehensive guide , Can help you understand and learn CSS Grid Layout.
  • I can use - The latest browser support table , For desktop and mobile support Web The front end of the browser Web technology .
  • HTML Dog - Simple and clear .
  • Marksheet - Unlimited number of tutorials
  • ODIN project - Amazing way to learn .
  • CSS effect - CSS Animation .
  • Keyframes - Use the visual timeline editor to create basic or complex CSS @keyframe Animation .
  • Animista - Play ready to use CSS A collection of animations .
  • It's hard to surf the Internet - Friendly for complete beginners Web Development tutorial .
  • BEM - BEM Name memo .
  • Autoprefixer - Autoprefixer It's a PostCSS plug-in unit , Can parse your CSS And add the supplier prefix .
  • CSS formatter - On-line CSS formatter ,CSS Beautifier.
  • Place holder - How to use our placeholders . Just in our URL Specify the image size after , You will get a placeholder image .

On-line IDE, Editor

Image resources

  • Unsplash - Free pictures and photos .
  • Pexels - Free pictures . - Delete photo data - Before sharing photos on the Internet , First delete personal data from the photo .
  • LottieFiles - LottieFiles It's for -Lottie Designed Animation Collection - Gone are the days of annoying developers .
  • removebg - Delete image background .
  • Pixabay - Free pictures or videos .


  • Accessibility blog - in - Seven easy to implement guidelines - Guidelines for designing more accessible websites .
  • Accessibility memo - A practical method of general design , Make your website accessible to everyone / webapp.

Windows Terminal

YOUTUBE channel

Font and printing

  • Google typeface - The first resource for free and easy-to-use web Fonts .
  • FontPair - Font pairs can help designers make Google Fonts are paired together . Beautiful Google Font combination and pairing .
  • Fontjoy - Fontjoy Help designers choose the best font combination . Mix and match different fonts to achieve perfect matching .
  • Fonts Arena - Free fonts , A free alternative to advanced Fonts , For your research results .


  • unDraw - Browse to find illustrations that fit your needs , Then click download .
  • freepik - Free graphics resources .
  • DrawKit - Hand drawn vector illustrations and icon resources , Perfect for your next project .


  • Font Awesome - Vector icons and social logos .
  • Ionicons - Open source and by MIT Licensed icon package .
  • icons8 - With PNG and SVG Download free icons .
  • flaticon - SVG,PSD,PNG,EPS Format or Icon Font Free Vector icon .
  • Simple icons - 1463 Free from popular brands SVG Icon .

Front end framework learning resources



Why React?

ES2015 +


State management

# Redux


# Webpack

Build something


  • Quotes REST API - They say So There are more than one million quotes in the database , This is the largest such database in the world . Quotes API Provides a simple way to access data .
  • OpenWeather - come from OpenWeatherMap Simple , Fast , Free weather API, You can access the current weather data , Every hour ,5 Days and 16 The weather forecast for days .
  • public API - For developers 1000 A variety of free public and open REST API A summary list of .
  • SWAPI - 《 Star Wars: 》 API.
  • JSONPlaceholder - Free use of forged online REST API Testing and prototyping .


  • Node.js course - Net Ninja Of Node.js Crash course tutorial .
  • You don't know Node.js
  • Node Art - An introductory tutorial covering the basics .
  • NodeSchool - You can also have your own interactive self-help workshops .
  • Node Pattern - About Node.js A short book on code and network patterns .
  • Study Node - An advanced training course , Used to learn how to use Node.js,Express and MongoDB Building applications .
  • Node Way - There are for writing maintainable modules , Scalable applications and easy to read code Node.js A complete philosophy of best practices and guiding principles .
  • Express.js Safety tips - How to save and protect applications .
  • Awesome Nodejs - Pleasant Node.js Software packages and resources .
  • nodebestpractices - A lot of build Node Best practices for applications . Important for large projects .

Study GIT

  • Git manual - Git,GitHub,DVCS, Oh my god ! understand Git All terms and basics of .
  • Memo sheet - Keep these convenient ! The reference table covers Git command , function ,SVN Migration and bash. Provide multiple languages .
  • Study Git Branch - Directly from Web The browser tries Git command . Have some features you're about to become a favorite : Branch , add to , Submit , Merge , Restore , choose , To reset !
  • visualization Git - Look under the hood ! Use the free browsing mode and some built scenarios , Explore Git How commands affect Web The structure of the repository in the browser .
  • Git-It - You have downloaded Git, Now? ? take Git-It Download to your computer , You will get a hands-on tutorial , This tutorial will teach you to use commands from a real repository directly in your local environment Git.

Practical cases

Preparing for an interview ( problem )

copyright notice
author[enoy],Please bring the original link to reprint, thank you.

Random recommended