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
00:00hey young and welcome to your very first
00:01step in becoming an HTML and CSS and
00:04ninja ok the gang so I've decided to do
00:12a complete update of my HTML and CSS
00:15series and bundle them into one complete
00:18beginner friendly course because I think
00:21the old playlists are a bit out of date
00:23now about 4 years old and I wanted to
00:25rebuff them to include some more modern
00:27features and I also want to keep this
00:29channel really accessible to new
00:31developers and I wanted to create a kind
00:33of entry point a series for new front
00:35end developers to come along and get the
00:37basics the lowdown of HTML and CSS so if
00:41you're a new web developer this is the
00:43place to start so rather than do a whole
00:46course for HTML and a whole separate
00:48course for CSS I've bundled these two
00:50together because they do go hand-in-hand
00:52very much so this course is designed to
00:55get you up and running with both of
00:56these HTML and CSS in no time so that
01:00pretty soon you can start making your
01:01own awesome websites so that in this
01:04course we're going to be working from
01:06the ground up and I presume that you
01:07don't have any or you have at least very
01:10little experience with coding so we're
01:12going to cover all of the basics from
01:14the start what HTML and CSS actually are
01:17and I'm also going to show you how to
01:18set up a development environment on your
01:21computer I'm going to show you how to
01:23make your first HTML web page and also
01:25how to make that web page look awesome
01:27with CSS now we're also going to be
01:30talking about newer more modern html5
01:33features to bring your code up into the
01:35present day and we're gonna be touching
01:37our responsive mobile design as well and
01:39then finally we're going to bundle
01:40everything together that we've learned
01:42to make a web project from scratch and
01:46that project is gonna look something
01:48like this it's called Mario Club and
01:50features Mario over here and it's a nice
01:53modern simple website uses loads of
01:55different HTML features loads of
01:57different CSS features as well and it's
01:59also fully responsive so it looks pretty
02:02good on mobile screens as well as larger
02:04screens so we're going to be putting
02:06everything together that we learn
02:07throughout this course into this final
02:09project over here so without further ado
02:12let's dive
02:13writing okay then so before we start to
02:15code anything whatsoever I just want to
02:17take a few minutes to talk about what
02:19hTML actually is and also what CSS is
02:22just so we've got a vague overview of
02:25what these two things are before we dive
02:26into the code so HTML first of all it
02:30stands for hypertext markup language
02:32HTML that's where we get the name from
02:35and it's a markup language not a
02:37programming language so we use HTML to
02:40structure content on a web page things
02:43like text images and forms and all that
02:45kind of just and we do that by using
02:47what's known as HTML tags now text
02:51represent different types of contents or
02:53information on a web page for example
02:54we'd have a certain tag for an image a
02:57certain tag for a form or paragraph text
02:59etc now you might also hear these being
03:02described as HTML elements but they are
03:04pretty much one and the same thing now
03:07if we take a look at some sample text we
03:09can see some of them like the paragraph
03:11tag they have an opening tag and a
03:13closing tag with some information in
03:15between them so that's the opening and
03:18closing same with the anchor tag these
03:20are four links opening and closing and
03:22the closing tag has this forward slash
03:23before the letter that represents that
03:25tag now a lot of tags use this opening
03:29and closing tag structure but some of
03:31them just have one tag for example the
03:34image tag right here now don't worry
03:36about remembering all of these different
03:38tags at the minute we're going to do all
03:39of that later on I'm just giving you a
03:41quick overview so imagine this is the
03:44HTML content that makes up a part of a
03:46web page if we were to view that in a
03:48browser it could look something like
03:50this so the paragraph text is rendered
03:53at the top like that the link is right
03:55here and the image is at the bottom so
03:58when we view a web page in a browser
04:00it's just an HTML file that we're
04:02viewing so we use these different kinds
04:05of tags inside the HTML file to tell the
04:07browser what type of content we want
04:10each part of the document to be and the
04:12order that it should be in then the
04:14browser renders that HTML content into a
04:16viewable web page that we can browse
04:18online so hTML is the core language that
04:22provides the backbone of a website and
04:24it's all to do with how we store
04:26content using these different types of
04:28tags now CSS is the second part of the
04:32puzzle when it comes to building
04:33websites on web pages and it stands for
04:36cascading style sheets now we'll talk
04:38about why it's called this later on but
04:41essentially CSS is a separate language
04:44that goes hand-in-hand with HTML and
04:47what we do is you CSS to style our web
04:50page and make them look even better
04:52so HTML alone just structures the
04:55content that we want to show on a web
04:57page but CSS is what makes that content
04:59look better so we've used CSS in
05:02conjunction with an HTML file to tell
05:04the browser things like what color
05:06different bits of content on a page
05:08should be or what font size the
05:10different headings or paragraph text
05:12should be whether something should be on
05:14the left or the right of the page or
05:16maybe what the background image of the
05:18webpage should be so whereas hTML is
05:21very much to do with providing the
05:22actual content and structure to the
05:24browser CSS then takes on the role of
05:27styling that content so much like a
05:30builder would form the structure of a
05:32house a painter and decorator would then
05:34come in and style it to make it look
05:36nicer so imagine we had some HTML before
05:40CSS applied to it might look like this
05:42in the browser and then CSS applied to
05:45it it would look like this in the
05:46browser so much much nicer so these are
05:49the two languages that we're going to be
05:51looking at in depth in this course and
05:53by the end you should be able to use
05:55both of them to build your own
05:56well-structured websites which look
05:59awesome as well ok then gang so the
06:01first thing we need to do before we
06:03write any code is to set up a local
06:05development environment to work with and
06:07by that I generally mean just have a
06:10good text editor to code in and a modern
06:12browser to preview your working so
06:15there's loads of different text editors
06:18that you can use for web development and
06:20which one you use is down to your
06:22preference in your preference along
06:23there is no right or wrong text editor
06:26to use I like this one at the minute
06:29visual studio code but I do flip between
06:31different ones when I feel like it but
06:34this one is completely free for Windows
06:36or Mac and it comes with a load of nice
06:39pack
06:40as well that we can install to make
06:41coding easier so that's what I'll be
06:44using and if you want to follow along
06:46exactly like I do and use the packages
06:49that I do as well and I would advise you
06:51to do that if you're a beginner then go
06:53ahead and download this or right here to
06:56get it you just need to go to code
06:57visual studio comm the link is going to
07:00be down below but if you don't want to
07:03download this you could also use a
07:04different text editor sublime is a
07:07popular one which is also free well the
07:09preview version is free and then it asks
07:11you to buy it after a while so you can
07:14get that right here at sublime text comp
07:16the link to that is going to be down
07:17below as well another good one is Atem I
07:20used to use this but I found that it
07:22started to get a bit slow on startup but
07:24again it's a really nice clean text
07:27editor that you can install packages for
07:29so if you want to download that go to
07:31attempt dots i/o and grab it right here
07:34or if you prefer a no-frills approach
07:36you could even use something like
07:38notepad plus a plus I know a lot of
07:40people that still use something like
07:41that there's nothing wrong with this I
07:43prefer to have all of the extras in a
07:46text editor which is why I go for
07:48something like this vs code so choose
07:51your text editor doesn't really matter
07:54which one for now they're all going to
07:55work the same but I am going to be using
07:56a couple of packages inside Visual
07:59Studio code so again if you want to
08:01follow along exactly with me make sure
08:04you get this one or right here so
08:07secondly you want a good modern browser
08:10to preview all of your working I
08:12personally think that Google Chrome is
08:14the best one to developing and so
08:16preview your work in so if you want to
08:18download that go to google.com forward
08:20slash Chrome it's also going to come
08:23with a load of developer tools that
08:24we're going to talk about later on as
08:26well so again if you want to follow
08:27along exactly with me make sure you
08:30download this okay then so once you've
08:32downloaded and installed your text
08:34editor boot it up and it's going to look
08:36something like this
08:37this is visual studio code if you're
08:40opening it for the first time then you
08:41probably will see some kind of welcome
08:43screen which you can cross off that's
08:45fine if you're using a different text
08:47editor it's going to look something like
08:48this with a file tree on the left over
08:51here and the coding window on the right
08:53so what we need to do first of all
08:55inside Visual Studio code is to open a
08:57folder so let's open one I've already
09:00created a folder nothing inside it so
09:02I'm going to select that for now and we
09:05should see that over here so this is the
09:07welcome screen again I'm going to cross
09:09that off and now we can start to create
09:12files inside this folder so typically
09:14when we open a folder inside Visual
09:16Studio code like this that folder could
09:18represent our project or website and
09:20then all of our different files my HTML
09:23and CSS would go inside this folder on
09:26the Left overhead so the first thing I'm
09:29going to do is create a new file now we
09:31can do that in two ways
09:32either click on this thing right here
09:34this new file icon or right click and go
09:37to new file and I'm going to call this
09:39index dot HTML so when we create an HTML
09:43page it has to end in this extension dot
09:46HTML that's kind of defines it as an
09:49HTML file now it's always a good idea as
09:53well to call your homepage HTML file
09:55index dot HTML and that's because when
09:58you navigate to a website such as my
10:01website com
10:02it's going to look in the root directory
10:03for an index dot HTML file and if it
10:06exists it's going to serve that up to
10:08the browser so this is kind of like the
10:10default home page file name if you like
10:12ok then so now we have our first HTML
10:16page we can actually start to write some
10:18HTML code inside it so again remember
10:21this is just going to be a series of
10:23tags inside this file and those tags are
10:26represent different things now the first
10:29tag we should always use is the doctype
10:32tag and that defines this document as an
10:34html5 document and tells the browser
10:36this so it can render it correctly so to
10:39do that open your angle brackets that's
10:41how we open a tag or starter tag then we
10:44want an exclamation mark and then doc
10:47type and then HTML so this is a tag
10:51called doctype and it's a very peculiar
10:54type of tag it's probably the only tag
10:56that starts with this exclamation mark
10:58inside it and it basically just says
11:00look this is an HTML type so always put
11:03that at the start of your HTML files now
11:06the net
11:07thing we need to do is an HTML tag so
11:09HTML like so and notice this whenever I
11:12create a tag inside vs code then it
11:15automatically creates the closing tag
11:17for me which is nice so this HTML tag
11:21right here this is kind of like the root
11:22tag of our documents we have this at the
11:26top then we have an HTML tag which
11:28surrounds everything else now inside
11:30here we also have a head tag so let's do
11:33that and I'm going to come back to that
11:36in a second but also a body tag
11:38now the body tag everything inside this
11:42this is the stuff that actually gets
11:44rendered to the browser so the things
11:47that we see in the browser now stuff
11:49inside the head over here this is just
11:52extra information about the website such
11:55as metadata or a title that goes at the
11:58top of a browser over here this thing
11:59here at the top of the tab this is the
12:01title so we can specify things like that
12:04inside the head but none of this
12:06actually gets rendered to the page
12:08itself that we can see inside the
12:10browser that all goes inside the body
12:13tag so let's start with this head and
12:16let's just create a title tag first of
12:19all and remember this title is what
12:21defines this stuff in the top so let's
12:24call this learning HTML and save it and
12:29now we want to preview this in a browser
12:31so what we could do is right click over
12:34here and we could go to reveal in
12:36Explorer and then we get this window
12:39over here if you double click on an HTML
12:41file it's going to open that up in a
12:43browser for us and we can see the path
12:46to this HTML file now this is using the
12:50file protocol and we can also use
12:52something else called a local
12:54development server so that we can view
12:55this over an HTTP protocol which is what
12:58we actually view websites on but I'll
13:00show you that later for now we're just
13:03previewing this HTML file over here in
13:05the browser now there's nothing inside
13:07the page just a blank canvas at the
13:09minute but we do see this title at the
13:11top learning HTML and that is coming
13:14from here where we specify ok then so
13:17that's the title now let's actually add
13:20some content
13:21the body the stuff that shows inside the
13:23browser so what I'm gonna do is create
13:26ap tag first of all oops not in capitals
13:29so lowercase P now I want you to notice
13:32another thing that I've been doing here
13:34notice I've been indenting these tags
13:38right here so I've not started them over
13:40here and over here I've indented them
13:43and that's a convention when you're
13:45writing HTML files you don't have to
13:47it's still gonna work exactly the same
13:49if you do this however for readability
13:52it's always better to indent like that
13:55using tab and actually mvs code whenever
13:57we enter down into a new tag it Auto
14:00indents for us because that's what we're
14:02meant to do okay
14:03so inside this paragraph tag I'm gonna
14:06say hello ninjas and I'm gonna save this
14:10and then in the browser if we just
14:12refresh we should see that right there
14:14very small hole so I'm gonna zoom in so
14:17we can see that hello ninjas right there
14:19so right now if we want to make a change
14:21and then preview it all we have to do is
14:23just add something over here so I'll do
14:25another P tag like so and then inside
14:28I'll save my first web page and then I'm
14:32going to save this first of all ctrl s
14:34and that over here
14:35I'll have to refresh to see them now I
14:38mentioned before that we could use a
14:40local development server to view this
14:42over HTTP instead of the file protocol
14:45now you might not know what that means
14:47really but basically HTTP is the
14:49protocol that we use to communicate with
14:51servers to view websites now we don't
14:54really need to know that much about it
14:56at the time being but if we install a
14:59package in vs code over here to spin up
15:02a local development server it means we
15:04can use that protocol and what it also
15:06means is that when we save something
15:09over here it's gonna live refresh it for
15:12us automatically so that we don't have
15:13to so it's much easier to save and
15:16preview save and preview without having
15:19to refresh the page so I'm going to show
15:22you that package what you want to do is
15:24click on this bottom icon down here for
15:26the extensions in vs code and then you
15:29want to search for this live server
15:31package just up here so search for live
15:33server like
15:34now I've already got that installed so
15:38if you click on it there should be an
15:39install button right here instead of
15:41uninstall and if you press that it's
15:44going to install it to vs code for you
15:46after it's installed it might prompt you
15:49to restart vs code so do that and then
15:52come back to your file now to get back
15:54to the file tree over here just click on
15:55the top icon over there now once that's
15:58installed what you can do is right-click
16:00anywhere inside an HTML file it has to
16:04be an HTML file because that's what we
16:05view in a browser and then we can go
16:08down to open with live service so if I
16:10click this then it's going to open up a
16:12browser over here and now you can see
16:15it's exactly the same content but this
16:17time we're using an HTTP protocol and
16:20we're serving this on this right here
16:23this is otherwise known as localhost you
16:26don't need to know the ins and out of
16:27this just yet just know that we're using
16:29now what's known as a local development
16:31server and that's how simple it is so
16:33now if we make a change so I could
16:36change this to hello world and save that
16:39I don't have to refresh over here it
16:41automatically refreshes for me every
16:44time we make a save to the file so
16:46that's nice and that's how I like to
16:48work now you don't have to use this
16:50instead if you prefer to just open it up
16:52like this how we did before that's
16:55absolutely fine as well you'll just have
16:57to keep on refreshing if you want to see
16:59the page update okay so now we've
17:03created this simple HTML file over here
17:06and that is all there is to it really
17:08it's just a series of different tags
17:11that make up a web page now we're going
17:14to see more tags later on but for now in
17:16this video there's one more thing I'd
17:18like to show you and that is how to
17:21inspect an element inside the web page
17:24so what I mean by this is right clicking
17:27something and then going to inspect at
17:29the bottom now when you do this it's
17:31going to open up something that looks
17:33like this on the right side of the page
17:35so let me just zoom in and we can see
17:38right here that we have our HTML outline
17:41so it's showing us the HTML right here
17:44ignore this this is being injected by
17:46the live server package we
17:48stalled but this right here this is our
17:50HTML that we created so this whole thing
17:53that opened up over here this is the
17:55Google Chrome developer tools panel and
17:57there's loads of different useful stuff
17:59inside here that's going to help us to
18:01develop websites and we're going to take
18:03a deep dive into this and the different
18:05useful things that it provides a later
18:07on for now I just wanted to show you how
18:09you could right-click an element over
18:11here inspect it and that's going to show
18:13you the code over here in the developer
18:15tools panel for example if I open a new
18:18tab now and go to the net ninja code at
18:21UK and I'll right-click go to inspect
18:24then I can see how this code is made so
18:28if I'm ever wondering on a website how
18:30they've done something or how they've
18:31coded something I can just right-click
18:33that element and I can see how they've
18:36created that HTML code right here and
18:38again I can use all of these different
18:40features inside the developer tools to
18:42kind of reverse engineer this website if
18:44you like so again we're going to take a
18:46look at this in a lot more depth later
18:48on for now I just wanted to introduce
18:51you to it okay they're my friends so
18:53that is your introduction to this course
18:55HTML and CSS and we've learned a few
18:58things first of all we've seen that HTML
19:00is a markup language to structure
19:02content on a web page and I also said
19:05that CSS was a language that we used to
19:07style a web page and the two worked
19:09together in tandem now we've also seen
19:11how to use vs code to open a project
19:13folder and create our first HTML file
19:15we've talked about what tags are a
19:17little and we've seen a couple of basic
19:19ones in action and we also know that the
19:22body tag is for visible page content and
19:24the head tag is for page information
19:27like the title finally we've seen how to
19:30preview a web page in a browser either
19:32by double-clicking on that HTML file in
19:34the file explorer or by using a local
19:37development server with a live reload so
19:41next we'll dive deeper into the language
19:43and we're going to talk more about all
19:45of these different HTML tags that make
19:47up a web page
19:53you
Browse More Related Video
5.0 / 5 (0 votes)