How to build a project from the ground-up

6 min readOct 4, 2021

This article describes how to build a project from the ground-up. I would like people who have no work experience like me to read this.

We will proceed with the project according to the following steps.

Step1. Plan
Step2. Build
Step3. Optimization
Step4. Finalization

Step1. Plan

The first step in a project is to define. You have to clear what the client wants.You need to ask them some questions to get the requirements.

・What is the purpose?
・Who is the target user?
・What page do you need?
・What is the technology requirement?

By clarifying the requirements in this step, mismatches can be reduced.

After getting the requirements, you have to plan with team. We need to decide who on the team can do each task and set a deadline for each task.

Step2. Build

wireframing&mockup

This is very important step to know what the final result will look like and to share the images with teammates. Create wireframes or mockups using Adobe XD, figma, etc.
You can see what components will go there. By following the mockup you can code smoothly

Start coding

Finally you can start coding.

At first, you need to setup dev environment, research other projects that are similar. Set up a git repo with branches as well.

What is Git

Git is the most commonly used version control system. Git is useful to anyone who writes code or track changes to files. It is able to track the changes you make to files and you can revert to specific versions should you ever need to. Multiple people can collaborate by using branch and merge.

Git Repositories

Git repositories contain all of the project files and the revision history.

How to use git

Git is software that you can access via a command line, or a desktop app.

You can use git with the following steps

Create a “repository”
Clone the repository to local machine
Add a file to local repository
commit the changes
push your changes to main branch
pull the changes to local machine, make a change, commit the change
create a “branch”
pull request
merge your branch to the main branch

Front End and Back End

Frontend and backend are the two most popular terms used in web development.These two are very crucial for web development but are quite different from each other.

Frontend
The part of a website that the user interacts with directly is termed the frontend. it is also referred to as the “client side”.

Backend
Backend is the server-side of the website. It stores and arranges data, and also makes sure everything on the client-side.

The following are commonly used languages for each.

Frontend
・HTML
・CSS
・JavaScript

Backend
・JavaScript
・Python
・PHP
・Java
・Ruby

What is HTML

HTML(Hypertext Markup Language)is the standard markup language for creating web pages. A hypertext is a text that is used to reference other pieces of text, while a markup language is a series of markings that tells web servers the style and Structure of a document.

What is CSS

CSS is the language for styling a web page. CSS stands for Cascading Style Sheets with an emphasis placed on “Style”. CSS brings style to your web pages by interacting with HTML elements. External stylesheets are stored in CSS files. Bootstrap is the most popular CSS framework.

What is Javascript

JavaScript is the Programming Language for the web. JavaScript can update and change HTML and CSS. JavaScript can calculate , manipulate and validate data.
JavaScript allows webpages to become more interactive in many ways including displaying animations, making functional drop-down menus, transform texts, or even changing button colors when the mouse hovers over it.
Developers often use frameworks such as React, Vue, Angular when creating web and mobile apps.

Some developers also choose to use Node.js, a back-end infrastructure to create basic web servers and to build on a site’s infrastructure.

What is Python

Python is a popular programming language recently. Python is used for web development, software development, system scripting. Python can be also used to handle big data and perform complex mathematics. Python is great for machine learning.
Django and Flask are two of the most popular web framework.

What is PHP

PHP(Hypertext Preprocessor) is a server-side language that has been around for more than 25 years. PHP is a widely-used, open source scripting language and executed on the server. The result is returned to the browser as plain HTML. It is easy to learn and use. Even without extensive knowledge or experience in web development, most people could create a web page with a single PHP file easily. PHP is open source, so this also helps developers get started with PHP for free.

What is Java

As the most popular programming language for over 20 years, Java has a whole host of backend frameworks, but their reliability and versatility vary widely. Spring, Struts, Hibernate are three of the most popular Java backend frameworks.

What is Ruby

Ruby is a popular, multi-purpose programming language. It has many uses, including web scraping, static site generation, command-line tools, automation and data processing.
Ruby has web development framework “Ruby on Rails”. It gives web developers everything they need to build a web application.
Ruby on Rails is used on famous sites, Github, Shopify, SoundCloud, Kickstarter, etc.

Make responsive design

Nowadays, it is commonplace to browse sites not only on PCs but also on tablets and smartphones. Sites need to be compatible with all devices.
Responsive design has three core principles: Fluid Grid System, Fluid Image Use, Media Queries.

Fluid Grid System
A fluid grid has fluid-width columns, fixed gutters and fixed side margins. The fluid grid has a flexible content width that goes edge to edge as per the screen size.

Fluid image use
Unlike text, images aren’t naturally fluid. So, you need to apply a CSS command to ensure an image shrinks for smaller screens.

Media query
These are filters you use to detect the browsing device’s dimensions and make your design appear appropriately. Based on a screen’s width, height, orientation, etc., you can accurately specify how your design will be rendered for different users to see.

Communicate

Keep in communication with the team and client. Get feedback.

Step3. Optimization

From optimizing cross-browser performance to compressing image files, this is the step where your team brings the website up to the highest standards it can.
The key factors of website success are conversion, visibility, usability.

Step4. Finalization

Testing

Be thorough with your testing. Test on multiple platforms, OS, browsers.

deployment
Deployment is the final step of a project. Once your website has been tested thoroughly, you will deploy it to a server. Netlify and Heroku are popular.

After deployment, we have to test again and resolve bugs.

Conclusion

What kind of design should be used, which language and framework should be used, these depend on the project. Learning various designs and languages will increase the value as a developer.
Thank you for reading.