HTML & CSS Crash Course Tutorial #1 - Introduction

Summary

本课程将带你系统学习HTML和CSS网页前端开发的基础知识,包括HTMl标签语法、CSS样式语法、网页开发环境搭建、开发调试工具使用方法等。通过动手实践的过程你将最终完成自己的第一个响应式网站Mario Club,这是一个现代简约风格的网站。本课程适合零基础的初学者。

Takeaways

• 🎉 这个课程是一个综合的HTML和CSS初学者友好课程，旨在用更现代的特性更新原有的教程。
• 👩‍💻 HTML（超文本标记语言）用于网页内容的结构化，如文本、图片和表单，通过HTML标签来实现。
• 🎨 CSS（层叠样式表）与HTML配合使用，用于样式化网页，让内容看起来更好。
• 🌐 课程将涵盖从基础到高级的内容，包括HTML5的新特性和响应式移动设计。
• 🛠️ 教程还包括如何在计算机上设置开发环境，以及如何创建第一个HTML网页和使用CSS美化它。
• 📚 对于初学者，课程将从HTML和CSS的基本概念讲起，无需先前的编码经验。
• 🚀 通过最终项目“Mario Club”将学到的所有内容整合在一起，展示一个简洁现代且响应式的网站。
• 🖥️ 强调了使用现代文本编辑器（如Visual Studio Code）和浏览器（推荐Google Chrome）的重要性，以及安装有用的扩展（如Live Server）。
• 💡 讲解了HTML文档的基本结构，包括doctype声明、head标签和body标签的用途。
• 🔍 展示了如何使用浏览器的开发者工具来检查和理解网页的HTML和CSS代码。

Q & A

为什么作者决定更新HTML和CSS系列课程？

作者认为原有的播放列表有些过时，大约4年未更新，因此决定更新课程以包含更多现代化的特性。

这门课程是为哪类学习者设计的？

这门课程是为完全初学者设计的，特别是那些对成为前端开发者感兴趣的新手。

HTML和CSS为什么要捆绑在一起教授？

HTML和CSS是密切相关的，一起教授可以更有效地帮助学习者掌握如何创建网页。

课程的最终项目是什么？

最终项目是一个名为“Mario Club”的现代简约网站，它展示了多种HTML和CSS特性，并且对移动屏幕和大屏幕都有良好的响应性。

HTML和CSS分别是什么？

HTML代表超文本标记语言，用于结构化网页上的内容，如文本、图片和表单等。CSS代表级联样式表，用于美化网页，定义内容的样式如颜色、字体大小等。

开发环境应该包含哪些基本组件？

开发环境应该包括一个好的文本编辑器和一个现代浏览器，用于编写代码和预览工作成果。

Visual Studio Code有哪些特点？

Visual Studio Code是免费的，适用于Windows和Mac，带有许多有用的包，可以简化编码过程。

如何在浏览器中预览HTML文件？

可以通过在文件资源管理器中双击HTML文件或使用本地开发服务器并通过HTTP协议来预览。

为什么使用Live Server包？

使用Live Server可以通过HTTP协议查看页面，并且每次文件保存时都能实现自动刷新，提高开发效率。

Google Chrome开发者工具有什么用途？

Google Chrome开发者工具可以帮助开发者检查和调试网页元素，理解网页是如何构建的，以及进行样式调整。

Outlines

00:00

🌐 开始学习 HTML 和 CSS

这一部分介绍了课程的目的，主要是为了更新和整合HTML和CSS的教程，使其更适合初学者。该课程将两者结合在一起，因为它们密切相关。课程目标是使学生能够快速掌握HTML和CSS，从而能够创建自己的网站。课程将涵盖基础知识，包括HTML和CSS是什么，如何设置开发环境，如何创建第一个HTML网页，并用CSS美化。还会讨论HTML5的新特性和响应式移动设计，最后通过一个名为'Mario Club'的网页项目将所学内容整合在一起。

05:03

🎨 HTML 和 CSS 的基本概念

这一部分详细介绍了HTML和CSS的基本概念。HTML（超文本标记语言）用于网页内容的结构化，例如文本、图片和表单，通过使用HTML标签来实现。而CSS（层叠样式表）则用于美化网页，定义网页的颜色、字体大小、布局等。讲解者将HTML比作建筑的结构，而CSS则像是装饰。通过展示HTML内容与和CSS应用后的对比，强调了CSS在网页设计中的重要性。

10:04

🔧 设置本地开发环境

这一部分指导学生如何建立本地开发环境，包括选择合适的文本编辑器和浏览器。讲解者推荐使用Visual Studio Code作为编码工具，并提供了其他编辑器的选项。强调了使用现代浏览器（如Google Chrome）的重要性，因为它提供了开发工具。演示了如何在Visual Studio Code中创建和打开项目文件夹，并介绍了如何使用扩展程序，如Live Server，以便在保存更改时自动刷新浏览器。

15:04

👩‍💻 编写和预览HTML代码

本部分讲述了如何开始编写HTML代码。首先介绍了doctype声明，然后是HTML、head和body标签的基本结构。讲解者演示了如何在body标签中添加内容，并在浏览器中预览。讨论了开发者工具的使用，特别是如何通过右键点击元素并选择'Inspect'来查看和了解网页元素。最后，讲解者强调了HTML的标签结构以及它们在网页中呈现内容的方式。

Keywords

💡HTML

超文本标记语言。用于在网页上结构化内容,如文本、图像和表单。包含不同的标签来表示不同类型的内容。HTML 提供了网站的基础结构。

💡标签

HTML 中的标签用于表示不同类型的内容,如段落、链接和图像。标签通常由开标签和闭标签组成。闭标签中包含一个斜杠。标签告诉浏览器应该如何显示内容。

💡CSS

层叠样式表。与 HTML 一起使用为网页添加样式和设计。允许自定义内容的颜色、字体、布局等。HTML 提供内容,CSS 提供样式。

💡文本编辑器

用于编写 HTML 和 CSS 代码的程序。比较流行的有 Visual Studio Code、Sublime 和 Atom 等。文本编辑器通常需要安装一些插件来提高开发效率。

💡浏览器

用于预览和浏览网页的程序。流行的浏览器包括 Chrome、Firefox 和 Safari。网页开发中通常使用 Chrome 浏览器并配合开发者工具来辅助开发。

💡开发者工具

浏览器自带的一组工具,可用于检查网页代码、调试问题等。右键点击页面元素并选择“检查”可以打开开发者工具并检查该元素的代码。

💡本地服务器

在自己计算机上运行的一个小型服务器,用于测试网页。比直接打开 HTML 文件更为方便,可以实时自动刷新预览。Visual Studio Code 中可以通过 Live Server 插件实现。

💡文件夹结构

将不同类型的文件分类存放,以保持项目的组织性。通常 HTML 页面会放在根目录,CSS 和 JavaScript 文件会放在 separate 的文件夹中。良好的文件夹结构有助于管理项目。

💡代码缩进

通过空格或 tab 键将代码进行整齐地缩进对齐。提高代码的可读性和易维护性。缩进需要保持一致。大多数文本编辑器会自动生成缩进。

💡HTTP

超文本传输协议。互联网传输数据使用的主要协议。使用 HTTP 协议访问网站,而不是 file 协议直接打开本地文件。本地服务器就是一个支持 HTTP 协议的小型服务器。

Highlights

HTML is a markup language to structure content on a web page and CSS styles web pages

The body tag contains visible page content and the head tag contains metadata

We can preview web pages in a browser using a local development server

Transcripts

hey young and welcome to your very first

step in becoming an HTML and CSS and

ninja ok the gang so I've decided to do

a complete update of my HTML and CSS

series and bundle them into one complete

beginner friendly course because I think

the old playlists are a bit out of date

now about 4 years old and I wanted to

rebuff them to include some more modern

features and I also want to keep this

channel really accessible to new

developers and I wanted to create a kind

of entry point a series for new front

end developers to come along and get the

basics the lowdown of HTML and CSS so if

you're a new web developer this is the

place to start so rather than do a whole

course for HTML and a whole separate

course for CSS I've bundled these two

together because they do go hand-in-hand

very much so this course is designed to

get you up and running with both of

these HTML and CSS in no time so that

pretty soon you can start making your

own awesome websites so that in this

course we're going to be working from

the ground up and I presume that you

don't have any or you have at least very

little experience with coding so we're

going to cover all of the basics from

the start what HTML and CSS actually are

and I'm also going to show you how to

set up a development environment on your

computer I'm going to show you how to

make your first HTML web page and also

how to make that web page look awesome

with CSS now we're also going to be

talking about newer more modern html5

features to bring your code up into the

present day and we're gonna be touching

our responsive mobile design as well and

then finally we're going to bundle

everything together that we've learned

to make a web project from scratch and

that project is gonna look something

like this it's called Mario Club and

features Mario over here and it's a nice

modern simple website uses loads of

different HTML features loads of

different CSS features as well and it's

also fully responsive so it looks pretty

good on mobile screens as well as larger

screens so we're going to be putting

everything together that we learn

throughout this course into this final

project over here so without further ado

let's dive

writing okay then so before we start to

code anything whatsoever I just want to

take a few minutes to talk about what

hTML actually is and also what CSS is

just so we've got a vague overview of

what these two things are before we dive

into the code so HTML first of all it

stands for hypertext markup language

HTML that's where we get the name from

and it's a markup language not a

programming language so we use HTML to

structure content on a web page things

like text images and forms and all that

kind of just and we do that by using

what's known as HTML tags now text

represent different types of contents or

information on a web page for example

we'd have a certain tag for an image a

certain tag for a form or paragraph text

etc now you might also hear these being

described as HTML elements but they are

pretty much one and the same thing now

if we take a look at some sample text we

can see some of them like the paragraph

tag they have an opening tag and a

closing tag with some information in

between them so that's the opening and

closing same with the anchor tag these

are four links opening and closing and

the closing tag has this forward slash

before the letter that represents that

tag now a lot of tags use this opening

and closing tag structure but some of

them just have one tag for example the

image tag right here now don't worry

about remembering all of these different

tags at the minute we're going to do all

of that later on I'm just giving you a

quick overview so imagine this is the

HTML content that makes up a part of a

web page if we were to view that in a

browser it could look something like

this so the paragraph text is rendered

at the top like that the link is right

here and the image is at the bottom so

when we view a web page in a browser

it's just an HTML file that we're

viewing so we use these different kinds

of tags inside the HTML file to tell the

browser what type of content we want

each part of the document to be and the

order that it should be in then the

browser renders that HTML content into a

viewable web page that we can browse

online so hTML is the core language that

provides the backbone of a website and

it's all to do with how we store

content using these different types of

tags now CSS is the second part of the

puzzle when it comes to building

websites on web pages and it stands for

cascading style sheets now we'll talk

about why it's called this later on but

essentially CSS is a separate language

that goes hand-in-hand with HTML and

what we do is you CSS to style our web

page and make them look even better

so HTML alone just structures the

content that we want to show on a web

page but CSS is what makes that content

look better so we've used CSS in

conjunction with an HTML file to tell

the browser things like what color

different bits of content on a page

should be or what font size the

different headings or paragraph text

should be whether something should be on

the left or the right of the page or

maybe what the background image of the

webpage should be so whereas hTML is

very much to do with providing the

actual content and structure to the

browser CSS then takes on the role of

styling that content so much like a

builder would form the structure of a

house a painter and decorator would then

come in and style it to make it look

nicer so imagine we had some HTML before

CSS applied to it might look like this

in the browser and then CSS applied to

it it would look like this in the

browser so much much nicer so these are

the two languages that we're going to be

looking at in depth in this course and

by the end you should be able to use

both of them to build your own

well-structured websites which look

awesome as well ok then gang so the

first thing we need to do before we

write any code is to set up a local

development environment to work with and

by that I generally mean just have a

good text editor to code in and a modern

browser to preview your working so

there's loads of different text editors

that you can use for web development and

which one you use is down to your

preference in your preference along

there is no right or wrong text editor

to use I like this one at the minute

visual studio code but I do flip between

different ones when I feel like it but

this one is completely free for Windows

or Mac and it comes with a load of nice

pack

as well that we can install to make

coding easier so that's what I'll be

using and if you want to follow along

exactly like I do and use the packages

that I do as well and I would advise you

to do that if you're a beginner then go

ahead and download this or right here to

get it you just need to go to code

visual studio comm the link is going to

be down below but if you don't want to

download this you could also use a

different text editor sublime is a

popular one which is also free well the

preview version is free and then it asks

you to buy it after a while so you can

get that right here at sublime text comp

the link to that is going to be down

below as well another good one is Atem I

used to use this but I found that it

started to get a bit slow on startup but

again it's a really nice clean text

editor that you can install packages for

so if you want to download that go to

attempt dots i/o and grab it right here

or if you prefer a no-frills approach

you could even use something like

notepad plus a plus I know a lot of

people that still use something like

that there's nothing wrong with this I

prefer to have all of the extras in a

text editor which is why I go for

something like this vs code so choose

your text editor doesn't really matter

which one for now they're all going to

work the same but I am going to be using

a couple of packages inside Visual

Studio code so again if you want to

follow along exactly with me make sure

you get this one or right here so

secondly you want a good modern browser

to preview all of your working I

personally think that Google Chrome is

the best one to developing and so

preview your work in so if you want to

download that go to google.com forward

slash Chrome it's also going to come

with a load of developer tools that

we're going to talk about later on as

well so again if you want to follow

along exactly with me make sure you

download this okay then so once you've

downloaded and installed your text

editor boot it up and it's going to look

something like this

this is visual studio code if you're

opening it for the first time then you

probably will see some kind of welcome

screen which you can cross off that's

fine if you're using a different text

editor it's going to look something like

this with a file tree on the left over

here and the coding window on the right

so what we need to do first of all

inside Visual Studio code is to open a

folder so let's open one I've already

created a folder nothing inside it so

I'm going to select that for now and we

should see that over here so this is the

welcome screen again I'm going to cross

that off and now we can start to create

files inside this folder so typically

when we open a folder inside Visual

Studio code like this that folder could

represent our project or website and

then all of our different files my HTML

and CSS would go inside this folder on

the Left overhead so the first thing I'm

going to do is create a new file now we

can do that in two ways

either click on this thing right here

this new file icon or right click and go

to new file and I'm going to call this

index dot HTML so when we create an HTML

page it has to end in this extension dot

HTML that's kind of defines it as an

HTML file now it's always a good idea as

well to call your homepage HTML file

index dot HTML and that's because when

you navigate to a website such as my

website com

it's going to look in the root directory

for an index dot HTML file and if it

exists it's going to serve that up to

the browser so this is kind of like the

default home page file name if you like

ok then so now we have our first HTML

page we can actually start to write some

HTML code inside it so again remember

this is just going to be a series of

tags inside this file and those tags are

represent different things now the first

tag we should always use is the doctype

tag and that defines this document as an

html5 document and tells the browser

this so it can render it correctly so to

do that open your angle brackets that's

how we open a tag or starter tag then we

want an exclamation mark and then doc

type and then HTML so this is a tag

called doctype and it's a very peculiar

type of tag it's probably the only tag

that starts with this exclamation mark

inside it and it basically just says

look this is an HTML type so always put

that at the start of your HTML files now

the net

thing we need to do is an HTML tag so

HTML like so and notice this whenever I

create a tag inside vs code then it

automatically creates the closing tag

for me which is nice so this HTML tag

right here this is kind of like the root

tag of our documents we have this at the

top then we have an HTML tag which

surrounds everything else now inside

here we also have a head tag so let's do

that and I'm going to come back to that

in a second but also a body tag

now the body tag everything inside this

this is the stuff that actually gets

rendered to the browser so the things

that we see in the browser now stuff

inside the head over here this is just

extra information about the website such

as metadata or a title that goes at the

top of a browser over here this thing

here at the top of the tab this is the

title so we can specify things like that

inside the head but none of this

actually gets rendered to the page

itself that we can see inside the

browser that all goes inside the body

tag so let's start with this head and

let's just create a title tag first of

all and remember this title is what

defines this stuff in the top so let's

call this learning HTML and save it and

now we want to preview this in a browser

so what we could do is right click over

here and we could go to reveal in

Explorer and then we get this window

over here if you double click on an HTML

file it's going to open that up in a

browser for us and we can see the path

to this HTML file now this is using the

file protocol and we can also use

something else called a local

development server so that we can view

this over an HTTP protocol which is what

we actually view websites on but I'll

show you that later for now we're just

previewing this HTML file over here in

the browser now there's nothing inside

the page just a blank canvas at the

minute but we do see this title at the

top learning HTML and that is coming

from here where we specify ok then so

that's the title now let's actually add

some content

the body the stuff that shows inside the

browser so what I'm gonna do is create

ap tag first of all oops not in capitals

so lowercase P now I want you to notice

another thing that I've been doing here

notice I've been indenting these tags

right here so I've not started them over

here and over here I've indented them

and that's a convention when you're

writing HTML files you don't have to

it's still gonna work exactly the same

if you do this however for readability

it's always better to indent like that

using tab and actually mvs code whenever

we enter down into a new tag it Auto

indents for us because that's what we're

meant to do okay

so inside this paragraph tag I'm gonna

say hello ninjas and I'm gonna save this

and then in the browser if we just

refresh we should see that right there

very small hole so I'm gonna zoom in so

we can see that hello ninjas right there

so right now if we want to make a change

and then preview it all we have to do is

just add something over here so I'll do

another P tag like so and then inside

I'll save my first web page and then I'm

going to save this first of all ctrl s

and that over here

I'll have to refresh to see them now I

mentioned before that we could use a

local development server to view this

over HTTP instead of the file protocol

now you might not know what that means

really but basically HTTP is the

protocol that we use to communicate with

servers to view websites now we don't

really need to know that much about it

at the time being but if we install a

package in vs code over here to spin up

a local development server it means we

can use that protocol and what it also

means is that when we save something

over here it's gonna live refresh it for

us automatically so that we don't have

to so it's much easier to save and

preview save and preview without having

to refresh the page so I'm going to show

you that package what you want to do is

click on this bottom icon down here for

the extensions in vs code and then you

want to search for this live server

package just up here so search for live

server like

now I've already got that installed so

if you click on it there should be an

install button right here instead of

uninstall and if you press that it's

going to install it to vs code for you

after it's installed it might prompt you

to restart vs code so do that and then

come back to your file now to get back

to the file tree over here just click on

the top icon over there now once that's

installed what you can do is right-click

anywhere inside an HTML file it has to

be an HTML file because that's what we

view in a browser and then we can go

down to open with live service so if I

click this then it's going to open up a

browser over here and now you can see

it's exactly the same content but this

time we're using an HTTP protocol and

we're serving this on this right here

this is otherwise known as localhost you

don't need to know the ins and out of

this just yet just know that we're using

now what's known as a local development

server and that's how simple it is so

now if we make a change so I could

change this to hello world and save that

I don't have to refresh over here it

automatically refreshes for me every

time we make a save to the file so

that's nice and that's how I like to

work now you don't have to use this

instead if you prefer to just open it up

like this how we did before that's

absolutely fine as well you'll just have

to keep on refreshing if you want to see

the page update okay so now we've

created this simple HTML file over here

and that is all there is to it really

it's just a series of different tags

that make up a web page now we're going

to see more tags later on but for now in

this video there's one more thing I'd

like to show you and that is how to

inspect an element inside the web page

so what I mean by this is right clicking

something and then going to inspect at

the bottom now when you do this it's

going to open up something that looks

like this on the right side of the page

so let me just zoom in and we can see

right here that we have our HTML outline

so it's showing us the HTML right here

ignore this this is being injected by

the live server package we

stalled but this right here this is our

HTML that we created so this whole thing

that opened up over here this is the

Google Chrome developer tools panel and

there's loads of different useful stuff

inside here that's going to help us to

develop websites and we're going to take

a deep dive into this and the different

useful things that it provides a later

on for now I just wanted to show you how

you could right-click an element over

here inspect it and that's going to show

you the code over here in the developer

tools panel for example if I open a new

tab now and go to the net ninja code at

UK and I'll right-click go to inspect

then I can see how this code is made so

if I'm ever wondering on a website how

they've done something or how they've

coded something I can just right-click

that element and I can see how they've

created that HTML code right here and

again I can use all of these different

features inside the developer tools to

kind of reverse engineer this website if

you like so again we're going to take a

look at this in a lot more depth later

on for now I just wanted to introduce

you to it okay they're my friends so

that is your introduction to this course

HTML and CSS and we've learned a few

things first of all we've seen that HTML

is a markup language to structure

content on a web page and I also said

that CSS was a language that we used to

style a web page and the two worked

together in tandem now we've also seen

how to use vs code to open a project

folder and create our first HTML file

we've talked about what tags are a

little and we've seen a couple of basic

ones in action and we also know that the

body tag is for visible page content and

the head tag is for page information

like the title finally we've seen how to

preview a web page in a browser either

by double-clicking on that HTML file in

the file explorer or by using a local

development server with a live reload so

next we'll dive deeper into the language

and we're going to talk more about all

of these different HTML tags that make

up a web page

you