Project X

Planning

Before starting this project I had to hand in a planning and a project proposal. I made a planning for my project.

Why did I make a planning?

I made a planning to know what I had to do and when I had to do it. This way I could easily track my progress and see if I was done in time.

How did I do it?

I checked how much time we had for the project and what tasks I needed to complete. Then, I created a plan based on the available time.

Click here for the the planning in full size.

Goal

The goal of this project is to rewrite the CSS of the website Atomize Design The focus is on implementing either Tailwind CSS or SCSS with the BEM (Block-Element-Modifier) methodology. This project will not involve redesigning the website in Figma but instead focuses solely on the technical implementation of CSS using the specified tools.

Learning Outcomes

I wanted to address some learning outcomes to this project to have extra evidence for them. The learning outcomes I wanted to address are:

Development & Git
Interactive Media Design
Iterative Design
Professional standard

Content & Research

The original plan was to start working on Project X the week before the Christmas break and finish it in the first week of the new year. Unfortunately, I fell a bit behind on my portfolio, so I postponed the planning and began focusing on Project X after the break.

What is Tailwind?

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. It is a CSS framework that gives you all of the building blocks you need to build a website. It is a utility-first framework, which means that it provides low-level utility classes that let you build completely custom designs without ever leaving your HTML file.

How did I learn Tailwind?

I focussed on watching tutorials about Tailwind CSS. I first had to discover and learn how to setup a repository with Tailwind installed and having all the correct configurations for that. I watched a youtube video to do this.
I also used the official Tailwind documentation to search up different css classes that were changed in Tailwind. For example writing "bg-red-500" in tailwind is the same as writing "background-color: red" in css.

Realisation

After the first week, I realized that learning Tailwind and building the entire website would take much longer than I had initially planned. So, I messaged Stan on Teams to let him know that I wanted to focus solely on Tailwind and not experiment with other methods for the website.

Stan was okay with this proposal and I began to focus purely on making the tailwind version of the website.

Development

I started the development of the website by creating a new repository on Github. I then installed Tailwind CSS. I also installed the Tailwind CSS IntelliSense extension in Visual Studio Code to help me with writing the classes.

I made multiple commits to the repository to keep track of my progress. See the repository here.

Website Division

I divided the website into multiple sections. I created a header, footer and multiple different sections so I could easily navigate and have a clear overview of the website.

Bento Grid

The website that I needed to recreate uses a bento grid in it's design. I didn't know how to make one of those out of my hand so i used a tool called cssgrid-generator. This helped me to make the bento grid much faster and easier. I did had to translate the css grid to tailwind classes.

To see the full project go to projectX.luuksteijaert.nl

Unfinished Work after deadline

I asked Anke if it would be alright for me to focus on my project X after delivering the website. She agreed, as long as I outlined the changes I would be making to the current project for the presentation next Friday, January 17, 2025.
The changes I made involved finishing the final part of the website. I still need to complete the pricing section, footer, and some minor text updates, which I plan to finish over the next few days leading up to Friday.