Hello! Thanks for visiting. I'm Eleana and I'm a Junior Frontend Developer from Greece.
This is my solution to the Designo agency website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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 AddressorYour Messagefields are empty should show "Can't be empty" - The
Email Addressis not formatted correctly should show "Please use a valid email address"
- The
- Bonus: View actual locations on the locations page maps (we recommend Leaflet JS for this)
- Solution URL: on Frontend Mentor
- Live Site URL: on GitHub Pages
I started by creating a design system where I set up the main styles and css variables and built all the reusable components. Then I created a style.css file where I migrated all the shared styles. For each individual page, I also created a respective css file for page specific styles, components and variations.
This project uses minimal JavaScript for:
- The mobile toggle
- Loading the maps on the locations.html
- Smooth scrolling to a specific location in the locations.html, via a link on another page
- Client-side validation on the contact form
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript
- Leaflet.js - JS library
Next update for this project will focus on improving accessibility.
Hi, my name is Eleana and I'm a Junior Frontend Developer. Feel free to connect with me on Linkedin and say hi :)
- Linkedin - Eleana Tyradelli
- Codepen - @eTyradelli
- Frontend Mentor - @eTyradelli