MIT web dev 学习笔记 1

2025-05-23

本笔记主要记录MIT Web Development Crash Course课程的笔记，本节主要记录的是Monday, january 6, 2025的课程内容，包括kickoff, git basic, HTML/CSS intro 等内容。

1 Kickoff

一些信息：

  • No, the competition is not mandatory. But it doesn’t hurt to submit your website into the competition!
  • We’ll have live help during workshops where you can add yourself to the queue on weblab.is/q.
  • You can find the questions doc at weblab.is/questions, where you can ask questions anonymously during class.
  • You can find the old questions doc at weblab.is/oldquestions
  • Student hub for shortlinks is at weblab.is/info
  • Don’t have a team yet? Stay after lecture today for a team-finding mixer!

然而考虑到旁听/非mit的学生，没有对应的邮箱，所以这些内容都无法访问，作业则需要从GitHub上寻找：Here

关于课程安排可以从Here查看schedule

该课程将从前端到后端教你全过程（全栈）

1.1 访问网站

image-20250523153945968

实际收到的文件包括HTML文件和CSS文件,js文件(前端三件套)

第一周的目标就是构建一个catbook的website，作业内容应该对应于GitHub的here，实例网页weblab.is/example

1.2 课程的要求

  • Dynamic website supported by a back-end

  • Personalized experience based on user accounts

  • Minimum security requirements fulfilled

  • Original design and implementation

  • Use Git on a web.lab Github repo

一些不能的做的事情：

  • Use anything like Drupal, Wordpress or Squarespace

  • Use any part of a previous project

  • Outsource your development. Hire minions.

  • Evil

1.3 评判的标准

   
Functionality technical components of your core features
Usability ease-of-use of the website
Aesthetics look-and-feel of the website
Concept Execution applicability of the solution to the problem

2 Git Basics

如何代码的协作在现在是一个密切需要解决的问题

最基本需要考虑的点在于：代码的独立拷贝，修改内容的比较以及解决冲突的问题，版本的控制

这些，正是git试图解决的问题

git通过跟踪修改来实现记录版本

一些命令行的基本操作

操作 内容
ls 列出文件夹内的内容
cd 进入指定文件夹
mkdir 创建文件夹

初始化，创建一个git仓库：

git init

(需要先cd到对应的文件夹下)

当代码的许多文件发生了改变的时候，当我们想打包这些修改并提交到git的修改记录时，我们可以用git add实现

image-20250523161400265

使用git status则可以检查git的提交记录

当使用git add之后，修改的内容就被存储到了staging area缓存区，只有我们git commit之后才会进入仓库的修改

例如： 此处的-m后的内容提交的一些信息

image-20250523161719063

此时再看git log:

image-20250523161839841

注意到上面的commit后面的一长串的东西就是git的commit id，后续我们要用什么的时候，就要用到这个commit id

但还面临一个问题，那就是你现在修改了很多的内容，但工作要求你先修好原始内容上的bug，你需要从你现在的这条工作线条回原先的工作线，这应该如何解决呢？

在git里，用的是branch分支的方式：

image-20250523162251778

其中每一个节点是一个操作，那么看到上面的三个操作都是从last home page这个地方分支出来的，不同的人做不同的修改，git也会记录这些分支。

我们可以使用git branch查看现在有哪些分支：

image-20250523162448137

看到目前只有一个master

那么可以通过git checkout来创建新的分支：

image-20250523162605995

此时就创造了一个test的branch并从master切换到了test

接下来就可以在这个branch上进行更改

image-20250523163012392

分支产生并修改之后应该如何把这些修改重新放回主分支呢

先查看分支git branch，然后切回主分支git checkout main/master最后再merge：git merge + branch name

最终的仓库结构就成了：

image-20250523163511844

但上述的内容都仅仅是在本地实现的，需要多人异地同步那么就需要一个远端的服务，一般是用GitHub，这又该怎么实现呢：

首先，代码是在远程服务器存在一份，每个人都先要获得的是整个仓库的一份copy：

image-20250523163713325

这一般使用git clone

然后在本地进行修改和commit：

image-20250523163750840

最后需要把commit在本地git的内容提交到远程需要使用git push:

image-20250523163828835

而其他人想要对比自己的版本和远程服务器上的版本的区别则应该使用git fetch:

image-20250523163909460

从远端服务器更新别人的修改到自己本地的git则使用git pull

git reset --hard 则会清楚所有未提交的暂存（直接重置所有的add内容）

3 HTML 简介

image-20250523180610023

HTML是超文本文件，他就像一个网页的骨架，而CSS则是股价之上的皮肉和服饰

对于理解HTML的main idea来说，可以把他理解为一堆相邻的盒子/容器

例如这个图片中的每一个红色的框框就是一个容器，这些容器组合而成了整个网页：

image-20250523180838239

接下来我们看看代码的一个简单示例：

image-20250523180918897

一般对于html文件来说一般都会包含一个<!DOCTYPE html>意在告诉浏览器你使用的是最新的html

然后继续看上面的代码我们不难发现一些opening tag 和一些closing tag，一般都是<>和</>的形式，那么这俩者之间的就是整个容器了

那么对于上面的html文件来说，很容易的发现整个html容器里又有两个子容器分别是head容器和body容器

由于html是一堆容器，所以一般而言，以下的容器还没结束又开始一个新容器是不可以的：

image-20250523181310914

<html>是整个文件的根容器，是包裹整个html所有内容的容器，而<head>容器一般存储一些元数据，他们往往不会直接显示在网页，但是会有一些其他的辅助作用，<body>则包含所有网页里会出现的内容。

一些常用的通用标签如下：

image-20250523181537888

一般不会直接使用这些tag而是会有一些属性需要赋予：

<tagname attribute="value">
</tagname>

例如对于链接来说，其html一般是：

<a herf="links here" str to print>
</a>

除此之外还有图像等：

image-20250523181946162

一般对于图片来说我们不会往图片容器里添加内容，所以出于简化可以：

image-20250523182045631

这里需要注意相对路径，除此之外是如果图像无法正常显示那么可以添加一些替代的提示文本：

image-20250523182208863

除此之外还有list相关的tag：

image-20250523182529947

例如：

image-20250523182523382

而对于<div>和<span>两类标签来说，他们的区别在于是否换行

image-20250523182712417

为什么要用<div>呢？

因为这可以帮助我们很好的一次性设置几个tag的格式

对于学习html来说，我们并不需要记住所有的标签，遇到需要的合适的我们可以Google或者看 mdn web docs 网站

一般而言其实不建议滥用div，而是一般选用对应用途下的对应tag

So: Don’t just use <div>.Use MDN to find the element you need!

4 CSS 简介

CSS =a list of description

以下是一个css的基本单元

image-20250523183514187

这里的div就是我们选择需要装饰的html容器

上述的css作用于html如下所示：

image-20250523183752605

image-20250523183801210

有时候我们想对div里面的内容进行更精细的调控，那么我们可以对div添加类：

<div class="info">Info</div>

那么CSS在设置的时候只需要：

.info{
color:red;
font-family:Arial;
font-size:24pt;
}

就可以只修改对应的div，另一种方式是使用id：

image-20250523184109557

那么这两者有什么区别呢？

  1. 一个html的div只能有一个id，但可以有很多类
  2. 一个id只能对应一个对应唯一的一个容器

image-20250523184254929

对于CSS是有一定层级的：

image-20250523184344672

对应的从下往上越来越特定

所以即便两个设置不一样，那么也会优先按照更高特定的设置结果来进行设置

那么当我们设置了css后，我们需要在html中引入中国css：

<head>
    <title>Title!</title>
    <link rel="stylesheet"  
          href="style.css" />
  </head>

对于一些具体作用的块的css一般以u开头命名：

.u-textCenter {
  text-align: center;
}

8pt system:

padding在8以及其除以2的时候较为和谐

image-20250524004607477

关于flex

image-20250524005402403