Guide, Tech Portfolio Skillcrush

User Manual:

Open the PDF directly: View PDF .
Page Count: 24

Download
Open PDF In Browser	View PDF

SIDE HUSTLE GUIDE
WITH HTML & CSS

The Beginner's Guide

WHAT TO
PUT IN YOUR
TECH
PORTFOLIO

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 1

SIDE HUSTLE GUIDE
WITH HTML & CSS

WHY DO I EVEN need A
PORTFOLIO?
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 find work in
tech, whether you’re freelancing or looking for a fulltime 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 reflection of
you and your work. And that’s exactly what you’ll learn
in this guide!

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
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 2

SIDE HUSTLE GUIDE
WITH HTML & CSS

4 THINGS every 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 first 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!).

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 3

SIDE HUSTLE GUIDE
WITH HTML & CSS

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 find 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.)

Enter email address

GET IN TOUCH

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 4

SIDE HUSTLE GUIDE
WITH HTML & CSS

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

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 5

SIDE HUSTLE GUIDE
WITH HTML & CSS

PROJECTS FOR
your PORTFOLIO
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 6

SIDE HUSTLE GUIDE
WITH HTML & CSS

WHAT TO DO WHEN YOU’RE
NEW TO tech
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-Profit or Mom ‘n’ Pop Website
❑ The Dream Client Website
❑ A Stock Theme for a Popular CMS
❑ Your Portfolio Itself

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 7

SIDE HUSTLE GUIDE
WITH HTML & CSS

DESIGN PROJECTS
YOUR TWIST ON AN ICON SET
This is a pretty standard project, but it’s a great way
for you to offer something to potential employers
and clients while including a project of a completely
different scale in your portfolio. An icon set might
seem ubiquitous but if you do it well and use it as
an opportunity to define 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 specific
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.

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 8

SIDE HUSTLE GUIDE
WITH HTML & CSS

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, find 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.

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.

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.

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 9

SIDE HUSTLE GUIDE
WITH HTML & CSS

DEVELOPMENT PROJECTS
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 nonprofit 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.

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 10

SIDE HUSTLE GUIDE
WITH HTML & CSS

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 figure out the best way
to display those projects. Show off who you are,
what your design style is, and how you can do more
for your clients than your competitors do.

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 11

SIDE HUSTLE GUIDE
WITH HTML & CSS

MAKE your
PORTFOLIO
STAND OUT

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 12

SIDE HUSTLE GUIDE
WITH HTML & CSS

HOW TO stand out 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 finish 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 nobrainer to list them.

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 13

SIDE HUSTLE GUIDE
WITH HTML & CSS

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 offerings 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.

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 14

SIDE HUSTLE GUIDE
WITH HTML & CSS

PORTFOLIO
RESOURCES

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 15

SIDE HUSTLE GUIDE
WITH HTML & CSS

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.

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 16

SIDE HUSTLE GUIDE
WITH HTML & CSS

THE DOS & DON'TS OF AN AWESOME PORTFOLIO

1
2

DO: Include your personality
Give visitors a taste of who you are and what you’re into
DON’T: Just pass off 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

3

Don’t forget volunteer work or internships!
DON’T: Include your high-school babysitting gig or other
unrelated jobs

4
5
6

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

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 17

SIDE HUSTLE GUIDE
WITH HTML & CSS

DO: Make your contact information easy to find

7

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

8

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

9

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

10

If a site doesn’t show up in the first 10 pages of Google, does
it exist at all?
DON’T: Clutter your site with keywords in every sentence

11
12

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
Ultimate Guide to Running a Side Hustle with Just HTML & CSS 18

SIDE HUSTLE GUIDE
WITH HTML & CSS

A checklist FOR AN AMAZING
PORTFOLIO
There are a ton of things to keep track of when you’re
building your first (or fifth) 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!

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 19

SIDE HUSTLE GUIDE
WITH HTML & CSS

CHECKLIST FOR THE PERFECT PORTFOLIO
Does your portfolio show off 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 first?
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?

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 20

SIDE HUSTLE GUIDE
WITH HTML & CSS

LEARN TO CODE WITH US IN A
3-MONTH ONLINE COURSE
Are you pumped about working in tech but not sure
where you’ll fit in, or that you have what it takes? Or
maybe you know you want to take advantage of the
flexible 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 confidence you need to
earn more money, level-up your career, and find fulfilling,
flexible 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 office hours with instructors to ask
all your questions, and access to the Skillcrush community
of fellow learners.

LEARN TO CODE.
Get hired. Make more
money. It’s that simple!

And you can enroll in ANY of them with absolutely zero
experience with code.

ENROLL NOW!

HERE ARE SOME OF THE BLUEPRINTS WE OFFER:

VISUAL
DESIGNER

FRONT END
DEVELOPER

AVERAGE SALARY:

AVERAGE SALARY:

$87,000

$92,000

FREELANCE
WORDPRESS
DEVELOPER
AVERAGE SALARY:

$85,000

LEARN MORE ABOUT SKILLCRUSH CAREER BLUEPRINTS HERE

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 21

SIDE HUSTLE GUIDE
WITH HTML & CSS

HAVE YOU JOINED the CLUB?
Find more on our blog
If you found this resource (and the ones listed here)
helpful, there’s even more to discover on the Skillcrush
blog.

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 offerings,
which is a bore.) Skillcrush actually generates valuable content for readers.“
LAURENCE BRADFORD

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 22

SIDE HUSTLE GUIDE
WITH HTML & CSS

“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 offering 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

?
WHAT are YOU WAITING FOR?
Sign up to our newsletter now so you won’t miss a post.
SIGN UP NOW

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 23

SIDE HUSTLE GUIDE
WITH HTML & CSS

THANKS FOR
JOINING US.
Feel free to email us with any questions at
hello@skillcrush.com

Ultimate Guide to Running a Side Hustle with Just HTML & CSS 24



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.7
Linearized                      : Yes
XMP Toolkit                     : Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27
Create Date                     : 2016:09:07 19:27:57+03:00
Metadata Date                   : 2016:09:07 19:28:12+03:00
Modify Date                     : 2016:09:07 19:28:12+03:00
Creator Tool                    : Adobe InDesign CS6 (Windows)
Instance ID                     : uuid:60e205b0-5207-47f8-b558-cb200b7bfc26
Original Document ID            : xmp.did:652F5DC65916E511A3B786B44BECB64B
Document ID                     : xmp.id:546747E51775E61181A5AB86B18AA0ED
Rendition Class                 : proof:pdf
Derived From Instance ID        : xmp.iid:536747E51775E61181A5AB86B18AA0ED
Derived From Document ID        : xmp.did:75D5DB9B134FE611B20B87BB60BA3092
Derived From Original Document ID: xmp.did:652F5DC65916E511A3B786B44BECB64B
Derived From Rendition Class    : default
History Action                  : converted
History Parameters              : from application/x-indesign to application/pdf
History Software Agent          : Adobe InDesign CS6 (Windows)
History Changed                 : /
History When                    : 2016:09:07 19:27:57+03:00
Format                          : application/pdf
Producer                        : Adobe PDF Library 10.0.1
Trapped                         : False
Page Count                      : 24
Creator                         : Adobe InDesign CS6 (Windows)

EXIF Metadata provided by EXIF.tools