新手入门编程最好的姿势:跟老手,做点小东西

小白变怪兽!

为有志于成为 全栈 JS 开发者 的朋友录制的 入门级 HTML+CSS
免费视频课程,托管在好奇猫网站

JS/Web 开发入门不易
学会在浏览器中使用 HTML/CSS 是第一步

JS 正在吞噬软件开发的各个领域。但是如果一上来就上 Nodejs+Reactjs 全栈 JS 开发,新手肯定蒙圈。所以我觉得入门编程的最佳路径, 就是先把浏览器玩转,也就是先把 HTML/CSS 做页面这个功夫练成,然后再去学习如何用 JS 操作页面元素。注意,这里各位看到的是《小白变怪兽》第二版,第一版在这里

请跟随 Peter 一起,进入 Web 开发的奇幻旅程。

Peter

谁是 peter ?

Peter 是本课程的作者,是一个从 2006 年就开始全职编程的全栈 JS 开发者, 他在网上一般叫 happypeter。 现在他是一个自由职业者/JS开发者/技术作者/视频课程录制者/自媒体人/JS讲师。 他目前住在美丽的秦皇岛,会有部分时间在这里讲线下JS开发课程。 同时他还带领一个五个人的小团队( happypeter 工作室),做 Web 开发的外包项目。他也喜欢写博客。 但是花掉他最多时间的事情是录制视频,包括好奇猫上的收费课程以及好多视频网上的每周免费视频分享。 Peter 从2010年开始从事编程教学,线下课前后带过14个班,300多位学习者。

他发布过的视频课程有《驾驭命令行怪兽》 《搬进 Github》《 Webpack React 鼹鼠》《 Atom 爱上 JS 》 等等。 欢迎添加 Peter 的微信:happypeter1983 ,朋友圈中可以看到更多的他生产的内容的更新。

可以学到什么?


课程的核心内容是 HTML 和 CSS,也就是超文本标注语言和层叠样式表.

课程一共有10 章 覆盖 HTML 和 CSS 和基础知识和核心技巧。下面有详细的课表,重点包括下面的内容:

  • 如何用 Github 的免费服务来托管页面,获得一个真正的网站
  • Atom 编辑器的安装和使用
  • Chrome 开发者工具的使用会占据比较大的篇幅
  • CSS 中重要但是难懂的知识点:float ,position ...
  • 一个 HTML5 页面的基本结构
  • CSS 属性,单位,属性值的分类
  • 响应式网站开发,Media Query,临界点选择
WebPack ES6 ESLint npm

课程适合观众?


计算机科学零基础,想要想要转行学习编程的朋友们。Peter 在制作课程的过程中,不假定观众有任何背景知识。

  • 其他语言的开发者,对 Web 开发不熟悉,想要学习 H5/JS ,也可通过本课程来入门。
  • 想要参加 Peter 在 好奇猫 上的其他课程,但是基础薄弱的同学可以把本课程作为预习内容。
  • 原来用过一些模板搭建过简单的页面,现在想要深入学习一下 CSS 的朋友们。
  • 正在找工作,考虑要不要报个培训班转行学编程的同学们。
  • 不想成为程序员,但是对程序员每天都干什么感到好奇的各位。也欢迎浏览一下本课程,也许您一不小心就学会了呢!

想自己判断一下课程是否适合?

可以快速浏览一下下面的课程目录💰

课程由几十个短视频组成, 视频比起直播或者线下授课,优势就在于每个人都可以根据自己的节奏去学习,可以快进也可以回放。

短小的视频配合清晰的文字目录和文字稿,可以让观众快速查找到自己想看的或者想跳过的内容。

协议
算法
缓存

什么是协议?什么是算法?缓存?没入门就想放弃?

课程中只有最必要的基础知识的讲解,然后马上跟上精美实用的案例。
没有那些把您吓蒙圈的术语!

10章内容
36个视频
3.8小时

每个小视频都有独立的页面和独立的链接,方便大家引用和讨论

课程目录

每个小视频都尽量只瞄准一个小的知识点来讲,多个小知识点逐渐构成知识网络。每一个小节的代码都会单独存放在一个文件夹中,便于单独拿出来学。 每一节视频都配有文字稿,写明内容梗概和案例代码链接。注意:下面的目录不是链接,请移步好奇猫观看课程。

    第一章
    热身准备

  1. 安装 Chrome 浏览器和 Atom 编辑器

    04:39#1
  2. 创造自己的第一个网页

    05:33#2
  3. 使用 css 来美化网页

    07:10#3
  4. 第二章
    CSS 核心技巧

  5. 块级和行内

    04:25#4
  6. 盒模型

    06:20#5
  7. class 和 id 的妙用

    07:55#6
  8. 第三章
    Github 页面托管

  9. 注册 Github 账号

    06:08#7
  10. 上传代码到项目仓库

    07:41#8
  11. Github Pages 服务

    06:08#9
  12. 第四章
    浮动和清除浮动

  13. Float 浮动

    10:38#10
  14. Clear 清除浮动

    04:32#11
  15. 清除浮动的实际意义展示

    10:04#12
  16. clearfix 方案

    06:59#13
  17. 解释一下 clearfix

    6:20#14
  18. 第五章
    CSS 的 postion 属性

  19. 摆放元素到任意位置

    07:38#15
  20. 元素粘在固定位置

    00:52#16
  21. 第六章
    常见属性值和单位

  22. CSS 的数据类型

    03:35#17
  23. 像素 px

    02:11#18
  24. 相对长度

    07:34#19
  25. 字体 font

    08:47#20
  26. 第七章
    移动版案例开发:banner 部分

  27. Viewport 禁用缩放

    06:21#21
  28. 设置背景 background

    05:38#22
  29. 伪元素 :before

    08:14#23
  30. 自定制字体 @font-face

    12:27#24
  31. 动画 animation

    05:35#25
  32. 第八章
    移动版案例开发:其他

  33. 文字样式层次

    06:44#26
  34. 使用 SVG 图标

    08:07#27
  35. CSS 三角形

    02:53#28
  36. 第九章
    响应式案例开发:媒介查询

  37. 响应式开发宏观思路

    06:27#29
  38. 媒介查询 media-query

    05:50#30
  39. 如何选择临界点?

    11:23#31
  40. 响应式图片

    05:02#32
  41. 完成响应式页面

    03:28#33
  42. 第十章
    进一步学习

  43. Javascript 和其他

    03:22#34
  44. 使用 AgentWho 来科学上网

    05:06#35
  45. 线下培训服务

    08:13#36

赞助商

AgentWho.rocks

  • 想用 Google/Youtube ?AgentWho 让您马上拥有流畅的网络体验

CodingGirlsClub

  • 帮助女性成为有自学编程能力的人

鞠躬致谢

赞助商的经济支持,让 Peter 可以静心制作一门免费课程。有这样志同道合的好友一直在,Peter 感觉很温暖。

谢谢各位!

案例代码在哪里?

常见问题

课程是免费的吗?

嗯,是的。好奇猫 上的课程很多是收费的,但是《小白变怪兽》会永久免费。

课程的组成形式是?

分多章,每章有多个小节。一个小节最核心的内容是一个经过精心剪辑,没有废话的一个编程视频,每个视频都配有一篇文字内容,列出视频要点和参考链接。

我要做 JS 开发者,为何要我学 HTML+CSS ?

在 Web 开发领域,说白了就是做网站的时候,有三样东西是缺一不可的,HTML 负责内容,CSS 负责样式,JS 负责行为。如果不学习 HTML+CSS 那么 JS 就失去了操作对象了,学起来就不直观。即使作为类似 React Native 开发者,开发原生应用,虽然脱离了浏览器,但是一样会用到 HTML5 知识。

我想学 Nodejs 本课程是否有用?

简单的答案,有用。如果用 Nodejs 开发后台,那么是基本不会去写 HTML/CSS 这些代码的。 但是 Nodejs 开发者需要的技能比较综合,如何初学者能在浏览器环境下, 先用操作 HTML/CSS 的方式,把 JS 编程的基础知识,例如什么是函数, 什么是变量先学会,然后再去学 Nodejs 后端开发,就会比较容易了。同时, 也很难想象一个后台开发者对前端一无所知。

课程中有没有讲到 Git 版本控制,Atom/Sublime 编辑器的使用,HTTP 基础知识,以及 JS 编程?

除了 Atom 编辑器有一些技巧演示,其他的基本没涉及。因为本课程的目标是让大家用最小的力气, 做出网页作品,以便建立起对 Web 开发的宏观认识。 当然,问题中提到的这些基础知识和工具,都是进一步学习所必须的。 好奇猫上基本都开了专门的课程去讲解。

我还有其他问题?

欢迎添加 Peter 的微信:happypeter1983 ,和他取得联系。