https://github.com/tedjenkler/remake-designo-tailwind-vite
Challange made by frontend mentor by Teodor Jenkler that i remake in tailwind css
https://github.com/tedjenkler/remake-designo-tailwind-vite
Last synced: 8 months ago
JSON representation
Challange made by frontend mentor by Teodor Jenkler that i remake in tailwind css
- Host: GitHub
- URL: https://github.com/tedjenkler/remake-designo-tailwind-vite
- Owner: TedJenkler
- Created: 2024-03-04T07:40:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-06T14:08:14.000Z (over 1 year ago)
- Last Synced: 2025-01-22T02:32:32.059Z (10 months ago)
- Language: JavaScript
- Size: 10.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Designo agency website solution
This is a solution to the [Designo agency website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/designo-multipage-website-G48K6rfUT). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Author](#author)
## Overview
This project is a solution to the Designo agency website challenge on Frontend Mentor, aimed at improving coding skills by building realistic projects. The challenge involves creating a multipage website for Designo agency with specific requirements regarding layout responsiveness, interactive elements, and form validation.
### The challenge
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Receive an error message when the contact form is submitted if:
- The `Name`, `Email Address` or `Your Message` fields are empty should show "Can't be empty"
- The `Email Address` is not formatted correctly should show "Please use a valid email address"
- **Bonus**: View actual locations on the locations page maps (we recommend [Leaflet JS](https://leafletjs.com/) for this)
### Screenshot
### Links
- Solution URL: [Add solution URL here](https://github.com/TedJenkler/remake-designo-tailwind-vite)
- Live Site URL: [Add live site URL here](https://designoremaketedjenkler.netlify.app/)
## My Process
### March 4, 2024
- Started the project.
- Added navigation, hero, and project links.
- Installed Vite and Tailwind for the project setup.
### March 5, 2024
- Completed the mobile version of the homepage.
- Finished the tablet version of the homepage.
- Completed the desktop version of the homepage.
- Completed the mobile version of the about page.
- Finished the tablet version of the about page.
- Completed the desktop version of the about page.
- Completed the mobile version of the locations page.
- Finished the tablet version of the locations page.
- Integrated React Leaflet for the locations page.
- Completed the mobile version of the contact page.
- Finished the tablet version of the contact page.
- Completed the desktop version of the contact page.
- Added the App Design section.
- Completed the mobile version of the App Design page.
- Finished the tablet version of the App Design page.
- Completed the desktop version of the App Design page.
- Added the Graphic Design section.
- Completed the mobile version of the Graphic Design page.
- Finished the tablet version of the Graphic Design page.
- Completed the desktop version of the Graphic Design page.
### March 6, 2024
- Completed form validation for the contact page.
- Completed mobile, tablet, and desktop versions of the contact page.
- Linked the project to GitHub Pages for deployment.
### Built with
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Responsive design principles
- [React](https://reactjs.org/) - JS library
- [Vite](https://vitejs.dev/) - Frontend build tool
### What I learned
Through this project, I was able to strengthen my understanding of Tailwind CSS, which allowed me to leverage its utility classes effectively for styling. Additionally, I improved my ability to transition layouts from flexbox to CSS Grid, enhancing the responsiveness and flexibility of my designs across various screen sizes.
### Continued development
Moving forward, I intend to use this project as a template to showcase all my projects. By leveraging the structure and design elements implemented here, I aim to create a comprehensive portfolio that effectively highlights my work and skills. This approach will not only streamline the process but also ensure consistency across my portfolio, enhancing its overall presentation and user experience.
## Author
- Website - [TeodorJenkler](https://www.linkedin.com/in/tedjenklerwebdeveloper/)
- Frontend Mentor - [@TedJenkler](https://www.frontendmentor.io/profile/TedJenkler)