Transcripts
1. Intro: Hello. Welcome to HTML and
CSS for complete beginners. This tutorial is designed to
give you a quick start with HTML and CSS by building
a practical project. No prior experience or
knowledge is required. Let's take a quick look at what we will cover
in this tutorial. Basic HTML. We will start with understanding the essential HTML
tags like DIV, paragraph, heading, and more. CSS basics, learn
about CSS selectors, properties, the box model, and more to style your page. Lists and dictionaries,
tables, forms, media, navigation and
responsive design. Let's get started. See you in the next lesson.
2. What is HTML: What is HTML? HTML stands for hypertext
markup language. It is not a
programming language, but a markup language, meaning it doesn't perform
logic or calculations. Instead, it structures
content on webpage, telling the browser
what elements to display and how they
should be arranged. HTML is made up of tags which
define elements on webpage. Each tag has a specific role
such as displaying headings, paragraphs, links,
images, or forms. Here are basic rules of HTML. Tags are enclosed
in angle brackets. Most tags come in pairs, an opening tag to start the element and a
closing tag to end it. The closing tag
includes a slash at the beginning to indicate
where the element stops. HTML documents follow a
hierarchical structure. Meaning elements can
be nested inside each other to create a
meaningful layout. The latest standard
of HTML is HTML five. HTML is the foundation
of every website. It works alongside CSS for styling and JavaScript
for interactivity, to create dynamic, visually
appealing web pages. Without HTML, web
browsers wouldn't know how to structure
or display content.
3. What is CSS: What is CSS? CSS stands for
cascading style sheets, and it is what makes
websites look good. While HTML structures
the content, CSS controls its appearance, things like colors, fonts,
layouts, and animations. Without CSS, every web page would look plain and unstyled. It follows a system of
rules which consists of a selector which
targets the HTML element, a set of properties like
color or margin and values assigned to
those properties like red or ten pixels. That's your quick theoretical
intro into HTML and CSS. Now, let's set up our working environment
and start building.
4. Environment Setup: I assume you don't want to
code on a piece of paper, go to this website, Code visual studio Com, download, Link in resources. Choose the right installer
for your operating system. Then open the downloaded file and follow the
installation instructions. Once installed, launch VS code. Now, let's organize our work by creating a project folder. This is where we will store
all our HTML and CSS files. Create a new folder
in a source folder on C drive and name it
something like HTML, CSS tutorial or
wherever you like. Go to VSCode, choose open folder and select
your newly created folder. Every website needs an HTML
file, Let's create one. In the left Explorer
panel of VS code, click on the new file icon
and name the file index HTML. This is the default name for
the homepage of website. Let's quickly generate
a basic HTML structure. Type exclamation point, Shift
plus one and press Enter. VS code will auto complete a basic HTML structure for you. Now let's add a Hello world heading inside the body section. Type H one and press Enter and inside the H one tag
type Hello world. Now go to your project
folder where you saved Index HTML and double
click Index HTML. It should open in
your default browser. Right now, every time we
make a change in our HTML, we have to manually refresh the browser and
that is annoying. Let's fix that with Live server. In VS code, click on
the extensions icon. Search for Live Server
and click Install. Once installed, right click on Index HTML and select
open with Live Server. Your default browser will open, and now every time you save, the page updates
automatically. Let's test it. Change your H one to Hello World and press
Control as to save. Your browser updates instantly. No manual refresh needed. Let's make sure our
workspace is comfortable. To split the screen
for Windows users, press Windows plus left
arrow to move VS code to the left and choose your browser to
place it on the right. Now, you can code on the left and see
changes on the right. You can resize both
windows by dragging the middle divider
to adjust the width. To maximize your browser, press Windows plus
up arrow twice. To go back, press
Windows plus we arrow. To move to the new line without
breaking the current one, you can press Control and Enter. In this configuration, we might want to have some more
workspace to code. Here's how to make VS code more minimalistic to
hide the sidebar, click the Toggle
primary sidebar button. To hide the minima, the tiny code preview
on the right, right click on the minimap
area and uncheck Minimap. To move the activity bar, the icons on the
left to the top, you can go to menu to the View appearance
activity bar position, and then choose top. You can change the
color theme by going to manage themes and color theme. I will try Monocy deemed or you can choose
any theme you like. Optionally, you can
hide the status bar at the bottom by going to
the view appearance, and unchecking status bar. In order to wrap the code to
the width of the VS code, you can press Alt and Z. I will also hide
the side bar again, and now we have maximum
space for coding.
5. Html, Head and Body: Mm. Every HTML document follows a specific
structure that ensures proper rendering
in web browsers. Let's break it
down step by step. The very first thing in an HTML document is the
doc type declaration. Doc type HTML. This tells the browser, this is an HTML five document. Without it, browsers might not render your page correctly, and older browsers might have
unexpected styling issues. Right after doctype HTML, there is an HTML tag. This is the root element
of our web page. Everything inside
our HTML document is wrapped inside this tag. The ank attribute
tells search engines and screen readers that
the page is in English. This improves
accessibility and SEO. Next, we have the head section. The head section doesn't
display anything on the page, but it contains important
information about the document, including the title of the page. We can title our page, HTML, CSS Tutorial, for example. Head also contains links
to style sheets and external resources
and meta information for SEO and accessibility. For example, meta charset UTF eight defines the character
encoding for the document. UTF eight supports most languages
and special characters, and meta name viewport ensures the webpage is responsive
on different devices. Finally, there is the body tag. Everything visible on
the web page like text, images, links goes
inside the body tag. To sum up, doctype HTML tells the browser this is
an HDML five document. HTML is the root of the webpage. Head contains metadata and body contains all
visible page content. Now that we understand the core structure
of an HTML document, let's start building
our project.
6. Paragraph: On. First, we are going to create a short
about me section. Inside the body section, type P and hit Enter. We just created a paragraph. In HTML, tags consists
of three elements, opening tag, closing tag, and text goes
between these tags. Let's add some text to introduce ourselves and save changes. Now our text appeared
in the browser. We can add another paragraph. Now you might be
thinking, Dev Diva, I'm not trying to be George
RR Martin over here. I didn't come here to write essays and I've got you covered. Head to LormEpsumio Link in resources, and
click Generate. Loramipsum is a
classic filler text used in web development. Copy some text from
there and Voala. Okay, let's inspect
our paragraph. Right click on the paragraph
and click Inspect. This will open developer tools. Now you can highlight an HTML element by clicking on it in the
panel on the right. Paragraph is a block
level HTML element, which means that it
takes up the full width of its container and always
starts on a new line. Remember the three key
points about paragraph. Syntax, start with
the opening tag, write your text,
and then close with closing tag, Block
level element. In HTML, a block level
element starts in a new line and takes up the whole available with semantics. Paragraph has a semantic meaning indicating that the content inside is a paragraph of text, which improves
accessibility and SEO.
7. Heading: To add a main title
to our section, let's type select H
one, and press Enter, we've just created
a heading element, and let's name this
section about me. To further organize our content, let's add some sub
headings like H two for experience before
our first paragraph. Next, we can add
a smaller H four heading for interests before
the second paragraph. HTML supports six levels
of headings from H one, the largest one to H
six, the smallest. Headings help structure
your content, improve readability, and make
your page more organized. We can also inspect
the heading element, right click on About
Me and select Inspect. As you can see, heading is
also a block level element, which means it starts on a new line and takes
up the full width. By default, headings are styled with bold text and have
space around them. Now, I want to quickly
make my sections more distinct by adding
some horizontal lines. The HR element stands
for horizontal rule. Unlike other elements,
it's self enclosing, so you don't need a closing tag. Here are key points
about headings. Syntax. Use H one to H six tag with H one being the most important and
H six the least. Block level, headings start on a new line and take up the full available width
of their container. Semantics, headings
convey meaning about the structure of your
content, indicating sections. Accessibility. Screen
readers detect headings making it easier for users to navigate
your content. CEO, search engines analyze headings to determine content
structure and relevance, which can enhance visibility
in search results.
8. Text: A. Let's say we want some parts
of the text to stand out, like highlighting my
programming experience, select the text fragment, press Control Shift and P
to open command palette, and search for met,
wrap with abbreviation. Type B and press Enter. The B tag stands for bold, making the text
inside the tag bold. Now I want my name
to be in italics. Follow the same steps,
select the text, press Control Shift and P, and choose wrap
with abbreviation. This time, wrap the text
in the I tag for italics. The ITAC makes the
selected text italicized. Let's underline
some text as well. For example, Loramipsom. The U tag stands
for underline and it is used to underline
the text inside of it. Now, let's add a new line after the first sentence
of the second paragraph. Type BR and press Enter. The text after this sentence will now appear on a new line. The BR tag stands
for line break. It is a self enclosing tag, meaning it doesn't
need a closing tag, similar to the HR
horizontal rule element. Here are main takeaways. Bold. Use the B tag to
make text bold. Italics. Use the I tag to italicize text. Underline use the U tag to
underline text and line break. Use the self enclosing BR
tag to insert a new line.
9. Div: A. Let's say we want to add
a border around our content. We can use the DIV
element for this. First, we need to wrap
everything in the DIV tag. Select the content
you want to wrap, press Control Shift
and P search for T, wrap with abbreviation and
type DIV and press Enter. This will wrap the selected
content automatically. Now let's inspect
our HTML structure. The DIV element is a
block level element in HTML used to group an
organized content. It stands for division and acts as a container to
hold other elements. Unlike headings or paragraphs, div elements don't add any semantic meaning
to the content. They are purely for
structure and layout. Now, let's add some
style to our DIV. First, go to the head
section of the page. Inside, add a style tag. Now we can write some CSS rules. We want to target
the development, so let's type DIV. Next, open curly brackets. Now we can start defining
CSS properties for our div. Let's type border,
colon, one pixel, solid and black and save, now we have a border
around our content. Let's also add some
background color. Background color, light blue, sets the background color. And padding 20 pixels at
space inside the div. As you can see, CSS
is pretty simple. We target an element, div and specify properties like border and padding along
with their values. We will dive deeper into CSS
styling in future lessons. For now, let's remember these three key points
about div element. The DiVtag is used as a container for grouping
content together. Like headings and paragraphs, a div is a block level element. And unlike headings
or paragraphs, a div doesn't add any semantic
meaning to the content. It's purely for layout
and grouping of elements.
10. Applying CSS: One. With CSS, we can control the
appearance of HTML elements. So far, we've applied
styles to our DIF element using the style tag inside the head section
of the document. This method of applying
styles is called internal CSS because the styles are written directly
within the HTML file. Let's add another CSS rule this time for the body element, color dark slate gray. Now all the text on the page
turned a grayish color. Since all the elements
like paragraphs and heaters are child
elements of the body, they inherit this rule, hence the name
cascading style sheets, styles cascade down
to child elements. We can overrit inherited styles by defining a more
specific rule. For example, let's change the color of all H one elements. Color royal blue. This rule takes precedence over the body's text color now. Another way to apply
styles is by using the style attribute directly
within an HTML element. For example, H one style
equals color C green. This is called inline CSS. Inline styles take precedence
over internal styles overriding the previously
defined text color for the H one element. To add multiple inline styles, separate them with a semicolon. For example, background
color, dark gray. That looks a bit silly, so let's remove it, but you get the idea. A more common and
scalable way to apply styles is by using an
external CSS file. Let's create a new file called index CSS and define styles just like we
did in the style tag, H one, color, aquamarine, to apply these styles
to our web page, we need to link the CSS file inside the head
section of index HTML. Link RL equals
stylesheet and HRF, which will be the path
to our style sheet, in our cases, index CSS. We still don't see any changes. Remember, the closer a
style is to an element, the more priority it has. Right now, the inline style is taking precedence,
let's remove it. And now the internal
style kicks in. Once we remove that, the external style
finally takes effect. External style sheets are the preferred method in
modern web development, so let's move all our
styles to index CSS. You can press
Control Shift K and then Control Shift F
to format your file. Now let's remove
the style tag from our HTML file to keep it clean. To sum up, there are three
different ways to apply CSS. Inline CSS using
the style attribute inside an HTML element. Internal CSS, which is writing styles inside a style
tag in the head section, external CSS, writing styles in a separate CSS file and linking
it to the HTML document. Also, remember,
cascading effect, styles applied to the
parent elements are inherited by the child
elements unless overridden. Style presidents, the closer a style is defined
to an element, the higher its priority. In line style takes the highest priority then
internal and external.
11. Selectors: Mm. Let's talk about
CSS selectors. To style in element, we first need to target
it using a selector. We've already used the
element selector before. The element selector is simply the name of an HTML element and it applies styles to all instances of that
element on the page. What if we want to change the color of
the first paragraph? Paragraph color, and
let's pick some color. This changes every
paragraph on the page. Luckily, HDML allows us to
define attributes on elements. Let's give the first
paragraph an ID attribute. ID is a unique identifier
of the element, never assign the same ID to more than one
element on the page. Now we can use an ID
selector to style just this paragraph
by using hash tag followed by ID name,
hash tag experience. Great. Now only the first
paragraph changed color. Another way to target elements is by using a class selector. Let's define a CSS
class for headings. Dot heading, color rosy brown. Now we can apply this
class to multiple elements by adding the class attributes
to the HTML elements. Since we added the heading
class to only two headings, the third heading
stays unchanged. The big advantage of
using a class is that it can be reused across
multiple elements, unlike the element selector, which would style all headings. Lastly, there's the
universal selector, which selects
everything on the page. Asteris border, one
pixel solid gray. This applies a gray
border to every element. To sum up element selector like P H one or DV targets all
elements of that type. ID selector targets
a specific element. IDs must be unique. Class selector targets
multiple elements with the same class. Universal or all selector targets everything
on the page and attributes use
HTML attributes to define element properties
like ID or class.
12. Box Model: To understand CSS properly, we need to get familiar
with the box model, which applies to
every HTML element. To see how the box model works, let's add another div below our existing one and give
both unique IDs. So the first ID
will be about me, and the second div will
have ID box model. Now let's simplify our CSS by keeping only the
essential styles. I'm going to remove all
these styles we practice on previous lesson and I will apply these styles
to about me ID. At this point, the page
should look like this. The box model is essentially an invisible box
around every element. Let's visualize it by adding
a border to our second div. Hashtag box model, border, ten pixels, solid, and
let's pick out some color. Each box has a margin, which is the space
outside the border. Margin 50 pixels. This adds space around
each side of the element. Margins are transparent so
they don't have any color. Let's also add padding,
putting 30 pixels. Putting is a space between the content and the
border of the element. We can also control the
size of the element. For example, with 300 pixels
and height 400 pixels. Now our box is so big that we might need to
scroll down to see it. When you set width
and height in CSS, you're only defining
the content area. The total size of
an element also includes padding,
border and margins. Here's a quick breakdown
of the CSS box model. In the center, we
have our content. Content has height and width. Budding is a space between
content and the border. Border is the visible
outline around the element. Margin is transparent
space outside the border, pushing the element
away from others.
13. Clockwise Notation: Now that we understand margins, paddings and borders, let's talk about a quicker way to
define their values. If we write just one value, it applies to all four sides and we can also define
each side separately. For example, margin top, 100 pixels or margin
left and so on. Instead of writing separate
values for each side, we can shorthand them using
a single line of CSS. For example, padding 30
pixels and 100 pixels. With two values, the
first applies to the top and bottom and the
second to left and right. Let's make border
sides vary in wave. Border with five pixels, ten pixels and 15 pixels. Using three values,
we specify top, left and right, and then bottom. When we use four values, they follow the clockwise order. Border with five pixels, ten pixels, 15 pixels,
and 30 pixels. Think of it as moving
clockwise around the element, starting at the top and moving right down to the
bottom and then left.
14. Colors: On. Let's clean up our workspace by removing the extra Div and styles
from the previous lesson. Now, let's talk about colors. We already learned
how to define text and background colors in CSS. A neat thing about CSS
is that it comes with a bunch of predefined color
names like light blue, which makes it super
easy to get started. VS code also has a built in color picker which lets you
manually fine tune colors. It automatically formats
colors in RGB format. If you want to add transparency, use RGBA where the fourth
value controls opacity. Zero is fully transparent and
one will be fully opaque. CSS also supports hex and HLS. Each format has its strengths, but they all achieve
the same result. The best practice is always to keep a consistent
color scheme. If you're not sure what
colors work well together, there are plenty of tools that generate color
palettes for you. For example, color
hunt or colors CO. Now I'm going to pick
some colors from color hunt. I like this one and this one and I will use it as an inspiration
for my website. Feel free to choose
your own color palette. We are going to use it
in the next lesson.
15. CSS Variables: To keep our CSS clean
and maintainable, let's introduce CSS variables. They allow us to store
values like colors or spacing in one place and reuse them throughout
our style sheet. Let's define some
color variables. CSS variables are declared
inside the root selector, which represents the
entire document. Now I will add some color
variables like primary color. Secondary color,
and you can define your own colors or copy
mine from the resources. Remember that the
variable declaration starts with two lines, background color, heading
color, and text color. We want a good contrast
between background and text, so let's pick a darker
shade for text. Now, let's apply these
variables to our page. For body text color, let's give it text color. Var for variable parentheses and we have to pass
a variable name. Text color with the two lines or hypens in the
beginning of the name. For the background color, I will use var background color. For level one heading, I will choose heading
color and then for level two heading,
secondary color. Now for the about me DF here, I will use text color as a border color and primary color for the
background color. Also, let's change
the level for header to level two header
for better kayarche. Now our website has a
consistent color scheme. A great thing about
CSS variables is that they allow us to
switch color schemes easily. Since variables can be
updated dynamically, we can create a dark mode by changing them inside a class. Let's create a class with a name dark mode and then let's redefine all
the colors that we use. Again, you can define your own colors or copy
mine from their sources. Now, let's apply this
class to the body element. Body class dark mode. And just like that, we've
switched to the dark mode. If a variable is not defined, we can provide a fallback value. For example, H one color will be some color and then coma tomato. If some color is missing, the text color will
default to tomato instead. In our case, we did not
define some color variable, now this heading is red. Here's a quick recap. CSS variables store
reusable values for colors, spacing and more. Define them inside root
element using variable name. Use var parentheses,
variable name to apply them. Variables can be updated
dynamically using classes. Fallback values and
sure styles still apply if a variable is missing.
16. Typography: Oh. Let's talk about typography. Typography is all about fonts and how text appears on webpage. Let's start by adding some default font styles
for our text elements. Font family, Aerial
and San Serif. We change the default
font to aerial. We already defined the color, so let's add line height. 1.6. This increases space between lines for
better readability. You may wonder what
does San Cerf mean? The first value aerial
is our preferred font. The second value is a fallback in case the
first one isn't available. San Cerif is a fallback in case the first two
fonts aren't available, meaning the family of fonts that will be smooth
and modern looking. There are five generic
font families. Serif, for example, times New Roman or Georgia
for traditional look, San Cerif like aerial,
modern and clean. Monospace, for example,
consolas for code like text, cursive like comic
sans, handwritten feel, and fantasy like papyrus or
impact for decorative style. For websites, you usually
want to stick to Serif or SNSerif because they
are the easiest to read. We can control font size
using different units. For example, paragraphs,
font size 20 pixels or phone size 1.5. This is relative to the
parent element phone size, 1.5 times the parent element
text size or font size, and here we have some
predefined values like small, medium, large, et cetera, and let's use medium. Predefined values
like small, medium, and large depend on the
browsers default settings. For more control, you
may want to use pixels. We can control the thickness of the text using font weight. It ranges 100-900 and higher
value means thicker font. For example, 900 or simply bold. Let's leave it at 200
for a thinner font. We can also control font style
like making text italic. Font style italic. But for now, let's
keep it normal. We can change how
text is aligned using the text align and we
have options like left, center, justify, and right. For better readability, let's
justify our paragraphs. We can also add decorations and transformations to our text. Text transform, and we have
options like uppercase, lowercase, capitalize,
et cetera, and let's choose uppercase,
text decoration, we have options
like non underline, line through, and let's
choose line through. We won't use these for now, but it's good to know
that they exist. So here's our final
paragraph styling. Remember the most important
properties, font family. Choose the font for your page and always include
a fallback value. Font size, set the size
of the text using pixels, relative or predefined values. Font weight at just the
boldness of the text, 100 to 900 or
keywords like bold. Font style, make text
italic or normal. Text align, control text
alignment like left, right, center or justify
to improve readability.
17. Center Div: All right, I'm switching back to light mode for this lesson. Now, let's take a look at our website in full screen mode. I think it would look
much better if we made this div narroware and
centered on the screen. We already know how to
control the width of a div. About me div with 600 pixels. But now it looks off since it's not centered
on the screen. One way to center a diff horizontally is by using
the Margin Auto trick. Margin Auto setting margin auto makes the left and right
margins automatically adjust, centering the diff horizontally
but not vertically. This only works if
a whiff is defined. However, I still
think it would look better if it were
centered vertically too. Let's try another method. This time, let's use flexbox. First, let's remove margin Auto and take a look at
the body element. If you inspect the body, you will see that
it doesn't take up the full height
of the screen. Let's fix that by
setting its height to 100% of the viewport height. Height 100 view heights. Make sure the body fills
the entire viewport height. If we set it to 50, it will fill half of
the viewport and so on. The next step is to turn the
body to a flex container. Display flex. Flexbox, flexible box layout is a CSS layout system
that allows you to easily align and distribute
elements within a container. Now we can align elements inside the flex
container to our liking. Since we want to center a div, let's add justify
content center, which centers child elements horizontally and
align items center, which centers child
elements vertically. Since our DIF is inside body, flexbox automatically centers it both horizontally
and vertically. We could move our div
to the bottom right of the page by changing
the alignment. For example, justify content, flex moves content to the right, and align items flex and
moves content to the bottom. You can experiment with different values to see how
they affect positioning. Remember to remove margin
auto property from the DIV since it will
conflict with the flexbox. Let's leave our
DIV in the center. We will practice Flexbox
more in the future lessons. For now, remember
this Flexbox is a CSS layout system that allows you to align elements
within a container. Use display flex to turn
element into flex container. Use justify content to
align items horizontally. Flex start, center or Flexnd. Use align items to
align items vertically. Flex start, center or flex end.
18. Unordered List: In this chapter, we are
going to talk about creating and styling HTML
lists. Let's face it. Nobody wants to read anymore, so let's replace
this huge paragraph with a simple list of interests. The UL tag stands for
an unordered list. To add items to our list, we use the LI tag, which stands for list item. Let's add L I programming, and then movies, games,
cats, and books. Okay, we got our
lists of interests. Now, let's style
our lists a bit. We can target it using a
simple CSS element selector. By default, list items
have circular markers, but let's switch things up
and change them to squares. To do this, we use the
list style type property. We have options like circle, disc, and even decimal numbers. I will pick squares
for our list. I would also like to change
the color of the list marker. Select list item with
element selector, and then double colon
and select marker with pseudo element
marker, selector. Color for secondary color. And now the square markers are
bluish color. This is new. The marker selector
lets us style the list markers separately
from the list items. In general, a CSS pseudo
element is a keyword added to a selector
that lets you style a specific
part of an element. The syntax looks like this, element name, double colon, and then pseudo element name. Just to show another example
of pseudo element in action, let's make first
letter of every item capitalized using our knowledge of text transformation styling. List item, pseudo element, first letter, text
transform, capitalize. Great. We have our first list. To sum up, use ULTAg
for an unordered list. Use LI for each list item. Use list style type to change the numbering
style of list. Use pseudo elements
like marker and first letter to style specific
parts of the HTML element.
19. Ordered List: M. Let's create another list. This time we will list our favorite programming
languages using an ordered list. First, let's add a new section
with a level two heading, H two, favorite
programming languages. To create an ordered list, we use the OL tag, which stands for ordered list. Then just like before, we add list items using LI tag. So L I C sharp, and then JavaScript and
Python, and there you have it. Our programming languages
listed in order. By default, ordered
lists use numbers, but we can customize this using the list style
type property. So OL list style type, some options include
lower Alpha, upper Roman letters or decimal. We can also create
nested or embedded lists by adding another list
inside the list item, OL, and then let's add two items typescript
and vanilla JS. Let's use inline style
for different marker. List style type, lower Alpha. Now type script and VanlaJS are subcategories of JavaScript
inside the list. As you can see, this style
still applies to our list. But what if we only want to style the markers
of a specific list? We can do that by
targeting it with an ID. Let's add an ID language list and then ID selector
language list, LI double colon
marker, color tomato. Now only the markers for this specific list will
be colored tomato red. We just used a new
CSS technique, the descendant combinator. Combinators define relationships
between selectors. In our case, we want to style list item elements
in site language list. This means select all
list item elements in site language list and
change their markers to red. Another CSS combinator
is the child combinator. The child combinator affects only direct children
of the language list. The nested list items, typescript and anlaJS will not be styled with
tomato red now. To sum it up, use OL
for an ordered list. Use L I to define list items. Use CSS combinators to describe relationships
between elements, the descendant
combinator to style all nested elements or child combinator to style
only direct children.
20. Glossary: Let's create a simple glossary with some programming
related terms, H to glossary, and then DL for
definition list container. D T, HTML, and this
is definition term, the world or the
face being defined. DD for definition description, the explanation of the term. Let's add another definition term CSS and definition
description, cascading style sheets used
for styling HTML elements. Each term is followed
by its description, making it easy to read. Let's improve the readability of our glossary with some CSS. The element selector, DL, so the definition list, let's add a border left. Three pixels, solid, and for
the color, secondary color. Let's add some padding
on the left side, 15 pixels, and let's set
max width to 500 pixels. This is the maximum
width of the element. For the DT, definition term, let's make the font
bold font weight, bold, and margin top ten pixels
for the definition, DD margin left 20 pixels, and font style italic. Now the terms stand out more and the definitions
are easier to read. We can also add a
Haver effect to make the terms stand out when
users interact with them. DT, colon hover, colon
tomato, and cursor pointer. We just use a CSS pseudo class. Pseudoclass is a
keyword added to a selector that lets us style elements based
on their state. The Hover pseudoclass applies styles when the user
hovers over an element. This is a syntax, element name, and then single colon
and pseudoclass name. We can also enhance our glossary using
the title attribute. DD title HTML for
the HTML definition, and then for the CSS
definition, title CSS. Now when we hover over
the term or description, a tooltip with an extra
information appears. Attributes provide
extra information about an element and
modify its behavior. To sum up, use DL for
a definition list, use DT for the term
and DD for definition. Use the Hover pseudoclass
to style elements when hovered and the title attribute to display extra
information as a tool tip.
21. Chips: Now that we know how to use
HTML lists and glossaries, let's design our own list. Instead of listing languages
in traditional list, let's display them in flexible layout
using span elements. First, let's create
a container and a list of span
elements inside it. DIV span C sharp, JavaScript, TypeScript,
Vanilla JS, and phytom. The span element serves
as a container for other elements or
text similar to DIV, but with a key difference, a div is a block level element, meaning it takes
up the full width of its container and
starts on a new line. A span is an inline element, meaning it only takes
up as much space as necessary and can appear in the same line as other elements, hence the name inline. Right now the chips don't
look very impressive, let's add some styling. Class chip, background
color, secondary color. Now we apply this class
to all span elements. Class chip I'm going to copy this class
to other elements. We can check the difference
between inline and block elements by adding the
display block property to our chip class, which makes span behave
like a block element. Display inline and try switching between display block and display inline to
see the difference. Let's leave the default
inline setting. Our list still doesn't
look very impressive, so let's refine the
styles a little bit. Let's add padding 15 pixels for top and bottom and 35
pixels for left and right. Border radius, 15 pixels
for rounded corners, higher value will result
in more rounded corners. Font weight 600 for fickerFont and let's set font family
to monospace family. Now our list looks odd because the chips
aren't arranged neatly. To fix this, let's use flexbox. Let's create a flex
container class with a property display flex and apply it to
our Div flex container. Now the elements are
arranged in a row, but they overflow the page. To fix this, let's
add flex wrap wrap. To wrap elements automatically. Let's also add some
spacing between rows, marking top ten pixels. Now we can play around with the horizontal alignments
of the elements, justify content, space between. We are already familiar with some options like flex start, flex end or center. For this occasion, there are three more
interesting options, space evenly, which distributes items with equal
space around them. Space around, which adds
space around items, but with less space
at the edges. Lastly, space between, which distributes items with
equal space between them. If you resize your
browser window to full screen and
zoom in and out, you will see how the
chips automatically adjust to fit the
available space. This is the power of Flexbox. Understanding flexbox allows you to create responsive designs, meaning your layout
will look great on any screen size
and Zoom level.
22. Chips Styling: To improve user interaction, let's add a hover
effect that darkens the background slightly when
the user hovers over a chit. Class chip, and pseudoclass
hover filter brightness 90%. Now, let's add a
slight lift effect on hover to make the
chips feel more dynamic. Transform, translate
Y minus three pixels, moves the chip
slightly upwards and cursor pointer changes the cursor to indicate
interactivity. This makes our chips feel
more dynamic and responsive. To give our chips more depth, we can apply a
shadow box shadow. So the first value determines
the horizontal shadow size. The second value sets the
vertical shadow size. The third value adds
blurriness to the shadow, and the last value
defines the shadow color, let's also at opacity 50%. We can add a similar
effect to the text, but make it more subtle. Text shadow, one pixel, one pixel, three pixels, and GBA, black color
with 0.3 opacity. Let's also apply a gradient
as a background color, background linear
gradient, 160 degrees, and then let's pick two colors. The 160 degrees
defines the angle of the gradient and the
two color values create the gradient transition. Experiment with different
angles, for example, 90 degrees and
color combinations to customize the effect. Lastly, let's implement
some chip variants. By default, our
chips are filled. Let's implement an
outline version. Class chip, class outlined, and this will specifically
target chips that also have the outlined class
background transparent. In border free pixel solid
with secondary color. To use the outline chip style, simply add the outline class
to the chip definition. Span class, chip,
and then outlined. Here, the outline styles are applied on the top of
the chip class styles. Now we can easily switch between filled and outlined chip styles.
23. Table: Mm. Let's clean up our
workspace a little. We will remove the glossary of terms and
corresponding styles. Previously, we learned about lists which help structure data. Another way to present structured
data is through tables. Let's create a table to showcase our skills and experience
with different technologies. Let's declare the table
using the table tag. To add a table row, use the TR tag for table row. The first row serves
as a table header, use the TH tag, which stands for
the table header, and we are going to have
three columns, skill, experience time and
experience level 1-10. Now we see a table header. Let's add another
row using TR tag and then add table cell
with data using TD tag, which stands for table data. Table data, HTML, and then
in cell for experience time, three years in the cell for
experience level eight. Let's add another row, DR table data, CSS, two years and seven. Now we have a structured table, but it's not very
readable because it lacks styling.
Let's fix that. Our CSS file is getting large, so we will create a separate
file named table CSS to keep table styles separate and to link
this to our page, at this inside the head section. Link and press Enter and link
it to our table CSS file. By default, the table
is aligned to the left. Let's make it wider by selecting table element and
then with 100%, which ensures the table spans the full width of
the parent element. To improve readability,
let's add a border. Border one pixel, solid gray. However, this only
adds an outer border. To add borders to an
individual table cells, update the CSS like this, select TH element
for table header, and then TD for table cell, and border one pixel solid gray. Now we see double borders. To make them connect seamlessly, at border collapse, collapse
to the table element. Now our table looks much
cleaner and more structured. To sum up, use table tag
to declare the table. Use TR tag to add table row. Use TH tag to add a cell with table header and use TD tag
to add cell with table data.
24. Table nth-child(): Let's refine our table
styles a little bit to make it more readable
and visually appealing. Let's add pudding
five pixels for top and bottom and ten
pixels for left and right to table cells then text align center to align text
to the center of the cell. For our table heading, let's add a background
color using our website's predefined
color scheme. T H element selector, and then background color
variable heading color. However, the solid color
might feel too intense. Let's make it slightly
transparent by adjusting the color in the root
CSS variables like this. Let's also apply it to our H
one header for consistency. H one color, heading color. By default, all table
rows are transparent. That's okay for small tables, but when we add more rows, it can get harder to read. Let's add some more data, and I'm just going to copy this and modify
the data slightly. Let's change this to JavaScript and the second row to C sharp
and experience level 25. Now that we have more rows, it would be easier to read if every second row had
different background color. We can use the end child
pseudo class to achieve that TR for table row and
then common end child, parenthesis, even, and then background
color Lavender to make even rows Lavender. The end child selector selects child
elements according to their position among all
the sibling elements within a parent element. This will apply the style
to every even numbered row. We can do similar
thing for odd rose, table row and child odd, background color, and let's pick some slightly lighter
shade like snow. Great. Now we can easily
distinguish between rose. Let's make the table more interactive by adding
a Hover effect. Table row, hover pseudoclass, filter brightness
90% will darken when Havered and cursor pointer to indicate interactivity. To better match the
overall color scheme, let's make the table
header text liner. Color for text color Snow. Now our table is more readable, interactive and
visually appealing. Feel free to experiment with different colors and styles
to match your own theme. Remember the nth
child pseudo class, which allows you to
select elements based on their position within a parent
element like Nth child, even an nth child odd.
25. Basic Inputs: Now that we learned
about lists and tables, let's talk about forms
and input elements. First, let's create a new HTML
file for our contact form. Let's name it contact form HTML, so we can keep it
separate from index HTML. Now, open it with a
live server extension, and you should see
an empty page. Let's quickly add
basic HTML using a Snippet exclamation
point, and Enter. Let's give our page a
title contact form. Let's reuse styles
from Index CSS. Link and link it to Index CSS. Now, let's add a
container for our form. Div with an ID, contact form. And let's add level one
header contact form. We can reuse the styles we
applied to our About me container by applying them
to contact form as well. In index CSS, find
the A M ID selector, and at IDSelector contact
form after a comma. Now the styles from index CSS are also applied to
our contact form IV. Now we can start
creating our form. So use tag form to
declare a form. A form in HTML starts
with the form tag. Inside it, we will add input elements where users
can enter their data. Now, let's create a text input where users can
enter their name. Input and press Enter, we automatically have type text, and let's also give it ID
name and name attribute name. The name attribute helps
when submitting form data. Okay, we can type
something into the field, but it is missing our label. Let's add a label for name and the title of this
label will also be name. Label is associated with a field through a
four attribute. In this case, the
input ID is name. So label is for name. Placeholder gives users a
hint about what to enter. Let's add a placeholder,
enter your name. And the placeholder disappears when the user starts typing. HTML supports different
data types for inputs. So far we've used text input. Now, let's add a number
input for the user's age. Let's add a new line
R and then label for H input of type number, ID, age, and name age. A number input only
allows numbers. Try typing letters and
they won't appear. Now, let's provide a message
field for longer text input. New line and then label
for message message, text area with an AD
message and name message. Let's also add attribute rows for in a placeholder
type your message here. The text area element allows users to enter multiline text. The rows four attribute makes the field four lines
tall by default, and users can
resize the field by dragging the bottom
right corner like this. Finally, let's add
a submit bottom so users can send their message. Button, type, submit. Send. The type submit tells the button to
submit the form. Right now, clicking the
button doesn't do much. We will handle form
submission later. To sum up, use text inputs for entering single
line text like name. Use number inputs for entering numeric values like
age or quantity. Use text area for entering
longer multi line messages. Use submit button to
submit their form.
26. Form Styling: By default, form elements
look quite plain. Let's give them a modern and
clean look with some CSS. First, let's create a
new style sheet just for our contact form and link it to our contact
Form HTML page. Link contact form CSS. Now, let's apply input
class to all input fields. And inside our CSS, let's create a class input. Let's add padding ten pixels, border zero pixels to
remove the default border, border radius four pixels
for rounded corners. Notice how the border changes
when we click on the input. This happens because browsers
apply a focus outline automatically to remove this
effect at outline none. Now let's make sure our form elements are
properly arranged. Apply the form class
to the form element, and now let's define it. Class form, display flex
to automatically adjust elements and flex
direction column to stack elements vertically. Since Flexbox makes
child elements take up the full
width of the form, our labels and inputs now
behave like block elements. We can now safely remove any extra new line
tags inside the form. Let's add some interactivity, inputs look better
when selected. Class input and then focus pseudo class and
remember box shadow, let's set horizontal
shadow to zero, vertical shadow to zero, and add five pixels blur with
a color var heading color. Now, when a user clicks on
an input or focuses on it, in other words, it stands out. Let's apply label class to every label element in the form. Let's define this class label with a color secondary color, margin, and remember
the clockwise notation. 15 pixels for the top, zero pixels for both sides and five pixels
for bottom margin. Font size small, and
then font weight bold. Finally, let's make the submit
button match our design. Let's give it a
class submit button, and let's define this class
with width 100 pixels, padding ten pixels,
margin top 20 pixels, and let's use algeelfFlex end. The button is inside a flex container so we can
control its alignment. Instead of affecting
all elements, we use line self to move only this button to the
end of the flex container. Let's also give it
border zero pixels and border radius four pixels for rounded corners and
for the background, let's give it a linear gradient. 135 degrees and let's
pick two colors. The first color heading color
and then secondary color. Now we have color gradient. For the text color, let's give it snow and
also font weight bolder. Let's also make the button glow like our inputs
when hovered. We can reuse those
styles just at a class submit button with a pseudoclass
hover after a comma. Now when users hover
over the button, it has the same glow effect
as the inputs on focus. Great. This is my final design and you can customize form
styles to your liking.
27. Dropdown Selection: In web development, there
are many cases where we want users to choose
from predefined options. For example, let's
add a topic field to our contact form so users can select the subject
of their message. Before we start coding, let's learn how to type
HTML elements more efficiently using MT
abbreviations in VS code. Start by typing label, but don't press Enter
yet to add a class of a label using T type dot label. The dot represents
a class in MT, the built in abbreviation
system in VS code. Now press Enter and VS code will generate a label with
a class attribute. Let's also add four
attribute topic. To create a dropdown, use select tag and
don't press Enter yet. Dot input, the dot adds a class, and then the hashtag, the find D ID, hashtag topic. And after pressing Enter, VS code generates a select
element with class input, and IDTpic and add topic
as name attribute as well. Next, add options to let
users choose a topic. Option value, work opportunity. And then label will also
be work opportunity. The second option
will have value of feedback and label feedback, and the third option
will be with a label Or. Now, users can select a topic instead of
typing it manually. To sum up, use the select
tag to create a drop down. Use option elements to define
the available choices. In VS code, use T abbreviations. For example, label dot label generates label element
with class label, and select dot
input hashtag topic generates select element with
ID topic and class input.
28. Radio Selection: Another way to let
users choose from a predefined set of options
is by using radio buttons. Let's ask the user how they
prefer to be contacted. Label with a class
label, contact method. Let's group our
options together with a div now input type
radio with an ID email, name, contact method,
and value email. We also have to add a
label for this input, label with a class
label for email, email. Another input of
type, radio, ID, phone, name, contact
method, and value phone. Label will be for phone Phone. With this setup,
the user can select either email or phone as their
preferred contact method. Notice that both
radio patterns share the same name attribute,
contact method. This makes them part of
the same radio group, meaning only one option
can be selected at a time. Now, let's adjust
the label style to make it look less bold. Class label, radio,
phone size small. Let's apply this class to both labels instead
of a label class. We should provide a field for user to input their
email address now. Label with a class
label for email, email, input type email
with an ID email, name email class input, and let's also add
a placeholder. Enter your email. The type email ensures
that the input field will only accept valid email
addresses. Try it out. If you type something
like Hello, it will trigger an error. To sum up, use the input
type radio element to allow users to select only one option from
a predefined set. Group radio buttons by using the same name attribute to ensure only one
option is selected. Use type email input to
validate email addresses.
29. Checkbox Selection: Check boxes, unlike
radio buttons, allow users to select
multiple options from a list. Let's say we want
to ask the user about their newsletter
preferences, where they can choose
multiple topics of interest. Let's add a label with a class label, subscribe
to newsletter, and then let's group
our options with a div and then input
type checkbox. ID, tech, name, newsletter,
and value tech. And now we have a checkbox. Let's also add a label for this checkbox with
a class label, and for tech, and the
label will be technology. Then let's add a new line and another checkbox,
input type, checkbox, ID business, name, newsletter, and value business, and
the label for business. And the third option, and again, input type, checkbox, ID health, name, newsletter, and Value
Health and label for health. So how this works, the user can check as
many boxes as they wish to receive newsletters
on different topics. Each input type checkbox element represents a selectable option. By using the same name
newsletter attribute for each checkbox, they are logically
grouped together. Let's update the label
style to make it more subtle and we can reuse
those label radio class by adding another class
label checkbox after the comma and then apply this
class to all checkboxes. To sum up, use input type
checkbox to create checkboxes. Group checkboxes by using
the same name attribute. This makes it clear that they belong to the same
form category. Since checkboxes don't restrict users to just one selection, they can check as many
boxes as they wish.
30. Calendar Input: Forms often include
date selection fields like scheduling a meeting
or selecting a birth date. Let's add a calendar
input to our form. I just noticed that I mistakenly gave two fields the
same ID and name. Let's fix that by renaming the email field to use
email address ID instead. ID, email address, and
name email address. Let's also update the
label for email address. Remember that each ID must be
unique in an HTML document and also unique names ensure proper form submission
without conflicts. Now, let's add a
date picker field so users can select a date
for scheduled meeting. Label with a class label for
meeting, schedule a meeting, and then input with a
class input ID meeting, and this input will
have type of date. Let's also add a name
attribute meeting. HTML natively supports a date
picker in most browsers, which means users can choose
a date visually instead of typing it and the browser
ensures proper formatting.
31. Validation And Attributes: Now that our form is
functional and stylish, let's make sure users
fill it out correctly. Some fields should
not be left empty. We can make them mandatory
with the required attribute. Let's make the name
input required, and also let's make the message
field required as well. Now, we can submit a form without entering a
name and a message. Let's say we currently are
not available for meetings. Let's disable schedule
a meeting date picker by adding
disabled attribute. Also, let's disable radio
button for a phone, since we didn't provide
field for a phone number. A disabled field is
completely non interactive. Users can't click or type in it. Sometimes we want to display information without
allowing changes. The read only attribute
prevents edits. So instead of
required attribute, let's add a value
equals user attribute, and then read only. Now, name has the fault value
user and cannot be edited. But in our case, let's require user to enter their name by leaving
the required attribute. For numeric fields like H, we can set limits. For example, minimum
18 and maximum 100. This ensures values stay within
the allowed range 18-100. To sum up, required attribute ensures important
fields are filled. Min and max values set the allowed range
for numeric values, disabled blocks
interaction completely, and read only makes a field
only display information.
32. Submit Form: Mm. Let's wrap up this chapter by making something
actually happen when the user clicks
the submit button. When a user submits a form, an event is triggered. We can use this event to perform an action like
showing a message. So let's add on submit
attribute to our form. The onsubmit event fires
when the form is submitted, and we will write a simple
Javascript function to handle this event. First, add a script d inside the head section
of your HTML file. The script d allows you to write JavaScript inside
your HTML file. Now, let's write
a simple function that will handle
form submission. Const submit equals event and then an arrow,
open curly bracket. We just declared a function that will run when the
form is submitted. Now event dot prevent
the fault parenthesis, stops the page from
refreshing when the form is submitted because normally
when you submit the form, the browser reloads
the page by default. Now let's retrive the
user's name from the form. Const name equals
event dot target, which refers to the form
that was submitted, and then dot Name selects the input field
with the name name. This field right here, and then dot value, re write the text that the user typed into
the input field. Next, let's show an alert
with the user's name. Alert, open parenthesis
and inside double quotes, write, thank you for
submitting the form. Comma and then plus name plus exclamation point
inside the double quotes. Alert is a built in browser JavaScript function that displays a pop up
message in the browser. Now, we need to tell HTML to use that function
when user hits submit. On submit will be
equal to on submit it, and then let's pass the event. Now when we fill the form
and then press submit, the alert will appear.
33. Image: Let's make our index
HTML page more visually appealing by
adding a profile picture. First, let's create
a new folder called Resources inside our
project directory. This folder will store images
and icons for our webpage. Now, place your profile picture inside the resources folder. Feel free to use your own or download this one
from resources. Let's add the profile
picture using the EMG tag. The source attribute is the
relative path to our image. In our case, resources profile. An out attribute will be
equal to profile picture. The out attribute is there in case the source
is not available. For example, if I make a
typo in the image path, the out text will
appear instead. Let's revert that. We can set the width and height of an image directly in HTML, width 100 and height 100, but a better approach
is using CSS. Let's remove the width
and height from the tag and add ID attribute
profile picture. And now define the
styles in CSS for ID selector profile
picture with 100, height 100 and then
border radius 50%. This will make the
picture circular. I just noticed that the
top of the page is clipped because we earlier set body
height to 100 view heights, and now our content
is taller than that. Let's remove this
line from the body. I would like my profile picture to appear next to the text. We can achieve this using
the float property, float right, floats the
image to the right, and float left, moves
the image to the left. Let's also add some margin we, 20 pixels to add spacing
between the image and text. I think that I will move
this entire fragment directly under about
me section like this. And remove this horizontal line. Also, I will wrap the
image and text inside a div and now the experience heading is
too close to the image. Let's add a new line. Let's also improve the container
around about me section, I will remove the border for a cleaner look at border radius ten pixels
to make corners round it. Let's also make the
table more compacted. Inside the table CSS file, let's reduce padding to three pixels for
the top and bottom. And let's make the font smaller. Let's also adjust the padding for the chips inside index CSS, ten pixels for top and bottom, and 35 pixels for
left and right. To sum up, use EMG
tag to add images. Store images in a resource folder for
better organization. Use float property to align
the image next to the text.
34. Link: Mm. Let's add some
external links like a YouTube channel
or LinkedIn profile. To create a link to
an external resource, we use the A tag. Let's create a link for YouTube and then another
one for LinkedIn. Right now, these don't work because the HREF
attribute is empty. I will add my YouTube channel and LinkedIn links like this. Just paste the address
to the HREF attribute. By default, clicking
a link replaces our page to open it in
a new tab at Target, underscore blank, and for
a second link as well. This tells the browser
to open the link in a new tab instead of
leaving our side. Feel free to include more links such as
your social media. I will add my GitHub link, A, and the Github address, target underscore blank Github. We can now remove this extra
new line above the heading. To sum up, use a tag
to create links. Use the HRIF attribute
to store the URL. Use target underscore blank
to open links in a new tab.
35. Link states: By default, links are
blue and underlined, but we can customize them
to match our color scheme. Links have four
different states, normal state with
default appearance. Hover state when the user
hovers over the link, active state when
the link is clicked and visited state after
the link has been opened. Let's apply custom
styles to our links. For the default link, A, margin write ten pixels, Color variable text color text decoration non
to remove underline. Let's make the links
stand out when hovered. A with a pseudoclass, Hover, color, heading color. For visited links, let's reapply
the default link styles. A with a pseudoclass
visited after the comma. Active links will be
the same as Hard links. A with a pseudoclass
active after the comma. To sum up, remember four
different link states, normal, Hover,
active and visited. Use pseudoclasses to style
different link states.
36. Svg: Let's enhance our links by
adding some cool SBG icons. You can find the icons
in resources linked in this pleson and place them
in your resource folder. I will add icons inside
our links right here, EMG and for the source, resources YouTube SVG,
with 15 and height 15. Let's also add an
icon for LinkedIn. Image with a source
resources LinkedIn with 15 and height 15. And for GitHub image with a source resources GitHub
with 15 and height 15. SVG, scalable vector graphics is the format for vector images, meaning they scale perfectly
without losing quality. They are lightweight, flexible, and ideal for icons. Now let's add some
styles to make sure our icons and link text
are nicely aligned. Let's display Links inline flex to turn it into an
inline flex container. Flex direction row ensures the icon and the text
will appear side by side, and let's center
everything to make sure icons and
text align nicely. Justify content, center,
and align items center. Let's also create
a class Link SVG with a margin write
five pixels to add some margin between
icon and link text and apply this class to our
SVG icons inside links. I think I will also add some
more text to the biosection. I will paste those
two paragraphs. And I will make the text a bit smaller across the site
for a cleaner look. Inside the body
element selector, I will add phone size 14 pixels. Now let's remove any relative
phone size stylings from the stilsR here and make
chips padding even smaller. Ten pixels and 25 pixels
for left and right.
37. Navigation: All right. So
here's the problem. We have two separate pages. Our main page, index HTML, and our contact form page, contact Form HTML, but there is no way to
navigate between them. Let's fix that by creating
a navigation bar. First, let's add enough element to structure our navigation. NaF stands for navigation, and then let's create
two diths inside it. Let's add title on the left. H one portfolio and the links will go here
in the second div. Remember, earlier
in this tutorial, we made the body
a flex container. To prevent weird layout
issues like this, make sure we have
flex direction column in the body styles. Now let's add our actual
navigation links. A, and the address will be
index HTML for the home page. Let's also reuse index
HTML for about me, and then the third
link will be to contact form HTML, contact. This will navigate
to contact form. Nice. Now we can move between our main page and
the contact form. Since we already applied
global link styles, we just need to
tweak the layout. Let's add a class Navbar
to our NAF element, and then let's define it. Navbar display flex, justify content space between the title will be on the left and
links on the right, and align items center. Let's also give it a background
color of primary color. With 600 pixels to match
the main content width, pudding 20 pixels and
margin bottom 30 pixels. And to much rounded corners
of our main content, let's make bottom
corners rounded as well. So border bottom right
radius ten pixels, and border bottom left
radius ten pixels. The browser applies default
margins to the body, which might be causing
unwanted spacing at the top. So let's reset it with
body margin zero. The Navbar looks a
bit too tall to me because each one elements
have default margins. Let's fix that as well. I will give this
element ID title and then in style sheet, ID selector title, margin zero. Also, instead of a
background color, let's give the Navbar
a saddle shadow. I will remove this
background color and then box shadow,
zero pixels, four pixels, six pixels, and then let's pick the black
color with some opacity. So now we can navigate to contact form from our main page, but the contact form doesn't
have the navigation menu. So to make sure users can navigate back and
forth between pages, copy the Navbar into
contact form, HTML as well. Now both pages are
fully connected. Let's adjust the skill tags
to match our overall design. I will use outline chips
instead of filled ones. O outlined class to each one of those and we will remove the border and keep
only a shadow shadow. To keep headings in sync with
our Navbar shadowed style, let's add some text shadow. H one and H two, text shadow, two pixels, two pixels, three pixels, and then a black color
with 0.3 opacity. Let's also shorten the section name to
favorite technologies. Finally, let's add some margin
at the bottom of the page. Right here, margin
bottom, 30 pixels.
38. Media Queries: Let's wrap up this
chapter by making sure our page looks great
on all screen sizes. First, let's check how our page looks like
in full screen mode. It looks okay and then
Zoomed in still looks fine. Now, let's press F 12 to
open developer tools. This tool helps web developers test and debug their pages. One of the useful
features is device mode, which lets us
preview how the page would look like on
different mobile devices. To enable it, click on the Togo Device
toolbar at the top. Select a device like iPhone
SE from the drop down menu. Unfortunately, our page looks unreadable on smaller screens, but don't worry we can fix
this with media queries. Right now, our layout uses a
fixed width of 600 pixels, which doesn't really scale
well on smaller screens. Our Navbar also has the
same issue right here. We need to reduce the width on smaller screens. Here's how. At media and then max with 600 pixels inside parentheses and then open curly brackets, these styles will
apply when the screen width is 600 pixels or smaller. We want to change the
width of about me section, contact form section, and also Navbar class
to be a width of, let's say, 400 pixels. Let's check how this
looks like now. It still looks a bit too wide. Let's make it 330 pixels
for better readability. Now our page seems to
be fully readable on even the smallest iPhones
and other mobile devices. You can also use
other conditions like minimal width to adjust the layout for bigger screens instead of hard coding widths, let's move these values to CSS variables for
a cleaner code. So in the root here at the
fault with 600 pixels, and then let's say small
screen width 330 pixels. Now update the styles
to use these variables. So right here in About me
section and contact form, we will use default width
and the same for Navbar, the fault with for
this media query, we want to use small screen W. This concludes our free
HTML and CSS tutorial. I'd love to hear your feedback. Let me know what you
think. Remember to practice your coding skills. For an exercise, you can
enhance your page even more. Here are some ideas
to try on your own. You can play with colors, customize your page
to match your style. For example, change
colors in root variables. Support dark mode. Go back and tweak the styles to ensure dark mode
looks great too. You can test some more on different screen sizes and make sure it looks
great everywhere. Thank you for
watching my tutorial. If you are interested
in learning more about web development
and programming, be sure to check out
my other tutorials.
Clara_Art.H, Artist_Painter
