10 Exciting Web

Development Projects for

Your Portfolio.
[ FRONTEND AND BACKEND ]

@HERCODEFACTORY
WHY DO YOU NEED A PORTFOLIO?
A portfolio is your way to show recruiters that you have learned certain problem
solving skills. It also shows recruiters how you think through algorithm problems
and the way you have chosen to implement the solution.

GETTING STARTED

In the next few pages, I will list out some sample projects you can build out as a Frontend
Developer and Backend Developer. These projects are meant to show off your foundational
knowledge and advanced knowledge on fundamental topics related to Web Development.
FRONTEND DEVELOPMENT
The projects listed below will teach you skills such as:
• Planning structure with HTML
• Creating pixel-perfect replication of UI designs
• Flexbox/Grids in CSS
• Bootstrap
• Common CSS commands

Each project comes with a 'TUTORIAL REFERENCE' ie, a link to a tutorial that will explain the major
concepts in the project, and also, a list of topics you are expected to understand at the end of the project.
PROJECT NAME IMAGE TUTORIAL REFERENCE WHAT YOU WILL LEARN

Pricing Component Responsive Services Section • CSS Flexbox

using CSS Flexbox • CSS Border Radius
TOOLS: HTML, CSS, • Creating custom Buttons
Bootstrap(Optional) • Layout Design in CSS
• Positioning in CSS

Landing Page Design Landing Page design using HTML • CSS Flexbox
and CSS • Page Design
TOOLS: HTML, CSS, Javascript, • Interactive buttons with
Bootstrap(Optional) Javascript
• Layout Design in CSS
• Positioning in CSS
PROJECT NAME
Blog Page Design
TOOLS: HTML, CSS,
Bootstrap(Optional)
URL Shortening Landing Page
TOOLS: HTML, CSS, Javascript,
Bootstrap(Optional)
IMAGE TUTORIAL REFERENCE
Simple Blogpage design using
HTML and CSS
Form Validation in Javascript
WHAT YOU WILL LEARN
• CSS Grids
• CSS Layout techniques,
Positioning in CSS
• Media Queries in CSS
• Designing with Media
breakpoints in CSS
• Building a full landing page
• Form validation in Javascript
• Media Queries
• Responsive Web Design
• CSS Layouts
• Positioning in CSS
• Regex
PROJECT NAME
API Project: Pick an API of your
choice and build a project
around it
TOOLS: HTML, CSS, Javascript,
Bootstrap(Optional)
Assets: IP Tracking application.
IMAGE TUTORIAL REFERENCE
Working with API’s in Javascript,
Fetch API in Javascript
WHAT YOU WILL LEARN
• APIs in Javascript
• Fetch API in Javascript
• Asynchronous Javascript
• REST API
@HERCODEFACTORY
BACKEND DEVELOPMENT
The backend development projects listed here are NodeJS focused, however, you can use any
language of your choice to complete the Backend Section of the projects listed. Some of the things
you will learn include:

• Routing
• CRUD Operations
• API documentation with POSTMAN
• NodeJS Frameworks

Each project comes with a ‘TUTORIAL REFERENCE’ ie, a link to a tutorial that will explain the major
concepts in the project, and also, a list of topics you are expected to understand at the end of the
project.
PROJECT NAME
User Authentication System
TOOLS: Programming language
of your choice (NodeJS, PHP,
Python etc), Postman for API
testing
Proxy Server Project
TOOLS: Programming language
of your choice (NodeJS, PHP,
Python etc), Postman for API
testing
SUMMARY
This project will compass you
creating a login/signup system
for users on a site. It comes in
handy as most sites have an
authentication layer embedded
in them
A Proxy server is a server that How a Proxy Server works
acts as a middle layer when
requesting data from a 3rd party
API. In building a proxy server,
you will create a server that
requests data from an external
API and serves the user that
information.
TUTORIAL REFERENCE
Responsive Services Section
using CSS Flexbox
WHAT YOU WILL LEARN
• Authentication/Authorizatio
n
• Cookies/Sessions
• Routing
• Using Postman
• SQL
• MongoDB
• Working with databases
• CORS vs SOP
• Building a proxy server
• Working with Fetch API in
NodeJS
• Fetching data from a 3rd
party API
• Working with databases
PROJECT NAME
Book Rentals Application
TOOLS: Programming language
of your choice (NodeJS, PHP,
Python etc), Postman for API
testing, Templating language
(EJS/Pug/Handlebars)
CHALLENGE: Implement a
frontend usng Templating
engines + Bootstrap
Web Crawler Application
TOOLS: Programming language
of your choice (NodeJS, PHP,
Python etc), Postman for API
testing
SUMMARY
Implement the following
functions:
• Create a User admin account
• CRUD operations with books:
Create new book listing, Edit
a book listing or book ISBN
number, Delete a book listing
• Show users if a book is
available to rent or not
• Allow book renters create a
‘Renters’ account
Create an application that can
crawl the web for the purpose
of web indexing or gathering
data.
TUTORIAL REFERENCE
Creating User roles in NodeJS
Building a web crawler
application in NodeJS
WHAT YOU WILL LEARN
• Creating data models
• Limiting access to data
• Working with Databases
• CRUD on the Backend
• Manipulating data on the
backend
• Working with Service
Workers
• Building a web crawler
• Working with databases
• CORS
• Securing databases
PROJECT NAME
Backend for E-Commerce
Application
TOOLS: HTML, CSS, Javascript,
Bootstrap(Optional)
Assets: IP Tracking application.
SUMMARY
The goal with this task is to learn Building Laravel Admin Backend
the essential parts of the
backend of an ecommerce
application. Your application can
implement the following
features
• CRUD operations by admin
user, Implementing a
product cart
• Social integration
• Admin dashboard and User
Dashboard
TUTORIAL REFERENCE WHAT YOU WILL LEARN
• Creating multiple users in an
application
• One-to-Many relationships in
databases
• Building a review system
• Manipulating Databases
• Securing databases
@HERCODEFACTORY
CONCLUSION
The projects listed here are meant to task your creative juices and encourage you to build and learn to solve problems
on your own.
Downloading this e-book automatically signed you up to receive a notification for when the HerCodeFactory Portfolio
Building Masterclass starts. In this class, you will be building out the portfolio projects and get the opportunity to
learn and grow with a community.

There will also be code reviews and corrections during the Masterclass.
Check your email to know when the class starts.

Ciao!
Vanessa O.
Community Manager, HerCodeFactory