超硬核 Web 前端学霸笔记，学完就去找工做！

时间  2021-08-12
标签 javascript css html 前端 vue java node python react webpack 栏目 HTML 繁體版
原文   原文链接

文章和教程

博客

  • 前端回忆录 | 前端笔记本 - 一个前端博主记录的心得和总结
  • Hasnode - Hashnode 是在您的我的域 free 上免费建立开发者博客并经过咱们的全球开发者社区与读者联系的最简单方法！ 👩‍💻👨‍💻
  • Dev.to - DEV 是一个由软件开发人员组成的社区，他们聚在一块儿互相帮助。
  • Hackernoon - 一个独立的技术媒体网站

必须具备 Chrome 扩展程序

  • DailyDev - 在 Chrome 默认标签中获取有关 Dev 社区的最新消息。
  • WhatFont - 了解网站使用的是哪一种字体。
  • ColorPick Eyedropper - 只需放下笔，便可知道网站使用的是哪一种颜色。
  • Wappalyzer - 了解任何网站的技术栈
  • Web Developer - 该扩展程序拥有大量工具。
  • React Developer Tools - React 开发者工具是 Chrome DevTools 扩展，用于开源 React JavaScript 库。它使您能够检查 Chrome 开发者工具中的 React 组件层次结构。

前端性能分析工具

  • PageSpeed Insights - PageSpeed Insights 可以针对移动设备和桌面设备生成网页的实际性能报告，并可以提供关于如何改进相应网页的建议。
  • Lighthouse - Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 您能够将其做为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，而后生成一个有关页面性能的报告。
  • Pingdom - 在线网站速度检测工具是由一家网站监测服务公司推出的网页速度检测工具，帮助用户找出影响网站速度的缘由，并给出改善网页性能的可行性方案，对于有网站的用户来讲很是实用。
  • Sitespeed.io - Sitespeed.io 是一款开源的 Web 性能测试工具，用来衡量 Web 网站的综合性能，帮助开发和测试人员分析网页的加载速度和渲染性能。
  • Calibre - Caliber 是一款多功能的性能监控套件，可帮助你监控和审核网站的性能。 它还容许你经过指定测试服务器的位置，管理模拟的广告首选项甚至模拟移动设备来模拟现实条件。 它还容许你设置预算，并经过为你提供性能降低来帮助你将预算保持在预算以内。
  • SpeedTracker - SpeedTracker 是一个运行在 WebPageTest 之上的工具，可在你的网站上进行按期的性能测试，并直观显示各类性能指标随时间变化的方式。 这使你能够不断评估网站，并查看新功能如何影响网站的性能。 你还能够定义预算并经过电子邮件和 Slack 获取警报。

VS 代码必须具备扩展名

  • Compile Hero - Compile Hero 是一款简单易上手用于一键编译 Less, Sass, Scss, Styl, TS, TSX, Jade, Pug 或 JS 等文件的编辑器工具。
  • NPM - 此扩展名可帮助您管理 Package.json 并在未安装依赖项时提供警告，也会有所帮助与版本控制。
  • Prettier - Prettier 是一种自觉得是的代码格式化程序。它经过解析代码并使用本身的规则（考虑最大行长）从新打印代码，从而实现一致的样式，并在必要时包装代码。
  • 彩虹括号 - 经过对环境中设置的每一个支架进行颜色编码，能够轻松找到丢失的标签。
  • VS 代码大图标 - 经过应用适当的图标集来按类型直观地识别文件，从而组织环境。
  • 占位符图像 - 诸如 unsplash.it 和 placehold.it 之类的服务很是有用。如今，您能够经过直接在 VS Code 中添加占位符图像来节省时间
  • Vetur - 官方 VueJS 扩展
  • ESLint - 该扩展程序使用安装在打开的工做区文件夹中的 ESLint 库。
  • 实时服务器 - 启动具备实时从新加载功能的开发本地服务器，用于静态和动态页面。
  • Visual Studio IntelliCode - 此扩展程序会将最相关的完成建议移到顶部。
  • Chrome 调试器 - 此扩展程序可以让您从 VS Code 内部调试在 Chrome 浏览器中运行的 JavaScript 代码。
  • Microsoft Edge 调试器 - 在 Microsoft Edge 浏览器中调试 JavaScript 代码
  • Firefox 调试器 - 在 Firefox 中调试 Web 应用程序或浏览器扩展
  • Bracket Pair Colorizer 2 - 可自定义的扩展程序，用于为匹配的支架着色

VS 代码主题

  • One Dark Pro - Atom 的标志性 Visual Studio Code 的“ One Dark”主题
  • 材料主题 - Visual Studio Code 如今最史诗般的主题
  • 地平线主题 - 一个精美 ​​ 的 Visual Studio 代码双重主题

DOCS 和备忘单 😁

  • MDN Web Docs - MDN Web Docs 网站提供有关 Open Web 技术的信息，包括网站和渐进式 Web 应用程序的 HTML，CSS 和 API。
  • DevDocs - 针对开发人员的快速，离线和免费的文档浏览器。在一个 Web 应用程序中搜索 100 多个文档。
  • DEVHINTS - 少许的备忘单。
  • FLEX-Malven - CSS Flex 布局的可视备忘单。
  • GRID-Malven - CSS 网格布局的可视备忘单。

🌐 如何运做？

对于 HTML 和 CSS

  • Layout Demo - 学习 CSS 页面结构布局
  • freeCodeCamp - 学习 Web 开发的免费课程。
  • Flexbox Froggy - 一款可帮助您学习 CSS Flex 的游戏。
  • CSS 技巧-Flexbox - Flexbox 完整指南。
  • Grid Garden - 一个学习 CSS Grid 的游戏。
  • CSS 技巧-网格的完整指南 - CSS 网格的全面指南，着重于网格的全部设置父容器和网格子元素。
  • Learn CSS Grid - Jonathan Suh 撰写的综合指南，可帮助您了解和学习 CSS Grid Layout。
  • 我可使用 - 最新的浏览器支持表，用于支持台式机和移动 Web 浏览器上的前端 Web 技术。
  • HTML Dog - 简单明了。
  • Marksheet - 无限数量的教程
  • ODIN 项目 - 惊人的学习方式。
  • CSS 效果 - CSS 动画。
  • 关键帧 - 使用可视时间线编辑器建立基本或复杂的 CSS @keyframe 动画。
  • Animista - 玩准备好使用 CSS 动画的集合。
  • 难以上网 - 面向完整初学者的友好 Web 开发教程。
  • BEM - BEM 命名备忘单。
  • Autoprefixer - Autoprefixer 是一个 PostCSS 插件，可解析您的 CSS 并添加供应商前缀。
  • CSS 格式化程序 - 在线 CSS 格式化程序，CSS Beautifier。
  • 占位符 - 如何使用咱们的占位符。只需在咱们的 URL 后指定图像尺寸，您将得到一个占位符图像。

📝 在线 IDE，编辑器

📷 图像资源

  • Unsplash - 免费图片和照片。
  • Pexels - 免费的图片。 -删除照片数据-在互联网上共享照片以前，先从照片中删除我的数据。
  • LottieFiles - LottieFiles 是专为-Lottie 设计的动画集合-烦扰开发人员的日子已经一去不复返了。
  • removebg - 删除图像背景。
  • Pixabay - 免费图片或视频。

👓 可及性

Windows 的终端

📺YOUTUBE 频道

🖋 字体和印刷术

  • Google 字体 - 免费和易于使用的网络字体的第一资源。
  • FontPair - 字体对可帮助设计师将 Google 字体配对在一块儿。漂亮的 Google 字体组合和配对。
  • Fontjoy - Fontjoy 帮助设计师选择最佳的字体组合。混合并匹配不一样的字体以实现完美的配对。
  • Fonts Arena - 免费字体，高级字体的免费替代品，针对您的研究成果。

🎨 插图

  • unDraw - 浏览以找到适合您须要的插图，而后单击下载。
  • freepik - 免费的图形资源。
  • DrawKit - 手绘矢量插图和图标资源，很是适合您的下一个项目。

💧 图标

  • Font Awesome - 矢量图标和社交徽标。
  • Ionicons - 开源且由 MIT 许可的图标包。
  • icons8 - 以 PNG 和 SVG 下载免费图标。
  • flaticon - SVG，PSD，PNG，EPS 格式或图标字体的免费矢量图标。
  • 简单图标 - 1463 个流行品牌的免费 SVG 图标。

前端框架学习资源

⚡JAVASCRIPT

⚡ React

为何要 React？

ES2015 +

路由

状态管理

Redux

捆绑包

Webpack

创建东西

🎮API

  • Quotes REST API - 他们说 So 在数据库中有超过一百万条报价，这是世界上最大的此类数据库。 Quotes API 提供了一种简单的方法来访问数据。
  • OpenWeather - 来自 OpenWeatherMap 的简单，快速，免费的天气 API，您能够访问当前的天气数据，每小时，5 天和 16 天的天气预报。
  • 公共 API - 面向开发人员的 1000 多种免费公共和开放 REST API 的汇总列表。
  • SWAPI - 《星球大战》 API。
  • JSONPlaceholder - 无偿使用伪造的在线 REST API 进行测试和原型制做。

⚡NODEJS

  • Node.js 教程 - Net Ninja 的 Node.js 崩溃课程教程。
  • 您不知道 Node.js
  • Node 的艺术 - 涵盖基础知识的入门教程。
  • NodeSchool - 您也能够本身进行互动的自助式讲习班。
  • Node 模式 - 有关与 Node.js 相关的代码和网络模式的简短书籍。
  • 学习 Node - 一个高级培训课程，用于学习如何使用 Node.js，Express 和 MongoDB 构建应用。
  • Node Way - 存在用于编写可维护模块，可伸缩应用程序和易于阅读的代码的 Node.js 最佳实践和指导原则的完整哲学。
  • Express.js 安全提示 - 如何保存和保护应用程序。
  • Awesome Nodejs - 使人愉快的 Node.js 软件包和资源。
  • nodebestpractices - 大量的构建 Node 应用程序的最佳实践。对于大型项目很重要。

😐 学习 GIT

  • Git 手册 - Git，GitHub，DVCS，天哪！了解 Git 的全部术语和基础知识。
  • 备忘单 - 保持这些方便！参考表涵盖了 Git 命令，功能，SVN 迁移和 bash。提供多种语言。
  • 学习 Git 分支 - 直接从 Web 浏览器尝试 Git 命令。拥有一些您即将成为收藏夹的功能：分支，添加，提交，合并，还原，挑选，从新设置！
  • 可视化 Git - 看看引擎盖下！使用免费浏览模式和一些构建的场景，探索 Git 命令如何影响 Web 浏览器中存储库的结构。
  • Git-It - 您已经下载了 Git，如今呢？将 Git-It 下载到您的计算机上，您将得到一个动手教程，该教程将教您直接在本地环境中使用真实存储库上的命令来使用 Git。

实战案例

准备面试（问题）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程