Heads up! To view this whole video, sign in with your Treehouse account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Building Your First Portfolio Site with Jekyll with Stedman Halliday
36:30 with TreehouseThis presentation will walk viewers through designing, developing, and deploying their first portfolio site with Jekyll.
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
[MUSIC]
0:00
Next up, I am delighted to
introduce Stedman Halliday.
0:07
Stedman Halliday is a multi disciplinary
designer from Los Angeles, California.
0:12
His work focuses on digital products,
brands and
0:16
media with an emphasis on design
technology, advocacy, and education.
0:20
Currently, he manages Designers Guild,
a community of about 20,000 designers
0:25
in 100 countries, committed to sharing
knowledge and resources for mutual growth.
0:30
Everyone, please welcome Stedman Halliday.
0:36
>> Hi everyone, thank you so
much for attending my talk.
0:40
Let's see I'm gonna go ahead and
get our presentation up.
0:45
There we go.
0:52
So I'm hoping everybody can see that.
0:53
There we go, great.
1:00
So today I'm gonna be talking about
building an entry level portfolio.
1:02
I actually taught a class on this this
spring to a bunch of novice developers.
1:07
So I'm gonna talk a little bit
about stack and code today but
1:13
also give a lot of tips for
the general design and
1:18
strategy behind how you make the decisions
while building your portfolio.
1:21
So without further ado, let's get into it.
1:26
I'll just introduce myself
a little bit first.
1:32
I'm a designer, developer and
educator from Los Angeles.
1:34
And like Gil said, I focus on
digital products, brands and media.
1:38
And I'm really interested in technology,
advocacy and education.
1:42
Let's go and get started.
1:49
So first I wanna talk about Jekyll,
which is a static site generator
1:54
that I really recommend for
building your first portfolio site.
1:59
A static site generator is going to
build you a site that is really simple.
2:04
So the advantage of that is that what
goes on the server is what's gonna
2:10
show up on the client and the browser.
2:14
You're not gonna have to deal
with any databases or API's and
2:16
you're gonna have a pretty transparent
architecture for your site.
2:20
So that's a huge advantage when
it comes to maintaining it,
2:24
not dealing with plugin upgrades
to like It's also flexible.
2:29
Your static site generators are gonna
preserve that transparent architecture,
2:33
but they're also gonna add some simple and
powerful features that really make things
2:38
easier for you and
increase the flexibility of your built.
2:42
Static sites are also very fast, so
they're pretty speedy compared to
2:46
dynamically generated websites because
you're not querying databases or anything.
2:50
And so that's also really good for
SEO rankings, fast sites rank better.
2:55
And best of all, it's really easy
to host static sites for free.
3:00
I do really recommend GitHub Pages for
free hosting and they actually support
3:04
ductile so you can build your
site right from your repository.
3:08
So a little bit about Jekyll now.
3:14
Jekyll works by taking text that's written
in your favorite markup language, and
3:17
it uses layouts to
create a static website.
3:22
So you're gonna deal with your regular
front end web languages, HTML, CSS,
3:24
JavaScript, and that's gonna help
you tweak the look and feel and
3:29
function of your site.
3:33
But you also have a little flexibility
in that you could write markdown that
3:34
compiles to HTML.
3:38
So you can write pages just like
you write your GitHub READMEs, but
3:39
then using the layouts,
it's gonna basically take the content
3:44
of those pages and scaffold them
into fully realized web pages.
3:49
Another interesting thing about
Jekyll is that it's gonna use YAML.
3:54
So you'll use YAML for
data in your configuration and
3:58
what's called frontmatter.
4:02
That's gonna help you control
your URLs and permalinks,
4:05
it's gonna help you change the data
displayed on the page and more.
4:09
And so the layouts and
the templating language,
4:13
the templating language
is liquid from Shopify.
4:16
Together with the data,
that's gonna give you the recipe for
4:18
baking all of these raw ingredients
into a new unfinished static site.
4:22
So all of those things go into Jekyll,
4:27
there's a build generation process
usually run on the command line.
4:29
And now that you've got a production
website that's ready to be deployed to
4:34
a server, or GitHub pages, or
any other free hosting servers.
4:38
So I'll talk a little bit about the YAML.
4:44
This is an example of
part of a config file.
4:47
So Jekyll gives you a lot of flexibility
to customize how it builds your site.
4:51
The config file is a YAML file where
you can use key value pairs like this,
4:56
to be able to specify global settings and
the defaults for
5:00
things like your site name,
your permalink structure,
5:03
where the production site is generated,
and even more.
5:06
You can also add arbitrary data here to
use throughout the site if you'd like.
5:09
So, for example, if you gonna reuse
your email address over and over or
5:12
social media handles.
5:16
You can define those here and use them as
sitewide variables on whichever pages or
5:18
layouts you'd like.
5:22
So installing Jekyll and setting your site
up with the config file are also really
5:24
good ways to introduce yourself to
working with the command line more.
5:28
And using build tools for
the web before becoming bigger and
5:31
bigger part of your process as
you build more complex projects.
5:34
This is the other part of where YAML is
usually included in Jekyll which is called
5:40
frontmatter.
5:44
Jekyll frontmatter is a block of VMO that
is placed at the beginning of other files,
5:45
and those files are treated
specially by Jekyll.
5:50
So some default behaviors can be
set here like layout and title.
5:53
But then you can also place arbitrary
data here that's relevant to
5:59
the specific setting.
6:02
So maybe you wanna define a food for
the page that's in the second image here.
6:03
And you can access
the value of that variable
6:08
to display data on pages with
what are called liquid cuts.
6:11
So you can see those pairs of curly
braces invoking the food variable for
6:15
the page, and that's gonna display
pizza in that level 1 heading.
6:20
So this really makes content
management easier by abstracting
6:25
your data all the way to the top of
the page in that front matter block.
6:29
And it makes it easy to reuse
data in different contexts.
6:33
So that's part of the flexibility we
were talking about with static site
6:36
generation earlier.
6:38
Here's another example.
6:42
And this is also an example of
an additional item that Jekyll
6:44
gives you to create flexible layouts.
6:49
So here's an example of for loops.
6:52
And this is showing a navigation example.
6:55
So up top we have multiple navigation
items, each with a title and a URL.
6:59
And on the bottom, we have a forloop.
7:05
So it's saying for each link in
the navigation data for the site,
7:09
it's going to print out this list
item with an anchor element that has
7:13
its href attribute set to
the URL value for the link and
7:18
it's in our text set to
the title value for that link.
7:22
It's going to use the different
values up top each time.
7:26
Each item is gonna be
delineated by that hyphen.
7:30
So it's actually gonna print out to
list items here in this navigation menu.
7:33
So this really helps with the concept
called DRY, don't repeat yourself.
7:38
You can abstract things away with
this liquid templating language.
7:42
And that's going to really reduce
your labor and potential for
7:45
errors since you're only
writing the markup once.
7:48
And then you have a single
place up top in your front
7:50
matter where you edit all of it.
7:54
Another example of a control
structure is if statements if else.
7:58
So you can introduce control logic this
way as well, and check conditions.
8:03
So this is really just the beginning
of the flexibility that liquids
8:09
templating language offers in Jekyll.
8:14
But for this example, we are looking
to loop through the docks in the site.
8:17
So for each dock in all of the site docks.
8:23
And then we wanna see if the category
of that dock is set to getting started.
8:26
And if and only if it is, then we're
going to print out that list item.
8:32
So this is a an easy way to filter
based on that condition, right?
8:37
We're only displaying dogs in
the category and getting started.
8:41
I'll talk about a couple
ways to build with Jekyll.
8:48
So one easy way to get started
is building with themes.
8:50
Jekyll has a really well
supported ecosystem of free and
8:56
premium themes created by a community
of really talented developers.
8:59
And you can override the themes,
default layouts and
9:03
styles to customize your
site's presentation.
9:06
Some themes even use additional plugins
and programs, those are often included as
9:08
Ruby packages called gems,
since Jekyll runs [INAUDIBLE].
9:13
These are called gem based themes and
they can be a really great entry point to
9:16
learning a little bit more about
package and dependency management,
9:21
which is set to building even
more complex web applications.
9:26
Here are some of the themes for
Jekyll portfolios.
9:30
You can find more themes in Jekyll
documentation but one theme that I really
9:36
think could be great for some
developers getting started on the first
9:41
portfolio is called the portfolYOU theme,
and that's by Youssef Raafat.
9:45
These themes architecture and
9:49
configuration options might be a little
more on the complicated side, but
9:51
the trade off here is that it has
some really well documented features.
9:55
And they cater to a developer
portfolios needs and
9:59
add a lot of extra bells and
whistles that can be great for you.
10:02
So, some examples are the ability
to search posts by title tags or
10:06
descriptions.
10:10
You have progress bars for skills.
10:12
You have education and
experience timelines.
10:15
And the ability to even
configure a dark mode theme.
10:18
One really valuable feature of this
theme that I'd like to talk about,
10:24
is that you have remote projects.
10:29
So, you're able to automatically import
your GitHub repositories as projects by
10:32
just setting your GitHub information up in
the conflict pile we talked about earlier.
10:36
And then on your project page,
including the name of the repository that
10:41
you'd like to automatically
fetch the names and details of.
10:46
And it'll import that onto your project
page and grab the name, description and
10:51
topics from any public repo
on your to GitHub account.
10:56
So that's a really great
way to pretty effortlessly,
10:59
gather your projects in a nice
interface for viewing your work.
11:02
Over on the left that we have the output,
so those two projects get for wizards and
11:08
Arduino Visitor Counter,
11:12
are both remote projects in that they're
imported repositories from GitHub.
11:13
Over on the right,
we just have the data for that.
11:18
So, it's just that remote
projects key with values listed.
11:20
So, those are the names
of the repositories.
11:25
This is an example of a use of that
theme by one of my students, Pablo.
11:35
Going through that very quickly.
11:45
Here is the product index.
11:52
Some really sweet animations and
transitions here too.
11:55
And I'm seeing one question,
how important is a portfolio site for
12:04
a developer engineer if
you're not a designer?
12:07
It can be pretty helpful for
getting you out there and
12:10
showing your work to
prospective employers.
12:13
Getting your foot in the door, it's
not gonna hurt you and it can be very,
12:16
very helpful.
12:20
So, if you're not a designer,
this is really what this talk is for.
12:21
It's to help you get some tips to still
get your work presentable in a nice way.
12:24
Teams are also a great option
to kinda give you a lift there.
12:31
This is another example of
student work from Grace.
12:41
So, Grace used another theme in here,
she's got these really nice rollover,
12:46
color and
hover effects on portfolio items.
12:52
This smart tagging solution
that helps filter projects,
12:55
video support our project pages.
13:00
Good stuff.
13:05
This is another example of work from
Hero So Hero's a musician from Tokyo.
13:10
Another tagging solution up top
implemented using some of the flexibility
13:17
that liquid in-deco offers you.
13:22
But this is also through a theme.
13:24
It's a little custom work,
but pretty straightforward,
13:26
simple about page and
a great catalog of music.
13:31
Question about these themes
being mobile friendly.
13:35
Yes, you can customize mobile views.
13:40
You'll use media queries,
just like regular responsive development.
13:42
But most of these themes,
all of them that I've seen,
13:48
come with breakpoints that
address mobile reports.
13:52
We'll see some of this a little later,
too.
13:57
So, next I wanna talk
about rolling your own.
13:59
If you're a novice web developer, building
your own portfolio from scratch can be
14:02
a unique opportunity to showcase your
skills and express your personality.
14:05
And setting that is completely
under your control,
14:09
which you don't get to deal with
a lot of other projects sometimes.
14:12
So, here's some tips to get creative and
14:15
design your first portfolio
site from the bottom up.
14:17
First off,
planning can be really important, so
14:22
I'd suggest planning your site
structure with a site map.
14:24
That's a diagram that really presents the
directory structure and page content for
14:27
your website before you get started
on some of the lower level details.
14:33
It's useful to ascertain a quick overview
of the content links and navigation for
14:37
your site.
14:41
And it's a good first step to commit to
this larger hierarchical structure before
14:41
getting lost in those design details.
14:46
Like most parts of the process,
it's very okay to be flexible and
14:49
change your initial ideas as you progress.
14:54
I'd really recommend Figma as a tool for
working on the design preliminaries for
14:58
your portfolio site.
15:02
There are a lot of community resources
that can give you a good starting point
15:04
for site mapping and
some of the other steps.
15:08
So, here's an example of a Figma community
file that you can duplicate to easily
15:10
create a sitemap diagram.
15:14
Here's an example of a sitemap
by a student, Sara Philip.
15:19
There's a legend over on the top left and
15:24
I'll talk a little bit about how
Jekyll treats pages and posts.
15:26
So pages are a basic Jekyll building
block that are most suitable for
15:31
standalone content.
15:35
They can be created in
the root of your site or
15:37
added to any sub directory just by
adding an HTML or mark down file.
15:39
And they can use any of your
Jekyll layouts to display content.
15:43
But cool thing about Jekyll is also,
you can scaffold layouts.
15:47
So, you can use one layout that uses
another layout, that uses another layout,
15:51
so on and so on.
15:56
Posts are suitable for content that's more
cereal or that belongs to a collection,
15:57
something like blog posts with vapes or
a group of projects.
16:02
And one great thing about Jekyll
philosophy is that, it's built for
16:05
blogging and its blog first.
16:08
So you'll have a lot of control
over permalinks, categories and
16:10
custom layouts when you're using posts.
16:13
The next step I'd recommend is to explore
your basic layout with some wireframes.
16:20
Wireframes are a successive low fidelity
preliminary that helps you plan
16:24
the content of each layout.
16:28
And you'll get into more detail here,
but again, you wanna try and
16:30
stay high level and not really get
lost on smaller design decisions yet.
16:33
So, stay abstract,
stay on the level of a rough sketch and
16:38
try a lot of variations
on some of your ideas.
16:41
Don't always wanna go with
the first thing you think of,
16:43
maybe there's a better way to solve
presentation of problems [INAUDIBLE].
16:46
It's a good chance to explore hierarchy
and determine a logical structure for
16:50
how to present your content.
16:54
And you're gonna wanna try
to balance your preferences.
16:56
So think about what you want
from your dream site, but
16:58
also the needs of your audience.
17:01
Keep in mind who's using your website and
try and
17:03
present content in a way that's
gonna help you achieve your goals.
17:06
So, if your goals are employment related,
think about a hiring manager or
17:09
a recruiter viewing your portfolio.
17:13
And what they're gonna need to see and how
they're gonna need to see it in order to
17:15
be the best presented when it comes
to making your design decisions.
17:18
Here's another community
resource on Figma.
17:28
There's a plugin called wireframe.
17:30
And it's a useful tool for quickly
sketching out the hierarchical structure
17:32
of your page layouts and
all the elements [INAUDIBLE].
17:37
Here's an example of the wireframes for
the site we saw earlier by Hero.
17:40
One important tip for wireframing, is to
leave a little bit of negative space.
17:45
And you wanna have high regard for
negative space and
17:51
remember to let your content breath
considering your site's users.
17:54
You don't wanna overwhelm them and
introduce a high cognitive load.
17:57
You wanna make your content easy to digest
and keep things simple when possible.
18:01
Wireframing is also an ideal time to
start considering responsive layouts.
18:08
So, responsive design, as mentioned
earlier, is the practice of adapting
18:12
content and style to display a website
on different kinds of devices.
18:17
It's a good idea to consider at least two
layouts for each of your views, one for
18:20
mobile and one for desktop.
18:24
And then you can fill in different
breakpoints, if you'd like,
18:26
that are in between.
18:29
Something to keep in mind here,
is that layout, hierarchy and elements,
18:30
may need to shift slightly between
mobile and desktop viewports,
18:33
to meet usability expectations.
18:36
So for mobile, one, the screen is a lot
narrower, it's usually a good idea to
18:38
err on the simpler side,
with things like one column layout.
18:43
And wider elements, bigger top points for
thumbs, so on and so forth.
18:47
Let's talk about inspiration.
18:57
While you're wireframing, it can be
a really great idea to search for
18:58
inspiration.
19:03
You can sketch your own layouts by tracing
on top of others that you like, or
19:04
shifting things around as you go.
19:08
You can even pull inspiration from
other design elements like color,
19:10
typography, language and tone, or more.
19:14
So, if you're a developer and
not exactly experienced as a designer,
19:16
this is really the place to look,
steal like an artist, right?
19:21
Look around at what's working for other
people and see what can work for you.
19:25
Having all of this in one Figma project,
can really help you pull things together
19:31
as you develop a more cohesive
intention for your project outcome.
19:35
And there are a lot of great places to
find inspiration around the web for
19:38
your portfolio website.
19:41
So, here [INAUDIBLE],
there's landbook.com,
19:42
blackboard.ninja, and HTTP star.
19:47
Yeah, a lot of great portfolio sites
to pull inspiration from on here.
19:50
Let's talk about typography really quick.
19:59
So the primary objective of your portfolio
design process should be to develop
20:02
a clear sense of hierarchy.
20:05
You wanna clarify which
content is important and
20:07
dictate the order users will view it
in to reduce the friction and effort.
20:10
Considering some of the finer details
like typography and color can really help
20:15
inform the ways in which he is contrast
to give rise to that hierarchy.
20:19
So we're gonna talk about type
a little bit, we'll keep it brief.
20:23
Typography can be a pretty dangerous
hole to fall into, so I'm gonna stick to
20:27
the basics, why it's important, it's
the visual component of the written word.
20:31
It has some considerable consequences for
how clear and usable your site is and
20:37
what the tone and
impact of your website is.
20:41
Balanced typography considers
the practical needs of its readers and
20:44
the expressive intent
of its author as well.
20:47
So it's an important chance to get
your expressive voice across but
20:50
also have your site [INAUDIBLE].
20:54
Good typography reinforces
the meaning of your content.
20:56
So here is an example of the dichotomy
between utility and expressivity.
21:01
This is highway signage, and while signage
on the right looks a lot more expressive,
21:07
you got to consider the context.
21:11
People are whizzing by
at 65 miles per hour,
21:14
they probably don't wanna read a script.
21:17
And so something that's a little bit
more readable from a distance that's
21:20
resolvable, like on the left,
is gonna be really the [INAUDIBLE] here,
21:24
leaning a lot towards utility
rather than expressivity.
21:27
I'll talk about some four elements
of typography that really go a long
21:34
way to determining the appearance
of your body text.
21:39
So there's point-size guidelines for that.
21:44
Keep the font-size of the body
text between 15 and 25 pixels.
21:48
Let's talk about line spacing,
line-height, and
21:53
these are all CSS properties,
is best between 1.2 and 1.45.
21:57
Line length, so that's gonna be the width
of the element that contains your text,
22:03
and this is body texts.
22:08
You wanna aim for a minimum of 45
characters, and 90 characters.
22:10
CSS now thankfully has this ch
length unit that can really
22:16
control how many
characters the element is.
22:21
So that's great to use for this.
22:26
Lastly, font choice.
22:31
So you're gonna wanna use professionally
designed fonts and combine them sparingly.
22:32
And the less can always be more with type.
22:37
So if you're combining fonts,
aim for contrast as well and
22:40
used fonts even in the same family.
22:43
You don't really wanna end
up in an in-between space
22:46
cuz that can appear unfairly.
22:50
Keep in mind that all these are rules and
rules are meant to be broken.
22:53
So think of it more as guidelines,
you don't have to take them as gospel,
22:56
they're just taking starting plain.
22:59
If you know what you're
doing typographically,
23:01
feel free to play with these.
23:03
The source for all of these rules is
Butterick's Practical Typography.
23:05
And I'd really recommend diving
into that free book as website for
23:09
a lay audience who just wants to
set type well in regular contexts.
23:13
Check it out at practicaltypography.com
Next, we have type scales.
23:18
So type scale is a resource that will
help you choose the right type scale for
23:26
your project.
23:30
It's gonna give you this hierarchy
of heading sizes and body text.
23:31
And it's gonna let you experiment with
font size scale and different web blocks.
23:36
So you can see we're really getting into
the hierarchy part of typography here,
23:39
where we have this cascading
system of headings.
23:44
That's gonna be your h1 through h6
elements, and then the body text.
23:48
Here are a few resources
to help you choose fonts.
23:55
So, Fontjoy over on the left,
23:58
that's gonna use machine learning
to suggest font pairings.
24:00
Fontpair is a set of
curated font pairings.
24:04
And then you can even just
use Google Fonts itself.
24:08
So if you navigate to the pairings tab on
any font specimen, it's actually gonna
24:11
give you a set of recommended pairings for
the typeface that you're viewing.
24:16
And [INAUDIBLE] many specimen for
that to be headers and
24:20
body texts have changed the weights and
such.
24:24
So those are all great ways to
find combinations for typefaces,
24:28
[INAUDIBLE] simple.
24:32
Next, we'll talk about color.
24:35
So color is pretty important in design.
24:42
We can talk about color psychology first.
24:45
[COUGH] The claim of color psychology
is that colors subconsciously affects
24:48
perception.
24:52
And that's a good thing to look
up a little more information on.
24:53
It's not really a hard science, but
it's a helpful starting point for
24:57
beginning to understand how color can
relate to your personal brand and
25:00
what you wanna show when
you're showcasing your work.
25:04
You can use color to elevate feelings of
trust, authority, and so on and so forth.
25:07
So think about your values.
25:12
Think about what you're trying to get
across in communicating to your audience,
25:13
whether that's hiring managers,
whether that's recruiters,
25:17
whether it's other developers.
25:20
And we can begin to look
into color psychology for
25:22
helping you develop a little more of
a voice around that design looks.
25:24
Next step, color theory.
25:28
So color wheel diagrams really do a great
25:31
job of illustrating color
relationships here.
25:33
You can create different geometric
relationships between the colors on
25:37
the wheel to generate the color scheme.
25:40
And there are a lot of tools
to help you with that.
25:41
So for example, complimentary colors
are opposite on the wheel and
25:44
they have strongest contrast.
25:48
Analogous colors are adjacent on
the wheel and they're good for
25:50
these more subdued,
harmonious palettes sometimes.
25:53
And lastly, color and usability.
25:57
So, color contrast creates hierarchy.
26:00
And for example, your hyperlinks might be
styled with a different color than your
26:04
body text to offer users an affordance for
interactivity.
26:08
So you're differentiating
meaningful content in that way.
26:12
An important caveat here is that you
don't want to rely solely on color
26:16
to communicate.
26:20
You wanna give other indications
that things might be interactive,
26:22
or indicates status in different ways.
26:26
Because not everybody
sees color in listing.
26:29
So this is just a quick example of
a color psychology chart rather.
26:34
We're seeing green associated
with topics like nature, healing,
26:38
quality and freshness, whereas purple
might be associated more with luxury.
26:43
So this is an example of a starting point
to get you thinking about what your
26:49
personal brand is and
what you're trying to communicate when you
26:52
think about the color choices you're
going to employ on your portfolio.
26:54
These are some geometric
color relationships.
27:00
So we're seeing different relationships
between colors geometrically on
27:03
the color wheel.
27:08
So for example,
triadic appears in a triangle.
27:10
All over the wheel, we have split
complimentary that are opposite and
27:13
analogous combined.
27:18
I already talked about analogous
in complementary colors.
27:19
But we also have things like
tetradic which are squares or
27:23
rectangles around the color wheel.
27:25
A lot of different
relationships explore here.
27:28
There are really a lot of great tools like
Adobe Color that can help you generate
27:32
color palettes.
27:35
So Adobe Color is great because you can
play with those geometrical infusions on
27:37
the color wheel.
27:40
But you can also extract a theme
from uploading an image.
27:41
You can explore other
people's color libraries.
27:45
They even have accessibility tools.
27:48
So I'll talk a little bit more about
accessibility in color in a second.
27:51
But you can find a lot of
these big color tools,
27:56
the color apps section on what design
toolbox and that's in the design menu.
27:59
What design toolbox is
a pretty amazing resource for
28:06
finding A ton of different tools that are
gonna help you with your design process or
28:09
with web development in general.
28:14
Another option is to look at
some front end frameworks.
28:20
So tailwind and bootstrap, for
example, you know, come ready with
28:23
color palettes that can offer you
some decent options to select from
28:27
Let's talk a little bit about
accessibility at this point.
28:37
designing for
everybody is really important.
28:39
And I want to give
a shout out to Jordan for
28:42
that great presentation on accessibility
at mobile learning on the web, too.
28:44
So I'm as we know and make sites apps, and
content more useful for disabled people.
28:49
And many people use assistive technologies
like screen readers to browse the web.
28:56
So, they're actually
standardized guidelines called,
28:59
the web content accessibility
guidelines provide
29:02
accessibility standards to
meet everybody's needs.
29:05
I'd really recommend reading those.
29:10
But I'm gonna talk about two really
simple things you can do on your entry
29:12
level portfolio to get started with
accessibility to low level lists.
29:17
So, the first is validating
your color contrast ratios.
29:22
The WCAG specifies contrast ratios for
text colors against a background and
29:26
it gets them grades so double A and
triple A are passing grades.
29:30
This ensures that your text is legible
across an acceptable range of viewing
29:35
conditions.
29:38
And the different text settings like body
texts, or headings might have different
29:40
thresholds for passing grades here, It's a
pretty good idea to read those guidelines
29:44
and meet the ones you can many
are difficult to work into your project.
29:48
But like we said, this is gonna be
a couple things to start installing.
29:52
The other one is describing
images with alt text.
29:57
So the image HTML element has
an alt attribute in addition
30:01
to the source attribute which
is the path of the image.
30:04
Here you can set the value to
a string that describes the image or
30:08
its function with text.
30:12
And that's really useful for
screen readers and assistive tech, but
30:14
it will also display if
the image can't load.
30:17
So people will know what [INAUDIBLE].
30:20
It also helps with search engine
optimization because it's content that
30:23
[INAUDIBLE].
30:28
You don't need alt texts for
your decorative elements,
30:29
focus on things that are functional or
useful to the [INAUDIBLE].
30:33
This is a resource called Who Can Use.
30:37
So it gives you a grading for
color combinations.
30:40
And it also provides
legibility statistics and
30:44
visual simulations of what they might
look like in different settings.
30:46
There's also a plugin for FIGMA called
Stark that can help you check your
30:51
color contrast right
inside your framework.
30:55
So I really recommend these as
ways to ensure that your color
30:58
combinations are accessible.
31:03
Let's talk about putting
it all together and
31:08
look at some student work
examples to close things out.
31:10
So this is a site by
Alexandra Tejada Levine.
31:14
I taught first time web developers
who are mostly artists and creatives.
31:18
So Alexandra is an actress and
chose to really focus on
31:25
a portrait to really kind
of present herself upfront.
31:30
But there's also a reel and
some contact information,
31:35
which includes her artist representation.
31:38
So keeping things pretty simple.
31:41
This is Byungkyu Lee's website.
31:46
Some really interesting use
of video backgrounds here.
31:50
[INAUDIBLE] behavior.
31:56
Great aesthetic there.
32:01
This is Sarah's full site
which we saw earlier.
32:05
We have the mobile view over on the left
sticking to that simple single column,
32:08
but really bare bones and simple here.
32:14
It brings out these beautiful thumbnails
especially on your mobile layout where
32:16
you have this center axis focus
helping more come forward.
32:23
This is Jackson Kaplan's website.
32:29
Jackson produces music, so
pretty cool animated pop out menu here.
32:31
One thing I really liked about this site
is that it went a little further for
32:37
accessibility and made sure this
photo section was keyboard navigable.
32:41
So that's another thing you can do for
accessibility.
32:45
Make sure people don't need a mouse and
clicks to navigate your website.
32:48
This is Alen Lee's website.
32:56
Alen Lee is a composer
based in Kazakhstan.
32:59
So you can see a collection of projects
here that use things like the Jekyll for
33:02
loop we talked about earlier.
33:06
And there's a pretty unique set of
typographic choices, color scheme, and
33:08
overall design here that I think speaks
really well to Alwn's aesthetic.
33:13
See it adapted over to the mobile layout,
right?
33:19
This is a great outcome.
33:24
And now it's your turns.
33:29
So take all of that as inspiration,
go forth, and build.
33:30
And I'm excited to see what
all of you come up with.
33:34
I'll try and take a couple more questions.
33:38
So I'm seeing one.
33:41
Most of the front end
entry level positions,
33:44
the companies need at least
two to three years experience.
33:46
How can we get entry level jobs while
we do not have any company experience?
33:49
I'd recommend starting
with personal projects,
33:54
building things that you're having
fun with, that you're learning on.
33:57
And then maybe trying to see if you
can tackle some freelance work.
34:02
So friends and family often need websites.
34:07
Maybe it's local businesses,
see who you can help out with your skills.
34:09
And that's a great way to start
building portfolio with real projects.
34:15
It's gonna take a little while and
34:20
you're gonna take some time
to gather that experience.
34:21
But that's still valuable experience,
34:24
even if you're not employed
as a front end developer.
34:26
So lean on that for sure.
34:29
And that's a great thing to
showcase in your portfolio as well.
34:31
Even better if you want to build
that by scratch as a web hook.
34:34
Another question, would you recommend
having two portfolio sites?
34:38
One client facing simple, plain language.
34:42
And the other for showing to fellow devs
and tech recruiters [INAUDIBLE] heavy.
34:44
What I might recommend is having
different sections of your portfolio
34:50
site that speak to this.
34:55
So, for example, maybe the simple and
34:56
plain language is gonna be up front
on your landing pages and stuff.
34:59
But you might have case studies for
35:03
your project that get into
a little bit more detail.
35:05
You can also summarize and have people
click into things like a repo or a full
35:08
case study, if they really want to dig
into the nitty gritty of your projects.
35:12
So that's kind of the situation that
I think most developers are in.
35:17
They want to present an overview of the
work and then offer people the opportunity
35:21
to dive in deeper and
even view the repository if they need to.
35:25
So I think that's the way to do
it is kind of hierarchically.
35:29
When is the right time to start
working on your portfolio?
35:34
Whenever you're ready to start
showing your work to other people, and
35:40
I'd recommend showing it early and
showing it often.
35:43
Get feedback on your portfolio
while it's in progress.
35:46
But it's gonna be really helpful
in you landing those early gigs,
35:49
getting more clients if
you're working freelance.
35:52
Getting employed if you're looking for
your first front end position.
35:55
So it's never too soon as long
as you have projects to show.
35:59
And even if you don't, maybe you have an
idea of what you kind of like to represent
36:04
about yourself as a developer, or what
you'd like to focus on, or what you'd like
36:08
to communicate to an audience of people
who your work is going to matter to.
36:12
So as soon as you know any of those
things, get the ball rolling and build.
36:16
Thank you so much.
36:21
That's it for me today.
36:22
Good luck with your first portfolios and
36:24
everything that happens in your
development career after that.
36:26
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