Web Shop
1 February 2023
Context
This project was created as part of the ‘Web Development’ module at Reutlingen University during my time studying abroad.
I worked on this project in a team of two, with my colleague being responsible for the backend while I was responsible for the frontend.
Final Product
The following video demonstrates the key functionality of the website, as well as going through all of the pages to show what they look like.
Challenges
During the start of the project, I had created a design on Figma. Then went on to create the HTML and CSS for the design without using Tailwind CSS.
After some time working on the project and most of the pages created I came to realize that the website didn’t look quite right. I had also found that I was struggling to make decisive decisions on the colours, borders and spacing of the website.
Because I had used Tailwind before, I decided to experiment with it for the login and register pages. I quickly found that it was extremely fast to develop using Tailwind, and that the pages looked more professional and refined than the ones I had created using my own CSS.
I quickly made the decision to switch over to Tailwind CSS for the rest of the project, and I am very happy with the decision.
What I learned
PHP isnt as bad as I thought
Before doing this project I had a very vague understanding of PHP, mainly that it was an old language. I had been introduced to PHP alongside Bootstrap and jQuery in a previous module, and I found both bootstrap and jQuery to be much harder to use than just writing my own code natively in HTML, CSS and JavaScript.
It seemed to me that both CSS and JavaScript had evolved since the creation of these libraries, and that they were no longer needed. I used this same logic with PHP, and dove straight into using frameworks like Svelte and React.
However, after working with PHP for a few weeks, I found that it was actually a very powerful language, and that it was much easier to use than I had originally thought. I also found that for simpler applications that don’t need ‘reactive content’ PHP is a great choice.
Tailwind CSS makes styling so much easier
When learning CSS I avoided using frameworks like Bootstrap and Tailwind CSS, as I wanted to learn how to write my own CSS. Because of this I have become able to create most designs with great accuracy using only CSS.
However when creating my own designs, I find the little / small details to be very difficult. When using various different size units, along with various colours. Its very difficult to create a strong and cohesive design.
I found tailwind when trying to solve this problem, as it provides simple preset sizes and colours, which make it much easier to create a cohesive design. I also found that it doesn’t take away the freedom of writing your own CSS. As it provides atomic classes that only do one thing, rather than entire components where you have to structure your HTML in a specific way to get the desired result.
I have really enjoyed learning Tailwind CSS, and I will definitely be using it in future projects.