Preview
Video Player
00:00
00:00
Introducing the Course
3:33Together we’ll be building the CSS for the homepage of a travel website advertising Lake Tahoe, California. The homepage works with a number of both foreground and background images, introduces web fonts from two different sources, and, importantly, remains legible on a variety of device screens.
[MUSIC]
0:00
Hi.
0:09
My name is Anwar.
0:10
I'm a designer, a developer,
and a teacher at treehouse.
0:11
My pronouns are he, him.
0:14
In this course we're going to learn CSS
properties for enhancing visual design.
0:17
We'll cover various properties for
styling text,
0:23
including loading Web Fonts
from external resources.
0:26
We'll learn techniques for turning our
CSS boxes into more than just rectangles.
0:30
And finally, we'll learn some
really cool visual effects
0:36
using CSS filters and gradients.
0:40
Together we'll be building the CSS for
0:43
the homepage of a travel website
advertising Lake Tahoe, California.
0:46
The homepage works with a number of
both foreground and background images.
0:52
Introduces Web Fonts from
two different sources and
0:57
importantly, remains legible on
a variety of device screens.
1:02
To get started with our Lake Tahoe site,
1:08
simply launch a new workspace and
follow along.
1:11
You can also download
the project files for
1:14
each lesson in the download
section of each page.
1:19
The style.css file I've provided is blank,
1:24
apart from a universal selector with
a box sizing border box declaration,
1:28
a CSS rule increasing our base font size
to 20 pixels from the default 16 pixels,
1:36
and a declaration that will
give us responsive images.
1:44
You'll also notice I've included
comments relating to how we're going
1:50
to organize our CSS.
1:55
A variety of methods exist for
organizing your styles, and
1:57
no one's scheme is universally
accepted by developers.
2:01
But for this lesson,
I've divided our CSS into web fonts,
2:06
base styles, main styles,
and media queries.
2:12
I'm going to use my base styles to make
a broad changes using CSS type selectors,
2:17
such as making my headings larger or
styling the appearance of text hyperlinks,
2:24
while more specific selectors
will go in main styles.
2:30
I've included readings in the teachers
notes on organizing your CSS.
2:34
This course builds on concepts,
techniques and
2:40
principles covered in previous
Treehouse CSS courses.
2:44
And assumes you're familiar with
the topics covered in those two courses.
2:48
Including, CSS Selectors and
2:52
Values and Units, the CSS Cascade,
2:57
the Box Model, Display and
3:03
Positioning and Media Queries.
3:07
If you're not comfortable with all
the topics I just listed, check out
3:12
Treehouse's courses on CSS basics and CSS layout linked in the teacher's notes.
3:17
Then join me right back here.
3:23
Otherwise, we'll check
out the project files and
3:25
begin writing CSS in our next video.
3:29