How to create a website using html
and css
Overview
COURSE OUTCOMES
You'll build four
simple websites using web development fundamentals, including HTML5/CSS3 and
Bootstrap. You'll learn to understand and modify the structure of basic
website, as well as how to change the way a page looks and is laid out.
WHY LEARN HTML AND CSS?
Everything you see in a website is a result of the combination
of HTML and CSS. With these two languages, you will have the skills you need to
bring your website design to life. Jumpstart that vision by using Bootstrap, a
popular library that allows you to create beautiful, responsive pages with very
little time and experience.
Syllabus
1 Site Structure
Anatomy of an HTML Element
Let's explore the basic anatomy of an HTML element.
Line 9 of index.html contains
a heading element:
<h1>You're Building a Website!</h1>
1.
All HTML elements begin with an opening tag. In
this case, the opening tag is
<h1>.
2.
Most elements require a closing tag,
denoted by a
/.
In this case, the closing tag is </h1>.
3.
The website user only sees the
content between the opening and closing tags.
Note:
There are several other HTML elements in index.html in addition to the heading
element. Don't be alarmed! We will encounter most of these in more depth during
the lesson.
Instructions
1.
In index.html, change the text that appears
between the
<h1> opening
tag and the </h1> closing
tag.
Click Run to see the new text shown in the web
browser!
<!DOCTYPE html>
<html>
<head>
<title>Ollie
Bike Sharing</title>
<meta
charset="utf-8"/>
<link
rel="stylesheet" type="text/css"
href="main.css">
</head>
<body>
<h1>You're
Building a Website!</h1>
</body>
</html>
2 A Closer Look at CSS
Link to a Stylesheet
Take a look at the web browser. Technically, this is
the same site you saw in the previous exercise. It contains the exact same HTML
elements and content as before. What's missing? The CSS that was used to
previously style the site has been unlinked.
The HTML link element links a CSS file to an HTML file so
that CSS styling can be applied. Here's an example of the link element:
<link rel="stylesheet" type="text/css" href="main.css"/>
About link:
1.
The link element uses three
attributes:
-
-
-
-
rel:
Specifies the relationship between
the current file and the file being linked to: in this case, the rel attribute is
"stylesheet".-
type:
Specifies the type of file linked to.-
href:
Provides the URL of the file being linked to.
2.
Like the HTML image element,
link is self-closing. It does not need a closing tag.
3.
In the example above, main.css is
an external style sheet. Using external stylesheets is one of the most popular
ways to write CSS. Inline CSS is another method.
<!doctype html>
<html>
<head>
<title>Sprout</title>
</head>
<body>
<h1>Mystwood
Publishers Ltd.</h1>
<div
class="hero">
<h2>Sprout.</h2>
<p>A
book by George Bedford Daniel.</p>
<a
href="#">Read now.</a>
</div>
<p id =
"footer">© Mystwood Publishers Limited</p>
</body>
</html>
3 Boundaries and Space
Create a Border
The border property can be used to visually define a
page element's outer edge.
In CSS, the border property's value requires three parts:
1.
thickness: Sets the thickness of the
border, using pixels, ems, or rems.
2.
type: Sets the border type. Common
options are
solid, dotted,
and dashed.
There are many others.
3.
color: sets the border's color, using
named colors, HEX, or RGB values.
The CSS below gives a paragraph
element a solid black border that is 2 pixels thick:
p { border: 2px solid black; }
Instructions
1.
The web browser currently
displays Tundra Gallery's homepage. Let's give each gallery item a border.
In main.css locate the
.gallery-item class
selector. Add border: 5px
solid #FFF;, like so:.gallery-item { border: 5px solid #FFF; }
Click Run to see borders around each figure with the
class
gallery-item in
the web browser.
<head>
<title>Tundra
Gallery</title>
<meta
charset="utf-8"/>
<link
href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900'
rel='stylesheet' type='text/css'>
<link
rel="stylesheet" type="text/css"
href="main.css">
</head>
<body>
<header>
<h1
class="page-title">TUNDRA GALLERY</h1>
<p
class="page-description">The Tundra Gallery is a collection of
photographs from three distinct areas: arctic tundra, alpine tundra, and
antarctic tundra. In tundra, the vegetation is composed of dwarf shrubs, sedges
and grasses, mosses, and lichens, making for diverse ecology and stunning
photos. </p>
</header>
<div
class="gallery">
<figure
class="gallery-item">
<img
class="thumbnail"
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss1.jpg">
</figure>
<figure
class="gallery-item">
<img
class="thumbnail"
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss2.jpg">
</figure>
<figure
class="gallery-item">
<img
class="thumbnail"
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss3.jpg">
</figure>
<figure
class="gallery-item">
<img
class="thumbnail"
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss4.jpg">
</figure>
<figure
class="gallery-item">
<img
class="thumbnail"
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss5.jpg">
</figure>
<figure
class="gallery-item">
<img
class="thumbnail"
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss6.jpg">
</figure>
</div>
<nav>
<ul>
<li><a
href="#"><b>Arctic</b></a></li>
<li><a
href="#">Alpine</a></li>
<li><a
href="#">Antarctic</a></li>
</ul>
<div
class="contact-btn"><a>Contact</a>
</div>
</nav>
</body>
</html>
4 Building with Bootstrap
Connecting to Bootstrap
Before Bootstrap can work for
us, we need to link to it.
In earlier lessons, we linked only to main.css.
Now, in addition to main.css, we will link to a URL that
hosts Bootstrap.
The HTML link element makes
Bootstrap available to us. Remember that the link element is typically
contained within HTML head tags.
<head> ... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> ... </head>
Above, the
href attribute
is set to the URL https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css.
Let's explore what Bootstrap can do for us.
1.
Notice the "Skillfair"
webpage to the right and locate the diagonal arrows in the top right corner of
the web browser (near
https://localhost:8000/).
Click the arrows to toggle the web browser between narrow and full-width views,
and observe the following:
1.
Navbar items do not change
position as you toggle the webpage width.
2.
The "Homemade Goods"
text appears on the far left side of the webpage.
3.
Photographs increase in size
when the web browser is toggled to full-width.
4.
Social media icons at the bottom
of the webpage appear disorganized.
Click Run after you have observed these points.
2.
Now
we will connect to Bootstrap and see changes to the webpage layout.
In index.html, locate the
head element.
Inside head,
create a link element
to link to Bootstrap:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
Click
Run.
Toggle
the web browser's width again to notice the following changes:
1.
Navbar items change position
based on the webpage's width.
2.
The "Homemade Goods"
text is now centered.
3.
"Kitchen",
"woodwork", "antique" and "gifts" photographs are
arranged two per row when the webpage is full-width.
4.
Social media icons appear
organized and change position at full and narrow widths.
Bootstrap's grid is responsible for this screen-width
responsiveness. Click Next to learn more!
<!DOCTYPE html>
<html>
<head>
<title>Skillfair</title>
<meta
charset="utf-8" />
<link
href='https://fonts.googleapis.com/css?family=Roboto:300,400,700'
rel='stylesheet' type='text/css'>
<link
rel="stylesheet" type="text/css"
href="main.css">
</head>
<body>
<header class="container">
<div
class="row">
<h1
class="col-sm-8">Skillfair</h1>
<nav
class="col-sm-4">
<p>newest</p>
<p>catalogue</p>
<p>contact</p>
</nav>
</div>
</header>
<section
class="jumbotron">
<div class="container">
<div
class="row text-center">
<h2>Homemade
Goods</h2>
<h3>This
Year's Best</h3>
<a
class="btn btn-primary" href="#">See all</a>
</div>
</div>
</section>
<section
class="container">
<div
class="row">
<div
class="col-sm-6">
<p>kitchen</p>
<img
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/kitchen.jpg">
</div>
<div
class="col-sm-6">
<p>woodwork</p>
<img
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/woodwork.jpg">
</div>
<div
class="col-sm-6">
<p>gifts</p>
<img
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/gifts.jpg">
</div>
<div
class="col-sm-6">
<p>antiques</p>
<img
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/antique.jpg">
</div>
</div>
<div
class="row text-center">
<a
class="btn btn-secondary" href="#">View Complete
Catalogue</a>
</div>
</section>
<footer
class="container">
<div
class="row">
<p
class="col-sm-4">© 2016 Skillfair</p>
<ul
class="col-sm-8">
<li
class="col-sm-1">
<img
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/twitter.svg">
</li>
<li
class="col-sm-1">
<img
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/facebook.svg">
</li>
<li
class="col-sm-1">
<img
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/instagram.svg">
</li>
<li
class="col-sm-1">
<img
src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/medium.svg">
</li>
</ul>
</div>
</footer>
</body>
</html>
No comments:
Post a Comment