Skip to content
Submitted 5 months ago

Agency-landing-page using css

Maysa-Tatour•120
@Maysa-Tatour
A solution to the Agency landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am really proud of designing a complete website by myself. It was a challenging yet rewarding experience, and I feel a great sense of achievement. Next time, I would like to focus on making my websites more interactive and engaging for users.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I encountered while designing the website was making sure it looked good and functioned properly on smaller screens. It was tricky to adjust the layout and ensure everything was responsive. To overcome this, I used responsive design techniques and tested the website on different devices to make sure it worked well across all screen sizes.

What specific areas of your project would you like help with?

I would appreciate help with improving the interactivity of my website. I want to enhance user experience by adding more interactive features and ensuring the website responds smoothly to user actions. Additionally, I'd like assistance with optimizing the site for different devices to ensure it works flawlessly across all screen sizes.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210

    Hi @Maysa-Tatour,

    I've reviewed your solution and wanted to share some feedback:

    • If you faced challenges with smaller screens, I’d recommend adopting a mobile-first approach. This means developing for smaller screens first and then scaling up for larger ones. Currently, you're using @media (max-width: [number]px), which suggests you started with a desktop-first approach and then adjusted for smaller screens.
    • I noticed you're using <section> for various types of content. It would be better to differentiate elements by using more appropriate HTML tags. Many of these elements aren’t actual sections, so making this adjustment will improve the semantic structure of your page.
    • This challenge doesn’t require extensive interactivity, as there aren’t many buttons or call-to-action elements. However, you could enhance engagement by adding links to your social media accounts (Facebook, Instagram, X, Pinterest) at the bottom of the page, as the design seems to suggest their presence. Additionally, incorporating micro-interactions—like hover effects on <a> and <button> elements—would make the page feel more dynamic. You could also use CSS animations (animation property) to introduce subtle effects, such as sections appearing as the user scrolls.

    Hope this helps!

    Marked as helpful
  • Maysa-Tatour•120
    @Maysa-Tatour

    Thank you for your valuable review and helpful feedback I will try applying the Mobile-First approach to improve the user experience on smaller screens. Regarding the use of <section>, I will review the HTML structure to ensure that the most appropriate elements are used for each part. Adding links and interactive effects is a great idea! I will work on enhancing the interaction with hover effects and CSS animations to make the design more dynamic.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord