Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
48
Comments
44
P
Rafael Dias
@rafaeldgeo

All comments

  • verakissyou17•540
    @verakissyou17
    Submitted about 1 month ago

    Mortgage calculator

    #react#vite#styled-components
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted about 1 month ago

    @verakissyou17 hi! Very good your challenge! I liked the mode light-dark. I saw that you put the input as type text. It's possible, don't problem! As suggestion, you would check the state of the element input before shows the value into the input, in React is less work than Javascript Vanilla.

    Marked as helpful
  • P
    Andrey•4,580
    @dar-ju
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Decided to make a more universal approach using API and loading data as if from the backend - from data.json. What does this give? Сan add / remove blocks by editing this file and the layout will not break.

    Wanted to make a skeleton-loading, but there is not much loaded content for this.

    There is more JS code with the construction of an additional DOM, it would be possible to use NPM Redom ...

    News homepage

    #bem#fetch
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 5 months ago

    @dar-ju congratulation for your challenge. It's very good!

  • abizmo•990
    @abizmo
    Submitted about 1 year ago

    Contact form solution with Astro

    #astro#react#tailwind-css#zod
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 5 months ago

    @abizmo Congratulation for your challenge! It's very good!

  • Bamo-D-Abdallah•320
    @Bamo-D-Abdallah
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    The way I organized the partials, although I think I went excessive and over-engineered it.

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

    The space between each Q/A became a challenge when a question was clicked, it became inconsistent and took me an hour to fix.

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

    overall the structure and organization of the project, I feel insecure about the way I named my classes and organized my code.

    Faq accordion solution

    #sass/scss#bem
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 5 months ago

    @Bamo-D-Abdallah congratulation for you challenge! I didn't get to see it. I think there are a problem with link

  • Sebastián Márquez•260
    @donSebamarquez
    Submitted 6 months ago

    Interactive rating component

    #bem
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 5 months ago

    @sebamarques congratulation for your challange! I didn't preview the site. There's some problem.

  • Yanna•250
    @yannancls
    Submitted 9 months ago

    Tip Calculator App using React

    #react
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 6 months ago

    @yannancls Congratulation! Your challenge was fantastic!

  • verakissyou17•540
    @verakissyou17
    Submitted 7 months ago

    News homepage with Vanilla JS and pure CSS

    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 7 months ago

    @verakissyou17 Congratulation!!! Brilliantly responsive!!!

    Marked as helpful
  • Anderson Gomes•210
    @andersongomes001
    Submitted 7 months ago

    Frontend Mentor - Tip calculator app

    2
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 7 months ago

    @andersongomes001 Parabéns pelo desafio! Interação com JavaScript DOM ficou ótimo! Só a fonte que está carregando Times New Roman e Arial.

    Marked as helpful
  • Natali 👻 Grimm•1,190
    @Grimm-N
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I found it really interesting to work on the entire block! It’s a satisfying feeling to have completed something comprehensive. It’s great to see how all the pieces fit together.

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

    I realized that we didn't have a mobile design in place, and since the "medium size" was set for tablets, I ended up creating two types of media queries – max and min. It didn't turn out as neatly as I would have liked, but it got the job done!

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

    Every comment, piece of advice, and opinion is important to me. They help shape my work and inspire me to improve continuously!

    Responsive Landing Page (pure CSS, html)

    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 9 months ago

    Hi @Grimm-N Congratulation! Your changelle is perfect! I loved the responsive fluid

  • P
    edpau•470
    @edpau
    Submitted 9 months ago
    What specific areas of your project would you like help with?

    Please kindly review how I make the radio button, please advise how I can improve accessibility.

    Tip Calculator with TS and Grid

    #bem
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 9 months ago

    Hi @edpau Congratulation! your solution is great!! It was very smart you using radio button. In developing this challenge, I'm going change of button to radio button. Thanks! I think you could use aria-label or aria-checked,for accessibility

  • Azzam Al Kahil•310
    @AZZAM-K
    Submitted 10 months ago
    What challenges did you encounter, and how did you overcome them?

    It was my first time working with a JSON file and get data from it.

    Responsive design , JSON file

    #fetch
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 9 months ago

    Hi @AZZAM-K Congratulation! The layout your challenge is good! There is some problem with request JSON, the datas are not showing, maybe the problem be in "fetch('./data.json')", you could remove the dot "fetch('/data.json')"

    I hope work it.

  • Ataize Feitosa•260
    @Ataize
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge helped me practice CSS grid. I also used pseudo classes and variables in css.

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

    I would like to know if I was right using pseudo-classes or if another way would be better.

    Testimonials section with css grid

    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 9 months ago

    hi @Ataize! Congratulation! Your challenge is great!

    Pseudo-classes was a good solution, but It's more complex! You could using a principal class and other modification class.

    Exampla:

    .card { font-size: ... font-family: ... .... }

    .card--one { background-color: red; color: white; }

    .card--two { background-color: blue; color: yellow; }

    <div class="card card--one"></div> <div class="card card--two"></div>

    There's a metodology that can help you. https://getbem.com/

    Good luck on your journey! Let's practice!

    Marked as helpful
  • P
    Jan•170
    @Negligence
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I'm very proud of using ```clamp()`` to dynamically resize the width and height of images.

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

    Splitting the desktop image in half.

    
    
      
        
      
      
      
      
      
        
        Group Chatfor Everyone
        
        Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.
        
        
          Download v1.3
          What is it?
        
        
      
      
      
      
    
    
    .hero__image {
      overflow-x: hidden;
    }
    
    .hero__img {
      height: clamp(10rem, 1.4719rem + 36.3868vw, 18.9375rem);
    
      &[src*=desktop] {
        display: none;
      }
    }
    
    @include mobile-media-query(1150px) {
      .hero {
        max-width: rem(1362px);
        grid-auto-flow: column;
        margin-inline: auto;
        position: relative;
      }
      
      .hero__image {
        display: none;
      }
      
      .hero__img {
        &[src*=desktop] {
          position: absolute;
          display: block;
          height: clamp(18.9375rem, 1.125rem + 23.75vw, 22.5rem);
        }
    
        &[src*=left] {
          left: clamp(-4.875rem, -14.625rem + -21.6667vw, -1.625rem);
        }
    
        &[src*=right] {
          right: clamp(-4.875rem, -14.625rem + -21.6667vw, -1.625rem);
        }
      }
    }
    
    What specific areas of your project would you like help with?

    I want to get the background overlay color right for the footer.

    I'm currently using a background-image property in combination with a ::before element with a background color with opacity, but doing so did not get me the exact color from the design.

    .footer__content {
      position: relative;
      place-items: center;
      row-gap: var(--s-300);
      margin-block-start: rem(108px);
      padding: var(--s-800) var(--s-300);
      width: 100%;
      height: rem(392px);
      background-image: url(../images/mobile/image-footer.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: var(--cyan-600-overlay);
      }
    }
    

    Responsive Meet landing page

    #sass/scss
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 9 months ago

    Hi @Negligence! Congratulation for your challenge, it's great! About background overlay color right for the footer. Your solution is right.

    You could use linear-gradient too.

    background: linear-gradient(hsla(192, 37%, 48%, 0.9), hsla(192, 37%, 48%, 0.9)), no-repeat url("../assets/desktop/image-footer.jpg");

    I hope to have helped!

    Marked as helpful
  • P
    Rafael Dias•1,100
    @rafaeldgeo
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud use Lit Library to create custom form element.

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

    The challenge was use Lit Library to create form custom element, because I'm still learning to use it.

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

    I would like feedback about use Lit Library. Thanks!

    newsletter-sign-up-with-success-message-main using Lit Library

    #bem#lit
    2
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 9 months ago

    Hi @edpau

    Yes, I used max-inline-size: 100% and block-size: auto to SVG adjust itself according to the view. I put in SVG code the viewBox attribute.

    max-inline-size or max-width define the maximus size image. block-size define the height. It's auto.

    You can know more by link

    https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

    https://web.dev/learn/images

    I hope I helped you. Sorry the English

  • Bisshy•150
    @Bisshy
    Submitted 11 months ago

    Responsive landing page using CSSGrid live to my site using JS

    #bem
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 10 months ago

    Hi @Bisshy! Congratulation for your challenge! Good luck in your studies

  • P
    DalaScript•600
    @DalaScript
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?
    • I’m proud that I finished the project and that it looks exactly like the design! 🎉🎨
    What challenges did you encounter, and how did you overcome them?
    • I faced difficulties with the share-container; it appeared differently on mobile, causing the article size to change, and it behaved differently on the desktop version. 📱💻
    • I managed to fix it, but I’m not sure if it’s the best solution. 🤔🔧
    What specific areas of your project would you like help with?
    • The project is complete and everything works, but I’m open to any advice! 💡👍

    Responsive Article preview component using Flexbox, SCSS and BEM

    #sass/scss#bem
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 10 months ago

    Congratulation @DalaScript Your challenge is fantastic

  • P
    Dan Marius•1,275
    @danmlarsen
    Submitted 12 months ago
    What specific areas of your project would you like help with?

    I always appreciate any feedback

    Mobile first with Flexbox & CSSGrid

    #bem
    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 10 months ago

    Congratulation @danmlarsen Your solution was incredible!!

  • verakissyou17•540
    @verakissyou17
    Submitted 12 months ago

    time-tracking-dashboard-main

    1
    P
    Rafael Dias•1,100
    @rafaeldgeo
    Posted 12 months ago

    @verakissyou17 Congratulation! Your challenge was fantastic!

    Marked as helpful
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