Case Study mouatezbenariba.me

1. Introduction

Image showcasing some information about the website owner: Elmouatez Billah Benariba, Frontend Developer and Biotechnology Engineer, and mouatezbenariba.me

I created my personal website to showcase my frontend development projects and skills, which is a common practice among frontend developers. It not only allows you to exhibit your work to potential clients or employers but also provides an opportunity to experiment with new technologies and design trends and establish your personal brand in the industry.

2. Concept & Inspiration

For my personal website, I wanted to create a simple yet effective design that would showcase my frontend development skills and projects. I drew inspiration from several frontend developers, including Lynn Fisher, Addy Osmani, Sara Soueidan, and Josh Comeau . These developers' websites all share a clean, minimalistic design that prioritizes content and functionality.

3. Design and User Interface

When designing my personal website, I aimed to create a simple and intuitive user interface that showcases my frontend development projects. The website is designed to be minimalistic, with a focus on the content and the user experience.

To achieve this, I used flexbox to create a consistent layout throughout the website, with clear navigation and intuitive design elements. Flexbox allowed me to create responsive designs that adapt to different screen sizes, ensuring that the website looks great on all devices.

Home page - Flex layout
Home page - Flex layout

The header and footer sections feature prominent links to key pages, while the main content area highlights my portfolio projects. The use of a clean and modern design, combined with a simple color scheme and typography, ensures a cohesive and professional-looking website.

The color palette is intentionally minimalistic, with a primary red color used for the header, footer, and project cards, and a lighter shade used for the main background. The use of flexbox and a consistent layout ensure that the website is easy to navigate and provides a smooth user experience.

a. Color scheme

When designing my personal website, I chose a color scheme that would be visually appealing and enhance the user experience. For the header, footer, and project cards backgrounds, I used a rich red color: #7a1f1f, to draw attention to these important elements. For the main background, I used a slightly lighter shade of red: #9b2727 , to create a cohesive design.

To ensure that the text was easily readable, I used a white font color: #ffffff . For my job title, which I wanted to emphasize, I used a vibrant khaki color: #ffc107 . To highlight keywords (underline), I used a transparent khaki color: #ffc107b0.

I also included secondary colors to enhance the design. For example, when hovering over header links, I used a light red color: #ffb2b2, to make them stand out. To add a shadow box effect on project cards when hovering, I used a vermilion color: #ff5722.

In designing the color scheme, I made sure to use colors with sufficient contrast to ensure readability and accessibility.

Color scheme
Color scheme

b. Typography

In designing my personal website, I chose the 'Cabinet Grotesk' font family to create a clean and modern design. To ensure security and optimize performance, I self-hosted the font files instead of relying on external sources. The use of a sans-serif font adds a contemporary feel to the design and enhances the readability of the text.

4. Development

a. Choice of Technology

For my personal website, I wanted to showcase my skills as a frontend developer by building the site from scratch using modern web technologies. I chose to use HTML5 and CSS3, which allowed me to take advantage of features like semantic markup and advanced styling capabilities. Additionally, I utilized flexbox for layout, which enabled me to create a responsive design that adapts to different screen sizes.

By building the site without the use of a CSS framework or preprocessor, I was able to have more control over the final product and customize it to my liking. This approach also allowed me to develop my knowledge and skills in HTML and CSS, which will benefit me in future projects.

b. Website Structure

My website follows a simple and straightforward structure to showcase my frontend development projects. The homepage greets visitors with a brief introduction about myself and what I do.

The main attraction of the homepage is the project cards that display a preview of each project. Each card includes three links: one to the GitHub repository of the project for the source code, one to a detailed article about the project, and one to the live/demo version of the project.

mouatezbenariba.me project card structure explained
Project card explained

I've kept the website structure minimal and focused only on the main page and a 404.html page in case of errors. The header and footer sections contain links to my social media profiles and blog.

404 error page
404 Error page

c. Coding Standard

To ensure consistency and maintainability of my code, I made sure to write clean, readable, and commented code.

I also created some utility classes to avoid repetition and make it easier to use in different parts of the website.

To keep the color scheme consistent, I used CSS custom properties for colors with the help of the Alwane.io tool. Additionally, I used font sizes (xs, s, m, l, xl, xxl) defined as variables for typography.

Alwane.io tool
Alwane.io tool

To maintain a consistent style throughout my code, I used Prettier for code formatting. Since my website is built purely with HTML and CSS.

d. Social Media

I made sure that my personal website is optimized for sharing on social media platforms by adding Open Graph metadata and Twitter cards. This ensures that when my website is shared on social media, it is presented in an attractive and professional manner, with the appropriate image, title, and description.

The image displays the implementation of Open Graph Meta tags on my personal website, followed by an explanation of the anatomy of the corresponding link preview.
the Anatomy of a Facebook link preview that is generated using Open Graph Meta tags
The image displays the implementation of Twitter Cards Markup on my personal website, followed by an explanation of the anatomy of the corresponding Twitter card.
the Anatomy of a Twitter Card (twitter link preview) that is generated using Twitter Card Markup.

e. Development approach

When it comes to the development approach, I initially started with a desktop-first workflow. However, after reading Kevin Powell's article on the mobile-first approach , I decided to rewrite the CSS file using a mobile-first approach.

The mobile-first approach involves designing the website first for mobile devices and then scaling it up to desktop devices. This approach ensures that the website is fast, lightweight, and user-friendly on smaller screens. By prioritizing mobile devices, we can create a responsive design that adapts seamlessly to larger screens as well.

Mobile-first approach
Mobile-first approach

5. Page quality (Core Web Vitals)

My website has received a 100% Google page speed performance, SEO, accessibility, and best practices for both mobile and desktop.

mouatezbenariba.me PageSpeed Quality Report
mouatezbenariba.me PageSpeed Quality report

To achieve this, I implemented various techniques and optimizations. For performance, I :

  • - Optimized the loading and rendering of web fonts by preloading them.
  • - Served images in the next-gen format (WebP).
  • - Used multiple sources for a picture tag to suit the viewport in terms of quality and size.
  • - Prioritized critical CSS and defer non-critical CSS.
  • - Properly sized images by adding explicit width and height dimensions.
  • - Eliminated rendering blocking resources.
  • - Avoided chaining critical requests.

For accessibility, I added:

  • - alt text to images.
  • - ARIA labels for links that don't have discernible names.

For SEO, I added:

  • - meta author and meta description.
  • - schema.org structured data.
  • - sitemap.xml file to my website.
  • - mouatezbenariba.me to google search console.

6. Features and Functionality

When it comes to the features and functionality of my website, I have incorporated smooth and consistent animations, such as hover effects on links and project cards, to add a touch of interactivity to the website.

I have also used a responsive design approach to ensure that the website is optimized for all screen sizes, including mobile devices.

In terms of testing and debugging, I used a combination of manual testing and browser developer tools to identify and fix any bugs or issues. I used the Toptal Web Developer checklist as a guide to ensure best practices were followed.

toptal web developer checklist
Toptal Web Developer Checklist

I mainly:

7. Deployment

To make my website accessible to the public, I deployed it using GitHub Pages, and later on, I opted for Netlify for its simplicity and integration with my custom domain name. Overall, this combination of tools and services provided me with a smooth and efficient development experience.

8. Conclusion

Throughout the development process of my website, I gained valuable insights and knowledge about various web development practices and techniques. I gained an understanding on how to optimize web font loading and rendering, I learned how to improve the performance of my website and reduce layout shifts.

I also learned about the importance of adhering to font best practices and using the BEM naming convention when creating CSS classes. Additionally, I learned how to defer noncritical CSS and load CSS files according to media screen size, which helps optimize website loading times.

Furthermore, I gained an understanding of how to improve the Core Web Vitals, a set of performance metrics that are increasingly important for website ranking and user experience. I also learned how to optimize tweets with Twitter cards, which can improve social media sharing and engagement.

In conclusion, the process of developing my website has been a valuable learning experience that has expanded my knowledge and skills in web development. I am excited to continue learning and improving as I work on future projects.