前端漫游指南

希望本文可以帮助到你更快的达成 入门级前端 的成就

这里是其他方案,请选择适合你的

• 视频教程
  • 翁恺 HTML & CSS & JS 入门
• 其他方案
  • 菜鸟编程
  • freecodecamp
  • w3c

下面将循序渐进的列出学习的链接和在线训练,资料多为图文,易放弃..

走进 HTML & CSS 8h

• 熟悉元素及语义化 1.5h
  • HTML元素参考
  • 语义化HTML
• 熟悉css元素及选择器 0.5h
  • css元素参考
  • css选择器参考
• 完成 HTML5 & CSS 系列训练 (二选一)
  • freecodecamp
  • w3c
• 实现基本布局 3h
  • 圣杯布局 0.5h
  • 手机端常见布局 0.5h
    这里你可能需要去重温css 布局基础 flex 布局
    

• 模仿一些网站

  • 百度

    你可以通过右键另存获取你需要的图标
    当然我建议你按下 F12 选择 Network 再筛选 Img ,F5 刷新后可以看到所有的图片请求
    这里你可能会看到一张含有所有小图标的精灵图

扩展

加*为必须完成项

• * 使用IconFont
• * Web开发入门

• * autoprefixer

• CSS进阶 Sass

• 开发效率 Emmet
• CSS Grid

了解 JavaScript n day

• 了解 JavsScript
• 廖雪峰 JavaScript
• ES6 入门
• 跨域
• jQ原生写法 你可能不需要jQuery
• axios

  进阶

• 阮一峰
• Vue

了解 Markdown 0.5h

• 什么是 Markdown
• Markdown 语法

• Markdown 语法

• 加入JavaScript脚本让它与你交互

  发布到网上

• (付费) 主机服务和域名,通过FTP将你的文件上传至服务器
• (免费) github pages & gitee pages
• (免费) CodePen & JSBin
• (动手)致电运营商获取公网IP,设置路由器设置端口映射、DMZ主机等

  当你访问发布在网上得页面时发生了什么

• Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？

  当你在浏览器输入你网页得万维网地址后
  浏览器从本地Host查找服务器地址，如果没有找到，则一层一层请求域名服务器
  服务器收到请求，给你返回网页文件
  浏览器渲染收到得文件，呈现页面

升级

Git

Chrome Developer tools

Pug & Gulp

Node & Npm

Webpack

EsLint

MoCha

算法

Canvas