Guide, Tech Portfolio Skillcrush
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 24
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 1
The Beginner's Guide
WHAT TO
PUT IN YOUR
TECH
PORTFOLIO
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 2
WHY DO I EVEN A
PORTFOLIO?
IN THIS GUIDE, YOU’LL LEARN:
Why a portfolio is the most important part
of your job application
What to include in your portfolio to land
your dream job
Real projects to add to your portfolio when
you're brand new to tech
The Dos and Don'ts of an amazing portfolio
that will get you hired
If you’re ready to start earning money in tech, there’s
one thing you’ll need regardless of the exact job you’re
looking for: an impressive portfolio. Doesn’t matter if
you aspire to be a designer, developer, marketer, or
something else entirely, you need a showcase of the
work you’ve done and what you’re capable of.
It’s easy to worry about your resume and cover letter,
and fret that you don’t have the right computer science
credentials from a fancy school. But in reality, your
portfolio is much more likely to help you nd work in
tech, whether you’re freelancing or looking for a full-
time gig. That’s because the actual work you can do is
far more important than what you can do on paper.
Knowing that can be paralyzing. But the good news is
that your portfolio doesn’t have to be perfect or even
feel complete! What it does need to be is a reection of
you and your work. And that’s exactly what you’ll learn
in this guide!
need
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 3
4 THINGS PORTFOLIO NEEDS
When you’re just getting started on your portfolio,
don’t worry about creating something super
impressive right out of the gate. Instead, focus on
getting the basics right. The rest can come later! Here
are a few things that absolutely every portfolio needs,
regardless of what kind of tech career you want. Start
here:
WHO YOU ARE
Make sure your portfolio includes a bio. Give some
background around how you came to love web
design, or your rst experience with a computer at a
young age. Make it relatable and personable. And let
your personality shine through! Helping people relate
to you is a huge step in getting them to hire you
instead of someone else.
WHAT YOU DO
State the obvious. There is nothing worse than having
a prospective employer or client land on your site and
come away with no clue what it is you do. Let future
clients know what it will be like to work with you.
WORK YOU’VE DONE
This one is obvious, but don’t forget that your
portfolio needs to include samples of the work you’ve
done, with visuals and links to the real projects, if
possible. This can include work you’ve completed
for others, personal projects, and even fake projects
(more on those later!).
every
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 4
A CLEAR CALL TO ACTION
A Call to Action (CTA) is just a spot on your website
where you tell your visitors the next step you’d like
them to take...and make it easy for them to do so.
In the case of a portfolio, it’s probably getting in
touch with you to discuss a job or project. There’s
nothing wrong with a simple and clear “Hire Me” or
“Get in Touch.”
You can make it easy for visitors to nd you by
incorporating a contact form on your site or even
asking for visitors to get in touch with you via
your social media accounts. You can also include
your email address. (Pro tip: including spaces and
spelling out special characters in the address like
this: hello (at) skillcrush (dot) com, can cut down on
the spam you get, though it’s not foolproof.)
GET IN TOUCH
Enter email address
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 5
ALL THE BEST PORTFOLIOS ARE MASTERS
OF THE FOLLOWING:
They reinforce your personal brand and allow
your personality to shine through
The content is focused and displays the kind of
work you want to pursue
They’re easy to navigate and position your
work in the spotlight
They contain a clear call to action that inspires
viewers to follow up
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 6
PROJECTS FOR
PORTFOLIO
your
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 7
WHAT TO DO WHEN YOU’RE
NEW TO
If you haven’t done many “real life” projects, it can
feel like your portfolio has nothing in it. Sure, a
beautiful, eye-catching, client-snagging portfolio will
include work samples, but if you’re short on projects,
there’s still a LOT you can do to create a dynamic
portfolio that showcases your best qualities.
1. DESIGN PROJECTS
❑ Your Twist on an Icon Set
❑ Redesigned Newsletter Template
❑ Improved Mobile Product UX
❑ A Mobile App Concept
❑ A Complete Branding Package
❑ A 365 Design Project
2. DEVELOPMENT PROJECTS
❑ Customize a Site Theme or Template
❑ The Non-Prot or Mom ‘n’ Pop Website
❑ The Dream Client Website
❑ A Stock Theme for a Popular CMS
❑ Your Portfolio Itself
tech
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 8
DESIGN PROJECTS
YOUR TWIST ON AN ICON SET
This is a pretty standard project, but it’s a great way
for you to oer something to potential employers
and clients while including a project of a completely
dierent scale in your portfolio. An icon set might
seem ubiquitous but if you do it well and use it as
an opportunity to dene your aesthetic, you could
really wow in an interview.
REDESIGNED NEWSLETTER TEMPLATE
Entry-level design (and some coding) jobs might
include redesigning and sending out newsletters
about events, interviews, breaking news, and other
timely items, so spending some time redesigning
an organization’s newsletter, creating samples, and
including it all in your portfolio is a great way to
impress a hiring manager.
IMPROVED MOBILE PRODUCT UX
Focus on mobile UX to show how you would
improve the experience for an existing client or
brand in the mobile landscape. This is a project that
allows you to be creative inside some very specic
constraints.
Do your research here. Perhaps you love a website
but think the mobile experience needs an overhaul.
Work towards its reinvention and create UX
deliverables for every step of the way. Feature all
the assets as a “spec” on your site, and make sure
to explain your reasoning.
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 9
A MOBILE APP CONCEPT
Creating a new design concept for an existing app
can be impressive, but creating a new app concept
design 100% from scratch is even more so. Decide
what kind of app you want to create, nd some
examples already on the market, and then set
about creating a concept for something unique. Be
sure you follow established mobile best practices
and restrictions so that your design does not come
across as unprofessional.
A COMPLETE BRANDING PACKAGE
Create a complete brand update with a logo, mood
board, color palette, website design, packaging
design, business cards, and style guide (along with
any other designs you think are necessary). You can
download stock images for things like packages,
printed materials, and more that you can overlay
your designs on for an even more impressive
presentation. If you’re not sure where to start,
check out all the branding packages uploaded to
sites like Behance.
A 365 DESIGN PROJECT
If you’re playing the long game (which you should
be when it comes to your career), then starting a
365 design project can be a fantastic thing to add
to your portfolio. 365 design projects consist of
creating a simple design, usually along a theme
or for a particular type of design (icons, logos,
typography, etc.), and posting them every day for a
full year.
Spec:
In tech, creating a
“spec” is a great way
to share your idea
for a product and
get feedback before
you have invested
any time or money in
creating it. It includes
all the assets and
designs of a product
or experience,
plus notes for why
features are included.
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 10
CUSTOMIZE A SITE THEME OR TEMPLATE
Even if you know how to code a site from scratch,
using a CMS (Content Management System) makes
more sense in a lot of cases. And customizing a
theme or template using a CMS can make just
as much of an impression on a client as a site
you coded 100% from the ground up. Make sure
to explain any roadblocks you overcame while
working with the CMS!
THE NONPROFIT OR MOM ‘N’ POP WEBSITE
A great project to include in your portfolio is the
design or redesign of a small local nonprot or
your favorite neighborhood take-out restaurant.
You can add it to your portfolio as a sample
project and maybe even book it as a real paying
gig. These businesses often have limited resources
for creating an awesome website, so designing a
mockup to present to them might just land you the
job.
THE DREAM CLIENT WEBSITE
Creating a website (or other product) for an
imaginary dream client allows you to showcase
how you think in terms of scale. For the biggest
impact, think through every detail—how the site
will look on tablets and mobile phones, what
the app experience is like, how comments and
threading work, etc. A well-presented project like
this can be enough to land you the job even if it’s
the only thing in your portfolio.
DEVELOPMENT PROJECTS
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 11
A STOCK THEME FOR A POPULAR CMS
Look at the themes that are on the market—and
what sets them apart—and then design one of your
own! ThemeForest is a great place to check out
tons of successful theme designs. Look at the most
popular designs on the site, even if you don’t plan
to sell your theme.
YOUR PORTFOLIO ITSELF
If you’ve been using a stock theme, even one that’s
customized, to host your portfolio, it’s time to
upgrade! Take time to plan out and create a site
that is 100% you. Think about the kinds of projects
you’ll be showcasing, then gure out the best way
to display those projects. Show o who you are,
what your design style is, and how you can do more
for your clients than your competitors do.
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 12
MAKE
PORTFOLIO
STAND OUT
your
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 13
HOW TO FROM THE CROWD
AS A BEGINNER
If you haven’t done many “real life” projects, it can
feel like your portfolio has nothing in it. Sure, a
beautiful, eye-catching, client-snagging portfolio will
include work samples, but if you’re short on projects,
there’s still a LOT you can do to create a dynamic
portfolio that showcases your best qualities.
GET TESTIMONIALS
When you nish a product you’re proud of, ask
the client (and anyone you collaborated with) to
shoot you a testimonial. Just make sure you get
permission to feature it on your site. And you can get
testimonials about other work you’ve done. If you’re
changing careers, ask your former co-worker to write
a few sentences on what working with you was like.
And don’t forget to return the favor!
SHOWCASE YOUR EDUCATION
Don’t be afraid to feature your education in your
portfolio, even if it is informal or not accredited.
Explaining what you learned in a training program like
Skillcrush can go a long way. It shows what skills you
have and how dedicated you are to your new career.
And don’t shy away from featuring other courses
you’ve taken online (even free ones!) or in-person
workshops through meetups like Girl Develop It.
FEATURE COMMUNITY INVOLVEMENT
Another non-digital aspect to point out in your
portfolio is your participation in any groups or
organizations. If you attend tech meetups or are part
of professional organizations, it’s pretty much a no-
brainer to list them.
tand out
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 14
Even soft skills that demonstrate what a great
addition to a team you can be are worth including.
For example, if you act as project manager, work
with a remote team of other volunteers, or handle
things like copywriting for an organization, be sure to
highlight those things, too.
CREATE RESOURCES FOR OTHERS
Creating things for the design and tech communities
is a great way to get your name out there. And it goes
beyond just getting exposure among the design and
tech industries. When potential clients are searching
for designers, they sometimes come across these
free resources. This, in turn, establishes you as an
expert in their mind. Try something like an icon pack,
template, or font (consider premium oerings for an
added income stream).
TELL YOUR STORY
If you can’t show someone your latest work (yet!), you
can help them get to know you by explaining who
you are and where you’re coming from. Try building
an infographic that maps out how you got here. This
tip might seem like it’s just for graphic designers, but
using a pen and paper and a trusty smartphone can
make it low-tech and fun for developers too.
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 15
PORTFOLIO
RESOURCES
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 16
THE DEFINITIVE PORTFOLIO
DOS AND DON’TS
What goes into your portfolio depends a lot on
what your career goals are. But there are a some
things that virtually every portfolio should (or
shouldn’t) do.
These basic principles can guide you in designing
your portfolio, planning its content, and keeping
it up to date. The dos and don’ts included below
will give you a clear-cut roadmap for building your
portfolio.
Keep these best practices in mind as you create
your portfolio to set yourself apart from all of the
mediocre portfolios out there.
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 17
DO: Include your personality
Give visitors a taste of who you are and what you’re into
DON’T: Just pass o a list of bullet points about yourself
DO: Include a photo of yourself
Try something professional but with some character!
DON’T: Be a face-less rando
DO: Include relevant work experience
Don’t forget volunteer work or internships!
DON’T: Include your high-school babysitting gig or other
unrelated jobs
DO: Include context with your projects
Tell the who, what, where, when, why, and how
DON’T: Just list URLs or have a bunch of screenshots
DO: Give users a clear action to take
Hire me! Get a quote!
DON’T: GIve users too many options
DO: Put thought into your site’s layout and appearance
After all, it’s an example of your work in itself
DON’T: Get too complicated and risk confusing visitors
1
2
3
4
5
6
THE DOS & DON'TS OF AN AWESOME PORTFOLIO
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 18
DO: Make your contact information easy to nd
Link in the main nav, plus basic contact info in the footer
DON’T: Give out your home address or personal phone
number
DO: Show samples of your work
Duh! This is where you get to shine!
DON’T: Show too many samples, or samples that aren’t
your best work
DO: Think outside the box
Figure out what sets you apart from your competition and
show it!
DON’T: Limit yourself to just experience, education, & skills
DO: Think about SEO
If a site doesn’t show up in the rst 10 pages of Google, does
it exist at all?
DON’T: Clutter your site with keywords in every sentence
DO: Check your site’s grammar and spelling
No one likes a sight literd with typos and bad grammer.
DON’T: Put your site online without a thorough read-over
DO: Update your portfolio site regularly
Any time you complete a cool new project, update!
DON’T: Build it and forget about it
7
8
9
10
11
12
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 19
A FOR AN AMAZING
PORTFOLIO
There are a ton of things to keep track of when you’re
building your rst (or fth) tech portfolio.
How do you make sure that your portfolio is the best
it can be? How do you create a portfolio that’s not the
same as a thousand other portfolio sites out there?
And most importantly: how do you make sure it’s
good enough to land you your dream job?
Just use the checklist on the next page. As you work
through your portfolio, use this checklist to stay
on track—but remember, your portfolio does NOT
need to be perfect. This list is meant to help you
evolve your portfolio over time. So don’t let a missing
checkmark prevent you from getting out there and
applying for the jobs you want!
checklist
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 20
CHECKLIST FOR THE PERFECT PORTFOLIO
Does your portfolio show o your personality?
Did you include a photo of yourself?
Does it include at least a few samples of your best work?
Did you prioritize your best projects and show them rst?
Did you detail what you did and/or your process on each project?
Did you make it easy for visitors to contact you?
Is your design easy to navigate?
Does your design put the focus on your work?
Did you consider SEO and keywords when writing your copy?
Did you proofread your entire site?
Did you get at least one friend or colleague to proofread
your site?
Have you tested all of your links and images?
Does your portfolio look good regardless of the device (laptop,
smartphone, tablet, etc.) it’s being viewed on?
Do you have a plan for keeping your site up-to-date?
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 21
Are you pumped about working in tech but not sure
where you’ll t in, or that you have what it takes? Or
maybe you know you want to take advantage of the
exible work schedules and high salaries that are
common in the tech industry, but you have no idea where
to start? (Coding...what?) A Skillcrush Career Blueprint
could be right for you.
Skillcrush Blueprints are our 3-month class packages
designed to give you the skills and condence you need to
earn more money, level-up your career, and nd fullling,
exible work. In a Blueprint, you can learn everything
from how to design a website users love, to how to build
web apps from scratch.
In each Blueprint, you’ll get short, digestible lessons in
your inbox daily, live oce hours with instructors to ask
all your questions, and access to the Skillcrush community
of fellow learners.
And you can enroll in ANY of them with absolutely zero
experience with code.
HERE ARE SOME OF THE BLUEPRINTS WE OFFER:
LEARN MORE ABOUT SKILLCRUSH CAREER BLUEPRINTS HERE
LEARN TO CODE.
Get hired. Make more
money. It’s that simple!
ENROLL NOW!
LEARN TO CODE WITH US IN A
3-MONTH ONLINE COURSE
VISUAL
DESIGNER
AVERAGE SALARY:
$87,000
FREELANCE
WORDPRESS
DEVELOPER
AVERAGE SALARY:
$85,000
FRONT END
DEVELOPER
AVERAGE SALARY:
$92,000
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 22
HAVE YOU JOINED CLUB?
Find more on our blog
Blog
If you found this resource (and the ones listed here)
helpful, there’s even more to discover on the Skillcrush
blog.
We share top career advice, inside tech tips, real-life
stories of getting into tech, and tons of FREE guides,
worksheets, and resources.
Sign up for our newsletter now so you won’t miss a
post. Each week, we send you 2 researched, detailed,
easy-to-read articles to help you harness the power of
tech and get the career you deserve.
Join thousands of happy readers! Here’s what a few of
them have to say:
“I read a blog post every day and learn something new. The resources you give
us are priceless!”
SARA EVANS
“I have been on your mailing list now for 8 months and in that time alone I saw the
platform grow so much. Seriously, in the online education space you guys have
some of the best content marketing. (Some online learning platforms neglect it
entirely, while others only post articles about latest updates or course oerings,
which is a bore.) Skillcrush actually generates valuable content for readers.“
LAURENCE BRADFORD
the
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 23
WHAT are YOU WAITING FOR?
?
“The 99 Tech Terms You Need to Know When You’re New to Tech has been a
big help! I love materials that cover the basics.”
APRIL HARRIS
“Skillcrush, Thank you for oering such a great newsletter to your subscribers. The
content that you send out is always helpful and something that I can refer back to
as I improve my coding skills. I especially love your PDF quicksource guides.”
JUBILEE GRACE
“Your email newsletters, videos and articles are so inspiring, I really look
forward to them and I love your attitude, all of you, and the great images. You
make me feel included in a world where it seems everyone is an expert, and I
wanted to say thanks.”
ATTY CRONIN
“I love your blog posts! They always end up being my lunchtime reads at work!”
CAROLINE KIM
Sign up to our newsletter now so you won’t miss a post.
SIGN UP NOW
SIDE HUSTLE GUIDE
WITH HTML & CSS
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 24
THANKS FOR
JOINING US.
Feel free to email us with any questions at
hello@skillcrush.com
