Introduction to Web Development

Introduction

编程入门基础课 课程内容包括：

• HTML
• CSS

课程内容

1. HTML&CSS Part 1 - HTML

   1. 什么是 HTML
   2. HTML 的基本结构
   3. HTML 的基本元素
   4. HTML 的基本属性
   5. HTML 的基本语法
   6. 如何写一个规范的 HTML
   7. HTML 的基本标签
   8. HTML 的基本表单
   9. HTML 的基本表格
   10. HTML 的基本列表
   11. HTML 的基本图像
   12. HTML 的基本媒体
   13. HTML5 更新

2. HTML&CSS Part 2 - CSS

3. HTML&CSS Part 3 - advanced HTML&CSS

课前准备

1. 浏览器 (课堂上会使用 Chrome)

   • Chrome
   • Firefox 练习 CSS 时可以使用
   • Safari

   chrome 下载地址：https://www.google.com/chrome/

2. 编辑器

   • Visual Studio Code

   visual studio code 下载地址：https://code.visualstudio.com/

3. GitHub 账号 (第一节课不需要, 请在 tutorial 1 之前注册)

   • GitHub

   GitHub 注册可以阅读： https://docs.github.com/zh/get-started/signing-up-for-github/signing-up-for-a-new-github-account

4. Git (尝试)

   • Git

   Git 下载地址：https://git-scm.com/downloads

5. GitHub Desktop (非必须)

   • GitHub Desktop

   GitHub Desktop 下载地址：https://desktop.github.com/

课程安排

1. HTML&CSS Part 1 - HTML
2. HTML&CSS Part 2 - CSS
3. HTML&CSS Part 3 - advanced HTML&CSS

课程资料

• 预习资料

  • HTML 教程 https://www.w3schools.com/html/default.asp https://developer.mozilla.org/en-US/docs/Learn/HTML

  • CSS 教程 https://www.w3schools.com/css/default.asp https://developer.mozilla.org/en-US/docs/Learn/CSS

• 阅读资料

  • HTML element
    https://en.wikipedia.org/wiki/HTML_element

  • HTML latest standard https://html.spec.whatwg.org/multipage

  • CSS latest standard https://www.w3.org/TR/css-2018/

  • 中文版参考资料 https://www.w3schools.cn/

  • HTML/CSS 开发规范指南 https://github.com/australiaitgroup/html-css-guide

• 工具

  • 免费图片资源

    • https://unsplash.com/
    • https://www.pexels.com/
    • https://favicon.io/
    • https://icons8.com/

  • CSS 颜色选择器

    • https://www.w3schools.com/colors/colors_picker.asp
    • https://www.colorzilla.com/gradient-editor/
    • https://htmlcolorcodes.com/
    • https://coolors.co/

  • CSS 选择器

    • https://www.w3schools.com/cssref/css_selectors.asp
    • https://flukeout.github.io/

  • CSS validator

    • https://jigsaw.w3.org/css-validator/

  • HTML validator

    • https://validator.w3.org/

  • CSS 代码格式化

    • https://www.freeformatter.com/css-beautifier.html

  • CSS 小工具

    • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    • https://css-tricks.com/snippets/csscomplete-guide-grid/
    • https://cssarrowplease.com/

  • Visual Studio Code Extension

    • Live server
    • Prettier
    • CSS Peek
    • HTML CSS Support
    • HTML Snippets
    • HTML Boilerplate
    • Auto Rename Tag
    • Auto Close Tag
    • Auto Comment Blocks
    • Auto Import
    • Image preview
    • Rainbow indent
    • Color Highlight
    • Color Info
    • Color Picker
    • Colorize

  • CSS 代码生成器

    • https://cssgradient.io/
    • https://css3generator.com/
    • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    • https://css-tricks.com/snippets/css/-
    • complete-guide-grid/

  • 不同浏览器的兼容性

    • https://caniuse.com/

  • 网页设计工具

    • Canva
    • Wix

  • HTML & CSS 练习工具

    • w3schools
    • freeCodeCamp

  • 游戏

    • https://flexboxfroggy.com/
    • https://cssgridgarden.com/
    • https://codepip.com/games/

  • fonts

    • https://fonts.google.com/
    • https://fonts.adobe.com/
    • https://www.fontsquirrel.com/
    • https://www.dafont.com/

  • flexbox

    • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    • https://flexboxfroggy.com/
    • https://www.flexboxdefense.com/
    • https://www.flexboxpatterns.com/home

课程作业

• Tutorial 1 建立个人网站 repo: https://github.com/jessieyu1/intro-2-web-development/tree/main/web-dveloper-protfolio