HTML & CSS Crash Course Tutorial #1 - Introduction

Net Ninja
9 Jul 201919:59

Summary

TLDRThe video introduces HTML and CSS for beginners. It explains that HTML provides structure and content to web pages using tags, while CSS styles web page content to enhance visual appeal. Viewers are guided on setting up a coding environment with a text editor like Visual Studio Code and a browser like Chrome. Basic HTML tags like head, body, title, paragraphs are demonstrated to create a simple web page. The video previews web pages either by double-clicking HTML files or using a local development server for live reloading. It concludes by inspecting web page elements with Chrome developer tools to reveal underlying HTML code.

Takeaways

  • 😀 HTML is used to structure content on web pages using tags
  • 👍 CSS styles web page content and works together with HTML
  • 💻 VS Code is a good free text editor for web development
  • 📄 The index.html file is usually the homepage
  • 🏠 The <body> tag contains visible page content
  • i️ The <head> tag contains metadata like the page <title>
  • 🔍 Browser developer tools help inspect page code
  • 🎥 Live server auto-refreshes pages when files are saved
  • 🗒️ HTML tags often have opening and closing tags
  • ⛑️ The <!DOCTYPE html> declaration identifies the document type

Q & A

  • What does HTML stand for?

    -HTML stands for Hypertext Markup Language.

  • What is the difference between a markup language and a programming language?

    -A markup language like HTML is used to structure content on a web page, while a programming language contains logic and instructions. HTML uses tags to define content, while a programming language uses code and functions.

  • What is inside the HTML head tag?

    -The HTML head tag contains information about the web page, such as the title and metadata. The head content does not get rendered in the browser, only the body content is displayed.

  • What file extension should HTML files use?

    -HTML files should use the .html file extension. The index.html file is commonly used as the default home page.

  • What are some benefits of using a local development server?

    -A local development server allows you to view pages over HTTP instead of from a file. It also provides live reloading so pages automatically refresh when changes are saved.

  • How do you view the HTML code that constructs a website?

    -You can right click on a web page element and select 'Inspect' to view the HTML code in the browser's developer tools panel.

  • What is the purpose of CSS with HTML?

    -CSS stands for Cascading Style Sheets. It is used together with HTML to style and visually format the layout and appearance of web page content.

  • What tag surrounds all other HTML tags?

    -The html tag is the root tag that surrounds all other HTML tags.

  • Should HTML tags be indented?

    -Indenting HTML tags is not required but is considered a best practice for readability and organization.

  • What is the first tag that should be used in an HTML file?

    -The doctype tag should be the first tag used which identifies the document as HTML.

Outlines

00:00

😀 Introducing HTML and CSS

The first paragraph introduces the HTML and CSS course, stating it will be a beginner-friendly course updating old material to include modern web development features. The goal is to provide an entry point for new front-end developers to learn HTML and CSS basics to start building websites.

05:03

😃 Explaining HTML and CSS

The second paragraph explains what HTML and CSS are - HTML provides structure and content using tags, CSS provides styling to make content look better. Together they create nicely formatted web pages rendered by the browser from HTML documents.

10:04

👨‍💻 Setting up the development environment

The third paragraph discusses setting up a development environment using a code editor like VS Code and a browser like Chrome. It shows how to create an HTML file, add tags, preview it in the browser, and use helpful extensions like Live Server.

15:04

😎 Adding content and inspecting elements

The fourth paragraph continues by adding paragraph tags and content to the HTML body which renders in the browser. It also introduces developer tools to inspect page elements and see their HTML code to understand how websites are built.

Mindmap

Keywords

💡HTML

HTML stands for Hypertext Markup Language. It is used to structure and organize content on a webpage using markup tags. HTML provides the backbone for webpages by defining the content that gets displayed. The video introduces HTML tags like 'p', 'head', 'body' etc to demonstrate how to create basic webpage content.

💡CSS

CSS stands for Cascading Style Sheets. It is used together with HTML to style and visually enhance the appearance of webpages. While HTML structures the content, CSS handles presentational aspects like colors, fonts, layouts etc. The video shows how CSS takes a simple HTML page and makes it visually appealing.

💡Tags

Tags refer to the HTML elements that structure content on a webpage. Tags consist of an opening and closing tag with content in between. Some tags like images have a single self-closing tag. Tags seen in the video include 'p', 'head', 'body', 'title' etc. Correct tag usage is key for browser rendering.

💡Text Editor

A text editor software is required to write HTML and CSS code. Popular free choices mentioned in video are Visual Studio Code, Sublime Text, Atom and Notepad++. The video advises Visual Studio Code for beginners as it has helpful coding packages.

💡Local Development Server

A local development server allows previewing pages over HTTP protocol instead of using the File protocol. The video shows using the Live Server extension in VSCode to setup a local dev server for live reloading during coding. This streamlines editing and previewing pages.

💡Browser

An internet browser like Chrome is needed to preview the HTML pages created. Browser takes the HTML code and processes it to render an actual visual webpage. Browser developer tools mentioned in video help in inspecting page elements and debugging code.

💡Folder Structure

Keeping all code files organized within a folder structure project is good practice. VSCode can open a folder to represent the website project, with separate HTML, CSS files inside. Common homepage name is index.html.

💡Indentation

Properly indenting nested HTML tags as shown in video improves code readability and is standard practice. VSCode auto-indents tags but indenting should be manual for other editors. Consistent indentation is key for complex layouts.

💡Metadata

The HTML head tag holds metadata - informational data about the page. This includes the title tag specified in video to set browser-tab title text. Metadata is not visible on the actual page rendered.

💡DOM

DOM stands for Document Object Model. It is the structured representation of the HTML elements created by the browser when it processes the code. Inspecting page elements in Browser Devtools shows the generated DOM.

Highlights

HTML stands for Hypertext Markup Language and is used to structure web page content

CSS stands for Cascading Style Sheets and is used to style web page content

The <doctype> tag defines the document as HTML5

The <html> tag is the root tag that surrounds all other tags

The <head> tag contains metadata and information about the page

The <body> tag contains the visible page content

Indenting HTML tags makes the code more readable

The Live Server extension auto-refreshes browser on file saves

Right-clicking an element and selecting Inspect shows the HTML

The browser Developer Tools allow inspecting website code

HTML provides structure and content using tags

CSS styles HTML content to enhance visual presentation

<body> contains visible content, <head> contains metadata

Can preview pages by opening HTML files directly

Live development server auto-refreshes on saves for easy testing

Transcripts

play00:00

hey young and welcome to your very first

play00:01

step in becoming an HTML and CSS and

play00:04

ninja ok the gang so I've decided to do

play00:12

a complete update of my HTML and CSS

play00:15

series and bundle them into one complete

play00:18

beginner friendly course because I think

play00:21

the old playlists are a bit out of date

play00:23

now about 4 years old and I wanted to

play00:25

rebuff them to include some more modern

play00:27

features and I also want to keep this

play00:29

channel really accessible to new

play00:31

developers and I wanted to create a kind

play00:33

of entry point a series for new front

play00:35

end developers to come along and get the

play00:37

basics the lowdown of HTML and CSS so if

play00:41

you're a new web developer this is the

play00:43

place to start so rather than do a whole

play00:46

course for HTML and a whole separate

play00:48

course for CSS I've bundled these two

play00:50

together because they do go hand-in-hand

play00:52

very much so this course is designed to

play00:55

get you up and running with both of

play00:56

these HTML and CSS in no time so that

play01:00

pretty soon you can start making your

play01:01

own awesome websites so that in this

play01:04

course we're going to be working from

play01:06

the ground up and I presume that you

play01:07

don't have any or you have at least very

play01:10

little experience with coding so we're

play01:12

going to cover all of the basics from

play01:14

the start what HTML and CSS actually are

play01:17

and I'm also going to show you how to

play01:18

set up a development environment on your

play01:21

computer I'm going to show you how to

play01:23

make your first HTML web page and also

play01:25

how to make that web page look awesome

play01:27

with CSS now we're also going to be

play01:30

talking about newer more modern html5

play01:33

features to bring your code up into the

play01:35

present day and we're gonna be touching

play01:37

our responsive mobile design as well and

play01:39

then finally we're going to bundle

play01:40

everything together that we've learned

play01:42

to make a web project from scratch and

play01:46

that project is gonna look something

play01:48

like this it's called Mario Club and

play01:50

features Mario over here and it's a nice

play01:53

modern simple website uses loads of

play01:55

different HTML features loads of

play01:57

different CSS features as well and it's

play01:59

also fully responsive so it looks pretty

play02:02

good on mobile screens as well as larger

play02:04

screens so we're going to be putting

play02:06

everything together that we learn

play02:07

throughout this course into this final

play02:09

project over here so without further ado

play02:12

let's dive

play02:13

writing okay then so before we start to

play02:15

code anything whatsoever I just want to

play02:17

take a few minutes to talk about what

play02:19

hTML actually is and also what CSS is

play02:22

just so we've got a vague overview of

play02:25

what these two things are before we dive

play02:26

into the code so HTML first of all it

play02:30

stands for hypertext markup language

play02:32

HTML that's where we get the name from

play02:35

and it's a markup language not a

play02:37

programming language so we use HTML to

play02:40

structure content on a web page things

play02:43

like text images and forms and all that

play02:45

kind of just and we do that by using

play02:47

what's known as HTML tags now text

play02:51

represent different types of contents or

play02:53

information on a web page for example

play02:54

we'd have a certain tag for an image a

play02:57

certain tag for a form or paragraph text

play02:59

etc now you might also hear these being

play03:02

described as HTML elements but they are

play03:04

pretty much one and the same thing now

play03:07

if we take a look at some sample text we

play03:09

can see some of them like the paragraph

play03:11

tag they have an opening tag and a

play03:13

closing tag with some information in

play03:15

between them so that's the opening and

play03:18

closing same with the anchor tag these

play03:20

are four links opening and closing and

play03:22

the closing tag has this forward slash

play03:23

before the letter that represents that

play03:25

tag now a lot of tags use this opening

play03:29

and closing tag structure but some of

play03:31

them just have one tag for example the

play03:34

image tag right here now don't worry

play03:36

about remembering all of these different

play03:38

tags at the minute we're going to do all

play03:39

of that later on I'm just giving you a

play03:41

quick overview so imagine this is the

play03:44

HTML content that makes up a part of a

play03:46

web page if we were to view that in a

play03:48

browser it could look something like

play03:50

this so the paragraph text is rendered

play03:53

at the top like that the link is right

play03:55

here and the image is at the bottom so

play03:58

when we view a web page in a browser

play04:00

it's just an HTML file that we're

play04:02

viewing so we use these different kinds

play04:05

of tags inside the HTML file to tell the

play04:07

browser what type of content we want

play04:10

each part of the document to be and the

play04:12

order that it should be in then the

play04:14

browser renders that HTML content into a

play04:16

viewable web page that we can browse

play04:18

online so hTML is the core language that

play04:22

provides the backbone of a website and

play04:24

it's all to do with how we store

play04:26

content using these different types of

play04:28

tags now CSS is the second part of the

play04:32

puzzle when it comes to building

play04:33

websites on web pages and it stands for

play04:36

cascading style sheets now we'll talk

play04:38

about why it's called this later on but

play04:41

essentially CSS is a separate language

play04:44

that goes hand-in-hand with HTML and

play04:47

what we do is you CSS to style our web

play04:50

page and make them look even better

play04:52

so HTML alone just structures the

play04:55

content that we want to show on a web

play04:57

page but CSS is what makes that content

play04:59

look better so we've used CSS in

play05:02

conjunction with an HTML file to tell

play05:04

the browser things like what color

play05:06

different bits of content on a page

play05:08

should be or what font size the

play05:10

different headings or paragraph text

play05:12

should be whether something should be on

play05:14

the left or the right of the page or

play05:16

maybe what the background image of the

play05:18

webpage should be so whereas hTML is

play05:21

very much to do with providing the

play05:22

actual content and structure to the

play05:24

browser CSS then takes on the role of

play05:27

styling that content so much like a

play05:30

builder would form the structure of a

play05:32

house a painter and decorator would then

play05:34

come in and style it to make it look

play05:36

nicer so imagine we had some HTML before

play05:40

CSS applied to it might look like this

play05:42

in the browser and then CSS applied to

play05:45

it it would look like this in the

play05:46

browser so much much nicer so these are

play05:49

the two languages that we're going to be

play05:51

looking at in depth in this course and

play05:53

by the end you should be able to use

play05:55

both of them to build your own

play05:56

well-structured websites which look

play05:59

awesome as well ok then gang so the

play06:01

first thing we need to do before we

play06:03

write any code is to set up a local

play06:05

development environment to work with and

play06:07

by that I generally mean just have a

play06:10

good text editor to code in and a modern

play06:12

browser to preview your working so

play06:15

there's loads of different text editors

play06:18

that you can use for web development and

play06:20

which one you use is down to your

play06:22

preference in your preference along

play06:23

there is no right or wrong text editor

play06:26

to use I like this one at the minute

play06:29

visual studio code but I do flip between

play06:31

different ones when I feel like it but

play06:34

this one is completely free for Windows

play06:36

or Mac and it comes with a load of nice

play06:39

pack

play06:40

as well that we can install to make

play06:41

coding easier so that's what I'll be

play06:44

using and if you want to follow along

play06:46

exactly like I do and use the packages

play06:49

that I do as well and I would advise you

play06:51

to do that if you're a beginner then go

play06:53

ahead and download this or right here to

play06:56

get it you just need to go to code

play06:57

visual studio comm the link is going to

play07:00

be down below but if you don't want to

play07:03

download this you could also use a

play07:04

different text editor sublime is a

play07:07

popular one which is also free well the

play07:09

preview version is free and then it asks

play07:11

you to buy it after a while so you can

play07:14

get that right here at sublime text comp

play07:16

the link to that is going to be down

play07:17

below as well another good one is Atem I

play07:20

used to use this but I found that it

play07:22

started to get a bit slow on startup but

play07:24

again it's a really nice clean text

play07:27

editor that you can install packages for

play07:29

so if you want to download that go to

play07:31

attempt dots i/o and grab it right here

play07:34

or if you prefer a no-frills approach

play07:36

you could even use something like

play07:38

notepad plus a plus I know a lot of

play07:40

people that still use something like

play07:41

that there's nothing wrong with this I

play07:43

prefer to have all of the extras in a

play07:46

text editor which is why I go for

play07:48

something like this vs code so choose

play07:51

your text editor doesn't really matter

play07:54

which one for now they're all going to

play07:55

work the same but I am going to be using

play07:56

a couple of packages inside Visual

play07:59

Studio code so again if you want to

play08:01

follow along exactly with me make sure

play08:04

you get this one or right here so

play08:07

secondly you want a good modern browser

play08:10

to preview all of your working I

play08:12

personally think that Google Chrome is

play08:14

the best one to developing and so

play08:16

preview your work in so if you want to

play08:18

download that go to google.com forward

play08:20

slash Chrome it's also going to come

play08:23

with a load of developer tools that

play08:24

we're going to talk about later on as

play08:26

well so again if you want to follow

play08:27

along exactly with me make sure you

play08:30

download this okay then so once you've

play08:32

downloaded and installed your text

play08:34

editor boot it up and it's going to look

play08:36

something like this

play08:37

this is visual studio code if you're

play08:40

opening it for the first time then you

play08:41

probably will see some kind of welcome

play08:43

screen which you can cross off that's

play08:45

fine if you're using a different text

play08:47

editor it's going to look something like

play08:48

this with a file tree on the left over

play08:51

here and the coding window on the right

play08:53

so what we need to do first of all

play08:55

inside Visual Studio code is to open a

play08:57

folder so let's open one I've already

play09:00

created a folder nothing inside it so

play09:02

I'm going to select that for now and we

play09:05

should see that over here so this is the

play09:07

welcome screen again I'm going to cross

play09:09

that off and now we can start to create

play09:12

files inside this folder so typically

play09:14

when we open a folder inside Visual

play09:16

Studio code like this that folder could

play09:18

represent our project or website and

play09:20

then all of our different files my HTML

play09:23

and CSS would go inside this folder on

play09:26

the Left overhead so the first thing I'm

play09:29

going to do is create a new file now we

play09:31

can do that in two ways

play09:32

either click on this thing right here

play09:34

this new file icon or right click and go

play09:37

to new file and I'm going to call this

play09:39

index dot HTML so when we create an HTML

play09:43

page it has to end in this extension dot

play09:46

HTML that's kind of defines it as an

play09:49

HTML file now it's always a good idea as

play09:53

well to call your homepage HTML file

play09:55

index dot HTML and that's because when

play09:58

you navigate to a website such as my

play10:01

website com

play10:02

it's going to look in the root directory

play10:03

for an index dot HTML file and if it

play10:06

exists it's going to serve that up to

play10:08

the browser so this is kind of like the

play10:10

default home page file name if you like

play10:12

ok then so now we have our first HTML

play10:16

page we can actually start to write some

play10:18

HTML code inside it so again remember

play10:21

this is just going to be a series of

play10:23

tags inside this file and those tags are

play10:26

represent different things now the first

play10:29

tag we should always use is the doctype

play10:32

tag and that defines this document as an

play10:34

html5 document and tells the browser

play10:36

this so it can render it correctly so to

play10:39

do that open your angle brackets that's

play10:41

how we open a tag or starter tag then we

play10:44

want an exclamation mark and then doc

play10:47

type and then HTML so this is a tag

play10:51

called doctype and it's a very peculiar

play10:54

type of tag it's probably the only tag

play10:56

that starts with this exclamation mark

play10:58

inside it and it basically just says

play11:00

look this is an HTML type so always put

play11:03

that at the start of your HTML files now

play11:06

the net

play11:07

thing we need to do is an HTML tag so

play11:09

HTML like so and notice this whenever I

play11:12

create a tag inside vs code then it

play11:15

automatically creates the closing tag

play11:17

for me which is nice so this HTML tag

play11:21

right here this is kind of like the root

play11:22

tag of our documents we have this at the

play11:26

top then we have an HTML tag which

play11:28

surrounds everything else now inside

play11:30

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

play11:33

that and I'm going to come back to that

play11:36

in a second but also a body tag

play11:38

now the body tag everything inside this

play11:42

this is the stuff that actually gets

play11:44

rendered to the browser so the things

play11:47

that we see in the browser now stuff

play11:49

inside the head over here this is just

play11:52

extra information about the website such

play11:55

as metadata or a title that goes at the

play11:58

top of a browser over here this thing

play11:59

here at the top of the tab this is the

play12:01

title so we can specify things like that

play12:04

inside the head but none of this

play12:06

actually gets rendered to the page

play12:08

itself that we can see inside the

play12:10

browser that all goes inside the body

play12:13

tag so let's start with this head and

play12:16

let's just create a title tag first of

play12:19

all and remember this title is what

play12:21

defines this stuff in the top so let's

play12:24

call this learning HTML and save it and

play12:29

now we want to preview this in a browser

play12:31

so what we could do is right click over

play12:34

here and we could go to reveal in

play12:36

Explorer and then we get this window

play12:39

over here if you double click on an HTML

play12:41

file it's going to open that up in a

play12:43

browser for us and we can see the path

play12:46

to this HTML file now this is using the

play12:50

file protocol and we can also use

play12:52

something else called a local

play12:54

development server so that we can view

play12:55

this over an HTTP protocol which is what

play12:58

we actually view websites on but I'll

play13:00

show you that later for now we're just

play13:03

previewing this HTML file over here in

play13:05

the browser now there's nothing inside

play13:07

the page just a blank canvas at the

play13:09

minute but we do see this title at the

play13:11

top learning HTML and that is coming

play13:14

from here where we specify ok then so

play13:17

that's the title now let's actually add

play13:20

some content

play13:21

the body the stuff that shows inside the

play13:23

browser so what I'm gonna do is create

play13:26

ap tag first of all oops not in capitals

play13:29

so lowercase P now I want you to notice

play13:32

another thing that I've been doing here

play13:34

notice I've been indenting these tags

play13:38

right here so I've not started them over

play13:40

here and over here I've indented them

play13:43

and that's a convention when you're

play13:45

writing HTML files you don't have to

play13:47

it's still gonna work exactly the same

play13:49

if you do this however for readability

play13:52

it's always better to indent like that

play13:55

using tab and actually mvs code whenever

play13:57

we enter down into a new tag it Auto

play14:00

indents for us because that's what we're

play14:02

meant to do okay

play14:03

so inside this paragraph tag I'm gonna

play14:06

say hello ninjas and I'm gonna save this

play14:10

and then in the browser if we just

play14:12

refresh we should see that right there

play14:14

very small hole so I'm gonna zoom in so

play14:17

we can see that hello ninjas right there

play14:19

so right now if we want to make a change

play14:21

and then preview it all we have to do is

play14:23

just add something over here so I'll do

play14:25

another P tag like so and then inside

play14:28

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

play14:32

going to save this first of all ctrl s

play14:34

and that over here

play14:35

I'll have to refresh to see them now I

play14:38

mentioned before that we could use a

play14:40

local development server to view this

play14:42

over HTTP instead of the file protocol

play14:45

now you might not know what that means

play14:47

really but basically HTTP is the

play14:49

protocol that we use to communicate with

play14:51

servers to view websites now we don't

play14:54

really need to know that much about it

play14:56

at the time being but if we install a

play14:59

package in vs code over here to spin up

play15:02

a local development server it means we

play15:04

can use that protocol and what it also

play15:06

means is that when we save something

play15:09

over here it's gonna live refresh it for

play15:12

us automatically so that we don't have

play15:13

to so it's much easier to save and

play15:16

preview save and preview without having

play15:19

to refresh the page so I'm going to show

play15:22

you that package what you want to do is

play15:24

click on this bottom icon down here for

play15:26

the extensions in vs code and then you

play15:29

want to search for this live server

play15:31

package just up here so search for live

play15:33

server like

play15:34

now I've already got that installed so

play15:38

if you click on it there should be an

play15:39

install button right here instead of

play15:41

uninstall and if you press that it's

play15:44

going to install it to vs code for you

play15:46

after it's installed it might prompt you

play15:49

to restart vs code so do that and then

play15:52

come back to your file now to get back

play15:54

to the file tree over here just click on

play15:55

the top icon over there now once that's

play15:58

installed what you can do is right-click

play16:00

anywhere inside an HTML file it has to

play16:04

be an HTML file because that's what we

play16:05

view in a browser and then we can go

play16:08

down to open with live service so if I

play16:10

click this then it's going to open up a

play16:12

browser over here and now you can see

play16:15

it's exactly the same content but this

play16:17

time we're using an HTTP protocol and

play16:20

we're serving this on this right here

play16:23

this is otherwise known as localhost you

play16:26

don't need to know the ins and out of

play16:27

this just yet just know that we're using

play16:29

now what's known as a local development

play16:31

server and that's how simple it is so

play16:33

now if we make a change so I could

play16:36

change this to hello world and save that

play16:39

I don't have to refresh over here it

play16:41

automatically refreshes for me every

play16:44

time we make a save to the file so

play16:46

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

play16:48

work now you don't have to use this

play16:50

instead if you prefer to just open it up

play16:52

like this how we did before that's

play16:55

absolutely fine as well you'll just have

play16:57

to keep on refreshing if you want to see

play16:59

the page update okay so now we've

play17:03

created this simple HTML file over here

play17:06

and that is all there is to it really

play17:08

it's just a series of different tags

play17:11

that make up a web page now we're going

play17:14

to see more tags later on but for now in

play17:16

this video there's one more thing I'd

play17:18

like to show you and that is how to

play17:21

inspect an element inside the web page

play17:24

so what I mean by this is right clicking

play17:27

something and then going to inspect at

play17:29

the bottom now when you do this it's

play17:31

going to open up something that looks

play17:33

like this on the right side of the page

play17:35

so let me just zoom in and we can see

play17:38

right here that we have our HTML outline

play17:41

so it's showing us the HTML right here

play17:44

ignore this this is being injected by

play17:46

the live server package we

play17:48

stalled but this right here this is our

play17:50

HTML that we created so this whole thing

play17:53

that opened up over here this is the

play17:55

Google Chrome developer tools panel and

play17:57

there's loads of different useful stuff

play17:59

inside here that's going to help us to

play18:01

develop websites and we're going to take

play18:03

a deep dive into this and the different

play18:05

useful things that it provides a later

play18:07

on for now I just wanted to show you how

play18:09

you could right-click an element over

play18:11

here inspect it and that's going to show

play18:13

you the code over here in the developer

play18:15

tools panel for example if I open a new

play18:18

tab now and go to the net ninja code at

play18:21

UK and I'll right-click go to inspect

play18:24

then I can see how this code is made so

play18:28

if I'm ever wondering on a website how

play18:30

they've done something or how they've

play18:31

coded something I can just right-click

play18:33

that element and I can see how they've

play18:36

created that HTML code right here and

play18:38

again I can use all of these different

play18:40

features inside the developer tools to

play18:42

kind of reverse engineer this website if

play18:44

you like so again we're going to take a

play18:46

look at this in a lot more depth later

play18:48

on for now I just wanted to introduce

play18:51

you to it okay they're my friends so

play18:53

that is your introduction to this course

play18:55

HTML and CSS and we've learned a few

play18:58

things first of all we've seen that HTML

play19:00

is a markup language to structure

play19:02

content on a web page and I also said

play19:05

that CSS was a language that we used to

play19:07

style a web page and the two worked

play19:09

together in tandem now we've also seen

play19:11

how to use vs code to open a project

play19:13

folder and create our first HTML file

play19:15

we've talked about what tags are a

play19:17

little and we've seen a couple of basic

play19:19

ones in action and we also know that the

play19:22

body tag is for visible page content and

play19:24

the head tag is for page information

play19:27

like the title finally we've seen how to

play19:30

preview a web page in a browser either

play19:32

by double-clicking on that HTML file in

play19:34

the file explorer or by using a local

play19:37

development server with a live reload so

play19:41

next we'll dive deeper into the language

play19:43

and we're going to talk more about all

play19:45

of these different HTML tags that make

play19:47

up a web page

play19:53

you