Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
18
P
Jdaans
@Jdaans

All comments

  • P
    Hogymess•350
    @jull20
    Submitted about 2 months ago

    PasswordGeneratorApp

    1
    P
    Jdaans•210
    @Jdaans
    Posted 14 days ago

    this looks really good! I do not understand how you wrote your JS but it works obviously! nice job

  • Jordan Bugglin•410
    @Jbugglin
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I honestly forgot that I had even started this challenge, I finished it pretty quickly, so I'm kind of anxious to see how far off it was in comparison to the prompt.

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

    I'm trying to figure out better breakpoints for the media queries and not having to repeat styling tags.

    Responsive 3-column preview using vanilla HTML5/CSS3

    1
    P
    Jdaans•210
    @Jdaans
    Posted about 1 month ago

    You should only have to write the styles once unless you're wanting to change a background color or something on a different screen size, media queries should just be changing the layout on different screen sizes, for this type of project atleast

  • P
    Hogymess•350
    @jull20
    Submitted about 2 months ago

    TipCalculatorAppMain, html, sass, js

    1
    P
    Jdaans•210
    @Jdaans
    Posted about 2 months ago

    looks really good!

  • Ryan Chigwengwe•30
    @rctrollex
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the way I am thinking UI, in terms of divs and small components, It helps me to create responsive and good looking designs.

    I want to try to tackle background images, image positioning and sizing because I had problems from that area, when I was doing this project.

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

    I encountered a challenge of placing the images to be same as in the design files, it was difficult to handle image positioning, sizing and to avoid overflowing of the images.

    I didn't overcame them completely but with the help of AI and the use of Tailwind CSS docs, the design looked better.

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

    The positioning of the 2 images, the background picture and the mobile phones pictures.

    Responsive Landing Page Using React Js and Tailwind Css & grids

    #react#tailwind-css
    1
    P
    Jdaans•210
    @Jdaans
    Posted about 2 months ago

    This is really nice!

  • Alex•60
    @Gummi-D
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Centering on page could be solved a lot prettier

    CSS

    2
    P
    Jdaans•210
    @Jdaans
    Posted about 2 months ago

    On your body you need to use display: flex; Then justify-content and align-items both set to center, good job though!

    Marked as helpful
  • ella•130
    @Ellamonacillo
    Submitted about 2 months ago

    Responsive Time Tracking Dashboard

    1
    P
    Jdaans•210
    @Jdaans
    Posted about 2 months ago

    this looks awesome, your code is super clean, looks way better then my attempt lol I cant add anything to this, for your css is that tailwind ?

  • nihalgit45•30
    @nihalgit45
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I took a basic recipe page and turned it into a more interactive and visually appealing website by adding gradients, transitions, a navigation bar, and a responsive layout. I also implemented a recipe download/print button and added a gallery carousel which really enhanced the user experience.

    If I were to do this project again, I would try using a frontend framework like React or a CSS framework like Tailwind to speed up development and add more reusable components. I’d also like to improve accessibility and explore deploying with a custom domain.

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

    One of the main challenges was creating an attractive and fully responsive layout using only HTML and CSS. I had to experiment with different layout techniques like Flexbox and media queries to ensure the website looked good on both desktop and mobile screens.

    Another challenge was styling elements like buttons, borders, gradients, and transitions to make the site visually appealing without any JavaScript. I overcame this by using CSS animations, hover effects, and transitions to add interactivity and visual flow to the page.

    This project helped me improve my CSS design skills and understand how to achieve dynamic effects using only core web technologies.

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

    I would appreciate feedback on the following:

    Visual Design & Layout: Are there any improvements I can make to the spacing, color palette, or overall layout to make the website look more modern and clean?

    Responsiveness: The site uses Flexbox and media queries. I’d love suggestions on how to better optimize it for different screen sizes or edge cases.

    Accessibility: I want to ensure the page is accessible. Are there any semantic HTML improvements or accessibility best practices I might have missed?

    Performance: Since I’m only using HTML and CSS, are there any tips to make the page load faster or reduce CSS bloat?

    Interactive Omelette Recipe Website with Responsive Design.

    1
    P
    Jdaans•210
    @Jdaans
    Posted about 2 months ago

    I like the way you made it your own it looks really nice, the image is a little to big but the idea is awesome

  • domdem-dev•280
    @domdem-dev
    Submitted 2 months ago

    responsive web page with javascript vanilla

    1
    P
    Jdaans•210
    @Jdaans
    Posted 2 months ago

    it looks good! one thing that is off is the newsletter is not centered on the screen, if you put display: flex; justify-content: center; align-items: center; on the body it should put it in the middle, good job though

  • P
    GeraASM•640
    @GeraASM
    Submitted 2 months ago
    What specific areas of your project would you like help with?

    I'd some help about the width and height in the project because i've no gotten exactitud like the design

    I use tecniques in flexbox and transform

    1
    P
    Jdaans•210
    @Jdaans
    Posted 2 months ago

    Looks pretty good, almost exactly spot on! nice job

  • Hugo Almeida•730
    @almeida883
    Submitted over 2 years ago

    Meet landing page

    1
    P
    Jdaans•210
    @Jdaans
    Posted 2 months ago

    it looks like your fonts are different from the original and everything is a little bit smaller, but the accuracy on the layout is really good, nice job!

  • P
    Tibor•120
    @totibor
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    The responsive part of the grid was accaptable at first try. Styling of the cards a bit messy, needs to have a better approach next time.

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

    In case of this design all of the cards has major and minor design charactarectis which made it hard to create a simple, unified styling. I think this design is a good case for Tailwind and utility classes in general. Needs to dive deeper in the future to see its benefits.

    Testimonials Grid Section (HTML, CSS)

    1
    P
    Jdaans•210
    @Jdaans
    Posted 2 months ago

    All I can really see that is off is the placement of the main container but it's barely off, and your box shadows aren't as visible, I have nothing to add to fix it though it looks really good, awesome job!

  • P
    João Santos•110
    @joaofsds
    Submitted 3 months ago

    Four card feature section

    1
    P
    Jdaans•210
    @Jdaans
    Posted 3 months ago

    it all looks good! only problems I see are that you didn't center anything on the screen and it looks like the calculator card is overlapping with the back ground

    you could have wrapped the top section with the h1 and p in a header tag so you can center all of that together, i'm not experienced enough to recommend a best way to fix all of it but it looks like it's just in the way you wrote your html, good job though! looks good

  • yrjeb•550
    @yrjeb
    Submitted 3 months ago

    Product Preview Card

    1
    P
    Jdaans•210
    @Jdaans
    Posted 3 months ago

    this looks really good, it's all responsive and working well the only things I see that are off is the fonts but that could of been by choice, the shadow on the button was also a nice touch. There really isn't anything I can add to improve this, good job!

  • DRTX2•30
    @DRTX2
    Submitted 3 months ago

    Recipe page with just css

    1
    P
    Jdaans•210
    @Jdaans
    Posted 3 months ago

    the only issue I notice is that you missed the h1 and the font style for you header elements isn't correct, but other then that it looks awesome! it turned out better then mine did lol nice job

  • Afeliciosilva•100
    @Afeliciosilva
    Submitted 3 months ago

    Página das Redes Sociais feitas com Html e Css

    1
    P
    Jdaans•210
    @Jdaans
    Posted 3 months ago

    it looks good! the image is a little smaller then it's supposed to be but that's an easy fix, I believe just adjusting the height and width should fix that, good job!

  • Thiago de Oliveira Santos•130
    @smuhanerd
    Submitted 3 months ago

    Responsive blog using CSS

    1
    P
    Jdaans•210
    @Jdaans
    Posted 3 months ago

    It looks really good! the only issues I notice is that it's sitting slightly higher then the design and your shadow looks a little bigger then it's supposed to be, but you did an awesome job on it!

  • Gigantiz Nuts•50
    @xxjiadexx
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Perhaps can wrap them together in a single div

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

    still not unsure about flexbox

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

    More on flexbox tutorial

    Responsive design with CSS flex,hover and focus

    4
    P
    Jdaans•210
    @Jdaans
    Posted 3 months ago

    how did you get everything inside of the white area? is it just all wrapped in one div

  • Ibarra25•10
    @Ibarra25
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Estoy orgulloso del esfuerzo que hice para realizar este proyecto y lo que haria diferente es utilizar mas herramientas para agilizar el tiempo

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

    Algunas partes del proyecto no las recordaba muy bien y las supere con herramientas de IA

    ChatGPT

    1
    P
    Jdaans•210
    @Jdaans
    Posted 3 months ago

    I can see some stuff that needs to be fixed, but I myself am not sure where to start with making the changes, good job though keep at it!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub