Web Developer Bootcamp 2023 (tina的学习目录)

Section1: Course Orientation

The Course ChangeLog (I updated on 10/18/2023)

Course Coding Exercise Solutions

How to update code from VS Code to Github?

Section2: An Introduction to Web Development

Intro to the Internet, Web, Front End and Back End

Intro to HTML / CSS / JavaScript

Section3：HTML：The Essentials

• A useful resources link: MDN Web Docs (mozilla.org)

  如果想在mdn上搜索一个不知道的内容比如如何创建form，可以直接在edge或chrome上搜“html form mdn”

The Bold Element

The Paragraph Element

The Heading Elements

• How to see the underlying HTML code for a web page如何查看一个网页的前端代码?

  right click——>choose ”inspect”

  —>改变两个页面的排版方式：点第一行三个点里面的Dock Side

  —>想看具体页面每部分在code中的位置：点第一行最左边的工具（长方形加光标）

• How to duplicate one line in VS Code如何在VSCode中复制一行的代码至它的下方多次?

  Firstly, type “shift + alt” together(不要松手);

  Then, type “up/down”.

HTML Boilerplate

• 如何让VS CODE的一大串代码格式变好看？

  方法一：在想要改动的file中鼠标放在段落任意地方，同时按“shift+alt+F”

  方法二：同时按“ctrl+P”进入搜索栏，在上面输入“>format”找到并点击“Format Document”

The Ordered/Unordered List Elements

The Anchor Element

The Image Element

• 如何给html文件中的代码add comments？
  1. 选中需要变成comments的内容。
  2. 先按“ctrl”，再按“/”。
  3. 如果想把comments变回正常内容，同样的按键操作。

Section4: HTML: Next Steps & Semantics

Understand What is HTML5?

Block VS Inline Elements

<div> VS <span> elements

<hr><br><sup><sub> Elements

Entity Codes (Ref: Entity Code - A Clear and Quick Reference to HTML Entities Codes)

Semantic Elements

<main><nav><section><article><header><footer><aside><figure> <time>