Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Create a Portfolio Using HTML and CSS!
You have completed Create a Portfolio Using HTML and CSS!
Preview
In this video, we’ll construct the HTML structure based on the provided mockups.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
Ready to get started?
0:01
Let's open up index.html.
0:02
First, I'll use the handy Emmet shortcut
to build the initial structure by typing
0:05
an exclamation point and
hitting the tab key.
0:09
I'll add in my fictional person's
name within the title tag so
0:12
it displays in the browsers tab.
0:15
This blue squiggly line is here because
of the spellchecker extension I use and
0:18
it doesn't recognize this word.
0:22
So don't worry about that.
0:24
I'm just going to ignore it for now.
0:26
While we're here in the head element,
let's go fetch the fonts we'll be needing.
0:28
It looks like we need Young Serif
Regular and Open Sans,
0:31
and they're both on Google Fonts.
0:35
Let's go get them.
0:37
I've added a link in the teacher's
notes below for you.
0:38
Let's search for Young Serif.
0:41
There it is, let's click it and
see what options it has.
0:44
Looks like it only has one so
let's select it.
0:51
Now let's search for Open Sans.
0:56
Normally, I would grab the Regular 400 option, but
I've done some inspection already to
1:06
save us time, and this Light 300
is actually closer to our mockups.
1:12
Again, feel free to search around and
find fonts that match your style and
1:16
personality.
1:20
We can view our selections by
clicking the shopping bag icon here.
1:21
I'm gonna use the HTML links here and
just copy this entire block of code.
1:25
And I'll paste it right
here in the head element
1:32
Let's grab our CSS code as well so
that we have it for later.
1:38
I'm gonna paste these in our style.CSS
file and just comment them out for now.
1:45
Let's quickly link up our CSS and
JavaScript files as well.
2:00
Perfect, I'm going to speed this up
slightly and describe my actions along
2:23
the way so that this video doesn't take
too long, but don't worry, I'll show
2:27
everything I've written afterwards so
you can pause and inspect the code.
2:31
Remember, there are always multiple
approaches you can take to find solutions
2:35
when coding.
2:39
This is just my approach.
2:40
I'm going to first open up the mobile
mockup and set it up on the side.
2:41
I'm starting off with a header element.
2:53
Inside I'm putting Chuck's
name inside of some span tags
2:55
For the mobile menu, I'm going to place
both the hamburger and close icons inside
3:06
of a button element, copying the svg
code from the images folder.
3:10
I'm giving each of the icons a unique
ID property as I plan on toggling their
3:38
display with JavaScript later on.
3:43
I also plan on keeping this
mobile menu accessible and
3:52
utilizing these attributes
within the JavaScript as well.
3:55
So I'm giving the button an ID, a class,
and an aria-expanded attribute and
3:58
setting it to false by default.
4:02
This is an attribute used to indicate
whether a collapsible content area or
4:06
component is currently expanded.
4:10
Aria-label is an attribute used
to provide an accessible name for
4:13
elements, typically when there's no
visible text describing their purpose.
4:16
And lastly, I'm adding
an aria-controls attribute.
4:22
This is an attribute used to specify
the ID of another element controlled by
4:25
the element on which
this attribute is set.
4:30
So I'll add this value as the ID
on our collapsible menu shortly.
4:32
Now I'm going to open up
the mobile menu mock-up.
4:38
I'm adding some nav tags and
giving this the matching ID of mobileNav.
4:45
I'm giving it a class for styling and
4:55
an aria-hidden attribute
set to true by default.
4:57
This attribute is used to indicate that an
element and all of its descendants should
5:00
be hidden from accessibility tools,
like screen readers.
5:04
Inside each list item, I'm adding anchor
tags that will take the user to sections
5:16
of the page by their respective IDs,
which I'll give them when we build them.
5:21
For the desktop navigation, I'm copying
and pasting the navigation we just made,
5:37
removing the aria-hidden and
ID attributes and changing its class name.
5:42
Wow, that was a lot, but
that should wrap up the header element.
5:52
Let's go back to the mobile mockup and
continue on.
5:57
I'm adding some main tags to
wrap the bulk of our page.
6:04
For the hero section, I'm adding a section
element with a class of hero-container.
6:08
I'm giving it two divs, one for the image
and the other for all the text, and
6:14
giving them relevant class names.
6:18
For the colored square
behind Chuck's image,
6:25
I'm just using a div with
a class to style it with later.
6:27
Then I'm adding an image
element with the path to
6:31
my placeholder image and
updating the alt text.
6:37
For the text container, I'm making Chuck's
name the h1 of the document separating his
6:46
title and location into paragraph elements
and making the button an anchor tag.
6:51
I'm giving it a class of button,
abbreviated, and
7:10
an href to the project's ID.
7:14
Cool, let's keep going. I'm creating another
section element for the about section
7:20
giving it the ID of about to match our
navigation links and a class for styling.
7:26
I see at the top of each section
there's this little green square, so
7:32
I'm creating a div with a class that
I'll reuse each time I come across it.
7:36
Each section's heading looks identical.
7:53
So I'll give them all
a heading level of two so
7:56
they can all be styled in one place.
7:59
I noticed that the about text and
the description text in the projects
8:03
are styled the same, so
I'll give them the same class as well.
8:07
I'm copying and pasting this about
text from the variables.text file.
8:15
This button looks styled the same as
the last one, and all the others for
8:31
that matter.
8:35
So I'm going to continue
giving them the button class.
8:36
That wraps up the about section.
8:41
Let's start hitting the projects.
8:44
I noticed in the desktop mock-up that
each project section's layout changes
8:46
similarly to the hero section, so I'll
be sure to separate those accordingly.
8:50
I'm creating a new section element with
the matching ID to our navigation links
9:00
and a class for styling Then I'm adding
9:05
the empty div with the same class I gave
to that green square earlier in our h2.
9:12
I'm making each individual project
an article element and giving it to divs,
9:21
one for the image and
one for all the text.
9:27
I'm just using a div for the project image
but definitely add your own images for
9:40
your projects here.
9:44
I'm making each project title an h3,
9:51
and adding the technologies
used into their own div.
9:54
The description text is styled
the same as our about text, so
10:20
I'm giving this paragraph element
the same class as I did previously.
10:24
To ensure these buttons stay side by
side I'm nesting them inside of their
10:29
own div as well.
10:33
Now I'm copying and pasting this
entire article element twice, and
10:47
then I'll copy and
paste in the info from variables.txt.
10:51
Awesome.
11:35
Moving on to the contact
section. I'm creating yet
11:38
another section element with the ID
to match the navigation links.
11:44
Then I'm adding in our div for
our decorative square again,
11:49
followed by our h2 and
a paragraph element.
11:53
Like the buttons in the project sections,
12:04
I'm going to add all of these social icons
into a div so they can be displayed side
12:07
by side. To make them all links,
I'm going to nest
12:11
each SVG inside of an anchor tag copying
the SVG code from the images folder.
12:17
And to wrap this up, after
the closing main tag,
13:06
I'll add a footer element.
13:09
Inside, I'm adding a span tag for
the text.
13:12
We made it.
13:25
Let's check our work in the browser.
13:26
Wow, this is looking so fancy,
I don't think any CSS is even necessary.
13:34
Kidding, of course.
13:39
In the next video, we'll start adding
some styles to get this looking great.
13:41
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up