Photo by Jason Goodman on Unsplash

Project Analysis

When we start a new project, the first step in our web development workflow is to analyze the project thoroughly. This helps us to understand the project requirements and ensure that we are on the right track from the beginning of the project.

We also use this step to identify any potential issues that may arise during the project. This helps us to avoid any potential problems and ensure that we deliver the best results possible.

To do that, we receive the project design from the client and this could be in the form of a design file or a link to a design tool like Figma, Zeplin, Adobe XD… etc.

We’d like to break down this process into the following steps:

  1. Requirements
  2. Components
  3. Assets
  4. Stack
  5. Browsers Support

Requirements

Before starting any coding, make sure to go through the design requirements provided by the client. Understand the color scheme, typography, and the overall layout of the website.

Components

Look for common design patterns that could be reused throughout the project. This includes header, footer, buttons, form fields, and other UI elements. Identifying reusable components can help save time and reduce code duplication.

Assets

Make sure that all project assets, such as images, icons, and videos, are available in the propper format and size.

While we don’t work with graphics, sometimes we have to make a little modifications to the provided assets ie: compressing, remove transparent pixels/backgrounds, etc. For that we rely on the following resources

Stack

Our stack is based on the following technologies:

  • HTML5 - Semantic markup
  • CSS (Sass) and BEM methodology
  • JavaScript Vanilla (ES6).

We normally don’t use any CSS or JS frameworks/libraries unless it’s a special case. We prefer to use Vanilla JS and CSS to keep the codebase as simple as possible.

Astro framework

Astro is a great framework, versatil, robust, developer friendly, we absolutely love it an recommend it. You can learn more about it here.

Browser Support

We support the latest versions of the following browsers:

  • Chrome
  • Firefox
  • Edge
  • Safari (desktop and mobile devices).



Next: Codebase