HTML & CSS Crash Course Tutorial #1 - Introduction
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
😀 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.
😃 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.
👨💻 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.
😎 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
💡CSS
💡Tags
💡Text Editor
💡Local Development Server
💡Browser
💡Folder Structure
💡Indentation
💡Metadata
💡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
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
Voir Plus de Vidéos Connexes
5.0 / 5 (0 votes)