HTML and CSS for Beginners Part 2: Building your first web page!

Summary

This 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

00:00

📝 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.

05:08

💻 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'.

10:08

🌐 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.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It is composed of a series of elements, which are the building blocks of all web pages. In the video, HTML is the central focus, as the creator is teaching viewers how to write HTML code to structure a webpage, starting with the basic document setup.

💡CSS

CSS stands for Cascading Style Sheets, which is a language used to describe the presentation of a document written in HTML. While not the main focus of this particular video, CSS is mentioned as part of the introduction to web development, implying that it will be covered alongside HTML for styling web pages.

💡Web Development

Web development is the building and maintaining of websites; it includes aspects such as web design, web content creation, and coding. The video is an introduction to this field, specifically focusing on HTML and CSS as foundational skills for anyone new to web development.

💡Code Editor

A code editor is a type of text editor specifically designed for editing source code with various features for programmers. In the script, the creator mentions using a code editor called 'Atom' to write HTML code, emphasizing the importance of having the right software for coding.

💡Root Directory

The root directory is the top-level directory in a file system, which contains all other folders and files. In the context of the video, the creator creates a new folder on the desktop as the root directory for the website files, indicating where all the website's content will be stored.

💡Index.html

The index.html file is traditionally the entry point for websites, often used as the homepage. The video explains that naming a file 'index.html' signifies that it should be the main page served by web servers when someone visits the site's domain.

💡DOCTYPE

The DOCTYPE is a declaration in HTML that indicates which version of HTML the document is written in. In the video, the creator includes the DOCTYPE declaration at the beginning of the HTML document to inform the browser that the page is written in HTML5.

💡Head and Body

In HTML, the 'head' element contains meta-information about the document, while the 'body' element contains the content that is displayed on the web page. The video script describes how to structure these elements within an HTML document, with the 'head' for metadata and the 'body' for visible content.

💡Title Tag

The 'title' tag in HTML defines the title of the document, which is displayed in the browser's title bar or tab. The video demonstrates how to use the 'title' tag within the 'head' section to set the title of the webpage, which is also used in search engine results.

💡Meta Tag

A 'meta' tag provides metadata about an HTML document, which cannot be seen by users but can be read by browsers and search engines. The video specifically mentions the 'charset' meta tag, which is used to specify the character encoding for the document, in this case, UTF-8.

💡Indentation

Indentation in coding refers to the arrangement of lines of code to create a visual hierarchy, making the code easier to read and understand. The video mentions using indentation to visually indicate that certain lines of code are nested within others, such as content within the 'head' or 'body' tags.

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