Preview
Video Player
00:00
00:00
Let’s Start Coding
3:46Get geared up for coding as we recap what you've learned so far and set the stage for this course. Understand what you'll be taught, the project you'll build, and how to set up your coding environment. We'll introduce you to opening workspaces and the basics of using them, including previewing, saving, and essential editing functions.
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