HTML and CSS for Beginners Part 2: Building your first web page!
Summary
TLDRThis video serves as an introduction to HTML and CSS for beginners in web development. The host guides viewers through setting up a code editor, creating a new folder for their website, and writing basic HTML structure including the doctype, head, and body tags. The importance of the index.html file as the homepage is highlighted, along with adding a title and meta tag for browser compatibility. The video concludes by encouraging viewers to use the basic template for new projects and promises more content in upcoming videos.
Takeaways
- 😀 This is the second video in a series introducing HTML and CSS for beginners in web development.
- 🔍 Viewers are encouraged to watch the first video for foundational knowledge before proceeding.
- 📝 The video focuses on writing HTML and emphasizes the importance of understanding the material rather than just following along.
- 🛠️ Several free code editors are mentioned, including Atom, Notepad++, and Brackets, with Atom being the one used in the demo.
- 📁 The process of creating a new folder on the desktop to house the website files is demonstrated, establishing the root directory.
- 📂 Opening the new folder in a code editor is shown, highlighting the use of keyboard shortcuts for efficiency.
- 📄 The creation of an 'index.html' file is detailed, explaining that it is the default homepage for a website.
- 🌐 The 'doctype' declaration is discussed as a crucial line of code that informs the browser the file is HTML.
- 📖 The structure of an HTML document is explained, including the 'head' for metadata and the 'body' for visible content.
- 🏷️ The use of 'title' and 'meta' tags within the 'head' section is covered, explaining their roles in the browser and search engine results.
- ✍️ The video concludes with the addition of visible content within the 'body' tag and the suggestion to use the basic HTML structure as a template for new projects.
Q & A
What is the purpose of the second video in the introduction to HTML and CSS series?
-The purpose of the second video is to begin writing actual HTML code and to guide viewers through the initial steps of web development using HTML.
Why should viewers check out the first video if they haven't seen it?
-Viewers should watch the first video to understand how HTML works and to have a foundation before starting to write HTML code, ensuring they don't just follow along blindly without understanding the basics.
What are some free software options mentioned for writing code in the video?
-The video mentions Atom, Notepad, Notepad++, and Brackets as free software options for writing code.
Why is it important to create a new folder for a website?
-Creating a new folder is the first step in building a website, serving as the root directory where all the website's files and resources will be stored.
How does one open a folder in a code editor like Atom or Brackets?
-You right-click the folder, and if using Atom or Brackets, you can select 'Open with Atom' or 'Open with Brackets' to open the folder in the respective code editor.
What is the significance of the 'index.html' file in a website?
-The 'index.html' file is significant because it is the default file that servers look for as the home page of a website. It must be named exactly 'index.html' with lowercase letters.
Why is the 'doctype' declaration important in an HTML file?
-The 'doctype' declaration is important because it tells the browser that the file is an HTML document and helps the browser to render the page in standards mode.
What is the purpose of the 'head' section in an HTML document?
-The 'head' section contains metadata about the document, such as the title and character set, which does not display on the page itself but is essential for the browser and search engines.
What is the 'meta' tag used for in the 'head' section of an HTML document?
-The 'meta' tag is used to provide metadata about the HTML document, such as character encoding (e.g., 'charset=UTF-8'), which helps the browser to correctly display the content.
How does the speaker suggest organizing the workspace while coding and viewing the results in a browser?
-The speaker suggests having the code editor on one side and the browser on the other, allowing for easy viewing and updating of the code and its results simultaneously.
What is a recommended practice for saving time when coding and refreshing the browser to see changes?
-The recommended practice is to use keyboard shortcuts for saving, such as 'Ctrl + S' or 'Command + S' on a Mac, and then refreshing the browser to quickly see the changes.
Why might a beginner save the basic HTML structure as a template for future projects?
-Saving the basic HTML structure as a template can save time and effort for beginners, as it provides a starting point for new projects without having to rewrite the fundamental code each time.
Outlines
📝 Introduction to HTML and CSS
This paragraph introduces the video as the second in a series on HTML and CSS for beginners in web development. The speaker encourages viewers to watch the first video and mentions that today's focus is on writing HTML code. It provides a brief overview of HTML tags and emphasizes the importance of learning a few essential ones. The speaker also suggests using a code editor like Atom, Notepad++, or Brackets and provides links in the description for downloading these tools. The video script includes instructions on creating a new folder for the website and opening it in the chosen code editor.
💻 Setting Up the Code Environment
The speaker explains the initial steps for setting up a code environment, including creating a new folder for the website files and opening it in a code editor. They guide the viewer through the process of creating a new file and saving it with the '.html' extension, which is crucial for the file to be recognized as an HTML document. The paragraph also discusses the importance of the 'doctype' declaration, which informs the browser that the file is an HTML document. Additionally, it touches on the structure of an HTML document, including the 'head' and 'body' sections, and the significance of the 'title' tag within the 'head'.
🌐 Writing Basic HTML Structure
This paragraph delves into the actual writing of HTML code, starting with the basic structure that includes the 'doctype', 'html', 'head', and 'body' tags. The speaker explains the redundancy of stating the document type and the beginning and end of the HTML section, emphasizing the importance of following this structure for browser compatibility. It also introduces the 'meta' tag, specifically the 'charset' attribute set to 'utf-8', which tells the browser the character encoding being used. The paragraph concludes with a suggestion to use the basic HTML structure as a template for future projects, streamlining the process of starting new web development tasks.
Mindmap
Keywords
💡HTML
💡CSS
💡Web Development
💡Code Editor
💡Root Directory
💡Index.html
💡DOCTYPE
💡Head and Body
💡Title Tag
💡Meta Tag
💡Indentation
Highlights
Introduction to the second video in a series about HTML and CSS for beginners in web development.
Encouragement to check out the first video for foundational knowledge.
Explanation that while there are many HTML tags, only a few are essential for beginners.
Advice to pause or rewind videos for better understanding instead of just following along.
Recommendation of free code editors like Atom, Notepad++, and Brackets for writing code.
Demonstration of creating a new folder on the desktop as the root directory for a website.
Instruction on how to open a new folder in a code editor like Atom or Brackets.
Explanation of how to create a new file in a code editor and the importance of naming it 'index.html'.
Clarification on the function of 'index.html' as the default homepage for any website.
Description of how to set up a dual-screen workspace with a code editor and a browser.
Introduction of the '<!DOCTYPE html>' declaration to inform the browser about the HTML file type.
Explanation of the structure of an HTML document including 'head' and 'body' tags.
Importance of the 'head' section for metadata and the 'body' for visible content.
Demonstration of adding a 'title' tag within the 'head' to define the page's title.
Usage of the 'meta' tag to specify the character set as UTF-8 for the browser.
Discussion on the benefits of using indentation to improve code readability.
First steps in adding visible content to the 'body' of the HTML document.
Tip on saving a basic HTML structure as a template for future projects.
Anticipation for future videos that will delve into adding more content and styling.
Invitation for viewers to ask questions in the comments for further clarification.
Encouragement to subscribe for upcoming tutorials on more advanced web development topics.
Transcripts
hey YouTube really glad you could join
me today you found the second video in
my introduction to HTML and CSS if
you're just getting your feet wet within
the fabulous world of web development
well you found the right place and I
encourage you to go check out the first
video if you didn't see that one today
we're actually gonna be writing some
HTML so well what are we waiting for
let's get started in the last video we
looked at how HTML works the only thing
is as much as I'd love people to make up
my own tags like I did in that last
video we just can't do that there are
lots of tags out there but luckily there
are only a few of them that you'll need
to know to really get started as a quick
side note don't be shy about pausing or
even rewinding the videos you go do this
at your own pace and make sure you
understand as you go along instead of
just blindly following and having no
idea what you're really doing and if I
can fuse you with anything let me know
in the comments and I'll do my best to
clarify before we can get started we
need some software to write our code in
there are lots of free options out there
and the one I mean to be using for my
demos is called Adam which I have on my
screen right now it's completely free
there are other free ones out there that
are really popular like notepad we can
see right here notepad plus plus I
should say as well as brackets which you
can see right here so if you don't have
a code edit or pause the video follow
one of the links I'm gonna put links in
the description below and download one
of them and join me back here once
you're ready to go
so you've installed your code editor but
what do we do with it well the very
first step to building a website is to
create a place for it to live so I'm
gonna go and make a new folder on my
desktop so I'm just gonna right click
new folder and my first website and
there we go I got a nice little folder
there and this is where my websites
going to live it's the root directory
anything that I need for my site is
going to be in there now I want to open
this up in my code editor so I'm going
to right click and if you're using atom
or brackets I have both of them right
there I can just click on open with atom
and we wait for the program to open
and there we go so I opened up my folder
let's just bring it on the screen so you
guys can see it a little bigger there we
go great so I've got it open but there's
nothing here so we actually need to go
ahead and start working now one thing if
you are using like Adam like I am it's
possible you don't have anything along
the top here so if you want to get to
any of them if you just have to push alt
the Alt key on the keyboard brings up
this little menu so to make your first
file we just go to file and file new or
you can use them either if you're on a
Mac command N or on a PC ctrl n to make
your new file and I have a nice little
untitled file here now one thing you
have to know is code editors they can
get with lots of different types of
files just like with Microsoft Word you
can save a doc file the new docx files
PDFs and some other stuff from there as
well RTF s-- and whatnot and it's a
little bit of the same deal here except
there's no default they don't it's not
like word where the default is a doc and
then there's all these other options in
this case there's no default there's a
whole bunch of different things from
HTML CSS JavaScript PHP asp.net it just
goes on and on and on really so we need
to tell it what type of file this is
going to be and the best way to do that
are the only really way is to save our
file so I'm gonna come down to here and
hit save and it's going to ask me how I
want to save my file and I'm gonna call
it index dot HTML and I have to write
the HTML out it's not like those other
ones as I just mentioned there's no
default so I'm gonna write out dot HTML
and I'm gonna push save and we can get
going um
now there's annum there's a reason I'm
calling it index.html and it has to do
with house servers work and my index is
with a lowercase I we're always just
going to be using lowercase stuff and
just for now know that whatever you want
your home page to be that has to be your
index.html we don't use home page
EML or home dot html' or anything else
the the home page of your site is your
index dot HTML so we've got our HTML
file but well what do we need to do now
a good thing to do is actually to open
up your page so I'm gonna minimize this
for one second
I'm gonna find my folder and I'm going
to open up my index.html and let's just
bring that onto the screen so you can
see it and it's a nice blank document
right now so let's fix that up a little
bit and this is usually how I like to
work
let's open atom backup okay there we go
so basically what I want is I want my
code editor on the side here and I want
my browser over here so I can see the
two of them at the same time while I
work so as I can save here and then I
can update this and see what I'm
actually doing in general the way I work
is I always have my code editor on the
left and my browser on the right just
because that's how I'm used to working
but you can set this up however you want
some people put one on top one on the
bottom or you know this could be but it
doesn't it doesn't matter how you set it
up but I like having always everything
set up just so I can see both of them
really easily and now the real fun
begins we need to start writing some
HTML so if you remember everything in
HTML all the code goes inside of
triangle brackets let's give me an ER
because I have nothing in there and the
first thing we need to do is put in this
line of code I have to say doctype HTML
so just like my code editor can create a
whole bunch of different types of files
my the browser can read lots of
different files it can be a CSS file
javascript file or an HTML file PHP file
there's a whole bunch so this is a
really important line it always goes
right at the top and it's telling the
browser that it's looking at an HTML
file this is sort of the standard way of
writing it where this is always in
capitals so it's exclamation
mark let's make that a little bigger so
we have our exclamation mark doctype and
then the HTML and it's all inside of my
triangle brackets now this part can seem
a little bit redundant but what I'm
gonna do now is I'm gonna come down and
I'm going to put HTML and what we want
to do next is we need to close our HTML
so I'm open triangle bracket I'm writing
out HTML closing triangle bracket and
then down here at the bottom the same
thing but with my forward slash just
like we looked at the last video so this
is seems a bit silly we're telling our
document our browser that we're looking
at an HTML file and then we're coming
here and we're telling it that starting
here will be each tml and the HTML ends
here but as redundant as it seems we do
have to do it and one thing you'll
notice is everything I put in my tags is
lower case except for this doctype in
general everything in the tags lower
case and you'll be good to go so a few
other new tags that we're gonna look at
every website has two parts to it
it has what we called a head close head
and the body close body
now let me space this out a little bit
and I'll put more space there I would
normally put all this space but I just
want to make it a bit easier for you
guys to see so here I'm opening my head
and I'm closing my head and here I'm
opening my body and I'm closing my body
the head is where the extra information
goes this stuff doesn't show up on the
screen but it's essential to getting
things to work properly plus we can add
a little bit of extra info in there too
and the body this is where all the
content goes anything we want the person
to see on their screen in their browser
here that has to go inside the body
right here and well maybe it'll be a
little bit boring I'm actually gonna
start by doing a few little things up
here in the head first so I'm gonna come
in the head and I'm going to write title
and
my first web site and I'm gonna close
title so I'm gonna save my file and then
I have to come over to my browser and
I'm gonna hit this little refresh and
I'm about to push it but what I want you
to do right now if you see this tab here
it just says index.html and when i
refresh now it says my first website so
the title isn't something that shows up
on my page because it's inside the head
it's extra information and it's being
used for the tab up here another place
where the title will be used is if
someone does a google search for your
website it's the title that shows up in
the google search it's not actually
content from your site that will be
there so there's one other little thing
that I'm gonna add in the head here
which is called meta tag so anyone who's
done a little bit of photography
probably knows what the meta or what
meta information is and it's sort of
extra information in photography when
you take a picture with the digital
camera it's gonna save the ISO it's
going to save the shutter speed probably
even the location and time and date and
all those things so all that information
is saved with the photo but if you look
at the photo you don't see it you have
to use some software to you know get
that extra information so a meta tag
like this is a little bit the same
there's a lot of different ones but the
only one that's essential is the car set
UTF and you can see this is actually
Auto filling for me so I'm going to go
right there and double click on it and
get my car set utf-8 and this seems a
little strange basically we're just
telling the browser what character set
we're using it's all about the
characters that are embedded so all
these letters that are on the screen the
computer doesn't really know it and F is
it's using this encoding system and
utf-8 is sort of the standard for most
languages these days and it just saves
all the characters that we'd ever want
to put on the screen and we have to tell
the browser that this is what we're
going to be using the other thing you'll
notice here and most of these code
editors do this by default but my head
is here and it's closing here
click there it's even underlining it to
make it more obvious and then this is
indented and this indentation is just to
make it more visually obvious that this
stuff is inside there so I could write
it like this it wouldn't make any
difference to the browser but by having
it spaced out and you can either do that
with the tab key and I'll come here and
I'll push tab and it creates just that
space other people like using the
spacebar I'll put two or some people put
four spaces and it's just to make a nice
visual representation that this stuff is
inside my head and you can even do the
same thing here with your title if you
wanted to so I have open title this is
inside my title tag and then close title
but I think it's just a little easier to
read for a nice little short thing like
that just to put it like that for my
title now we can finally put some stuff
on our page we can actually see some
things showing up here so let's just
jump right into our body tag and I'm
gonna push tab because I'm inside my
body tag and right let's just you know
my first website I'm gonna push save
refresh and look at that I have some
content on my page I've just noticed
what I'm saving most of the time here
I've been pushing ctrl s or if you're on
a Mac that would be command S which is
you know file and just save I'm so I'm
whenever you see me doing this I'm just
ctrl essing and then refreshing it's
much faster for me than having to jump
up here every time so I've been doing
that just in case you're wondering why
you don't see me saving the file and I
can still get it to work so we don't
really have much content on our page
right now but hey it took us a lot of
work just to get to this point so give
yourself the knife pat on the back for
making it this far and in the next video
we're gonna start looking at really
putting some content in here because
this this little line of text isn't very
much so we're gonna start exploring
paragraphs and headings and getting some
some content on there that looks a
little bit better but be happy with what
you have in a little pro tip I'm gonna
clean this up a little bit let's just
take out some of this extra space that I
don't need
and I don't really need this line and
you could you know every single page
you're gonna make is always gonna start
with this is the very basic so you could
save this document just like that and
use it as a bit of a template file for
every time you're starting up a new
project it's a nice starting point
especially when you're starting off this
is all you're really going to need for
your first few little things so you
might as well save it and just keep this
as a little template that you can reuse
every time so you don't necessarily have
to rewrite all of this each and every
time so I really hope you learned
something watching this I hope that it
made sense and I hope that it's nice and
clear and that you've been able to
follow along if it wasn't clear if you
have any questions whatsoever
hit me up down in the comments below I
definitely will get back to you and keep
on watching we're gonna get on and be
doing a lot of really cool stuff it
starts off really slow we have a white
page some black text on there but really
really soon you're gonna be doing
something really awesome so keep
following along subscribe to the channel
so you don't miss any of the videos that
are coming up and have yourselves a
great day
5.0 / 5 (0 votes)