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 WordPress Basics!
You have completed WordPress Basics!
Preview
Build an engaging About section that introduces the site owner and adds personality to the website. You’ll combine text, images, and layout tools to create a balanced content section.
This video doesn't have any notes.
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
How did you do on the About Me section?
0:00
Good, I hope.
0:02
If you got stuck, no worries.
0:03
Here was my approach.
0:05
I added a new Flexbox container
with a vertical layout.
0:07
Then I added a heading element.
0:12
I ensured
0:24
the HTML tag type was an H2
as we already used our H1
0:24
and this is the next level of heading
to categorize our sections.
0:28
Then, much like our buttons in the hero,
0:38
I saw that our image
and text were side by side, So
0:40
I added another container here
and changed its direction to Row
0:43
Horizontal.
0:46
I added in the image.
0:49
Then the text editor widgets.
1:08
I had a tricky moment here
1:19
as the text was taking up a lot
more horizontal space than the image.
1:20
Here's how I fixed it.
1:24
In the Advanced tab for both elements,
I changed the Width property
1:26
from Default to Full Width 100%.
1:30
This allowed both
1:34
elements to take up 50% of the container.
1:35
No worries
if that one was troublesome for you,
1:38
but I hope you experimented and tried
things out.
1:40
There were a few small things I added too,
but again,
1:44
I hope you played around with things
and found something that you like.
1:46
So for the entire container,
I added some Top Margin to give some space
1:49
between this and our Heroes section.
1:53
Similarly
I added some bottom margin to the heading
2:00
to space things out there as well
2:03
To get these rounded corners on the image
2:09
I went to the Style tab
and adjusted this border radius property
2:11
Pretty cool, huh?
2:16
If you have a perfectly square image
and adjust this all the way,
2:17
it can give you a circle shape
2:21
instead of using that masking option
that we played with earlier.
2:22
I also added a box shadow
with the values of 2
2:25
on the horizontal and vertical options,
just to make it pop a bit.
2:28
In the text
field, I highlighted some important lines
2:33
I wanted to stand out and selected
this bold text option
2:36
that appears here.
2:39
Lastly,
2:50
in the Advanced tab, I chose the Center
option on this Align Self property.
2:51
Much like Align Items
on an entire container,
2:56
you can use this to adjust the alignment
for an individual item
2:59
within a Flexbox container
The only other things I changed
3:02
was the text alignment in mobile view
and the header text size
3:06
So in desktop view
3:14
I have the heading at 50 pixels
3:15
And to keep it a bit smaller
than our H1 up top
3:23
I changed it to 40 in the tablet
3:26
and 35 in mobile.
3:30
Nice.
3:34
Don't feel
the need to have my exact settings here.
3:35
The important thing is consistency.
3:38
The spacing between sections of the page
or font sizes of these H2 headings
3:40
and body text should remain consistent
throughout the page.
3:45
As far as the entire layout of the section
goes, there's always more than one way
3:48
to accomplish these things.
3:52
So if your approach was different
than mine, no worries.
3:54
I hope you took that opportunity
3:56
to play around
with different properties and styles.
3:58
Maybe you found a layout
you like even better.
4:01
Alright, in the next video
we'll play around with Grid
4:03
and wrap up the homepage
with the Projects section.
4:06
See you there!
4:09
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