In this stage, our focus was understanding
the fundamentals of HTML and CSS.
0:00
HTML, or Hypertext Markup Language,
consists of a collection of tags
0:06
that we use to instruct the browser
on how to structure our webpages.
0:11
We do this by surrounding the content
of our webpages with these HTML tags.
0:17
Then we use CSS, or
Cascading Style Sheets,
0:23
to tell the browser what we want
the content between the tags to look like.
0:26
As we've come to understand, HTML and
0:33
CSS are the foundation of websites and
web applications.
0:35
Virtually everything on the web,
to some extent, relies on HTML and CSS.
0:39
This is why learning the basics is
an excellent starting point for
0:45
your journey into the world of coding.
0:48
Before we get into coding, let me get
you all set up to code along with me.
0:52
In the bottom right corner of this video,
you'll find a launch workspace button,
0:56
click that.
1:01
Treehouse Workspaces is what
we'll use to write our code.
1:02
You don't have to have any special
software on your computer to run
1:06
Treehouse Workspaces.
1:10
Your workspace should
look something like this.
1:12
If you've never used our workspace before,
in the teacher's notes below this video,
1:15
you'll find a link to a video
teaching you all about workspaces.
1:20
I'll also guide you through
workspaces throughout this course.
1:25
To the left of your screen,
you'll find a list of files.
1:29
Click on the file named mockup-index .png.
1:33
Here, you'll see a mockup of the project
we'll create in this course.
1:39
We're creating a webpage where
the homepage will showcase our favorite
1:43
recipes.
1:48
Clicking on a recipe name will take
you to a dedicated recipe page.
1:49
You can preview the mockup for
this by clicking mockup-recipe.png.
1:54
On the recipe page, we'll feature
an image of the dish, a description,
2:01
a list of ingredients, and
the instruction steps to cook it.
2:06
All the text we'll use in this course
can be found in the recipe.txt file,
2:10
so we don't need to type out all the text.
2:16
We can simply copy and
paste the text as needed.
2:19
One main thing I want to point out is
whenever you make any changes to a file,
2:23
for example,
in the recipe.txt file at the very bottom,
2:29
let's change the word Rachel to your name.
2:33
So I'll type Laura.
2:36
You'll notice an orange dot appeared
next to the file name in the File tab.
2:39
This dot indicates that
there are unsaved changes.
2:45
To save the changes,
simply click File, then Save.
2:49
Alternatively, you could use
the shortcut displayed on the right.
2:53
For me, it's Cmd+S.
2:57
Once saved, the orange dot disappears.
3:00
Throughout this course, if you make
changes to your HTML or CSS, but don't see
3:03
those changes reflected in the browser,
always remember to save your file.
3:08
I'll do my best to remind you to
save each time we make changes.
3:14
One last tip is to have the workspaces and
this video open side by side like this.
3:18
That way, you can watch the video and
code along with me.
3:25
Those are the key aspects of workspaces
that I wanted to cover for now.
3:29
I'll make sure to guide you through any
additional features of workspaces as
3:34
needed.
3:38
Up next, we'll begin crafting
the structure of our webpage using HTML.
3:39
I'll see you there.
3:45