Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
13
P
Daniel Basilio
@danielbasilio

All comments

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This is my 2nd attempt, first time I tried but couldnt complete it. Then I took a gap, practised more and solved it with easy which I am very much proud of.

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

    I need help in Styling the input slider. Any other feedback is also much appreciated.

    Responsive Password Generator App

    #react#typescript#tailwind-css
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted 4 months ago

    great job.

  • Will•160
    @WillAsampong
    Submitted 10 months ago

    Tip Calculator project

    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted 10 months ago

    Hi,

    Just to maintain good organizational practices, it would be a good idea to put the files in directories

  • S-LoCascio•90
    @S-LoCascio
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm really happy with how I was able to incorporate fetch. JS is still a bit daunting so getting it to work was a labour of love for a fun challenge.

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

    Getting the info from the fetch to actually fill the cards. The innerHTML was easy enough, and getting a console log of the fetched data was easy, but getting the elements to actually pull the data was a pain.

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

    I have a feeling my code is extremely clunky and, while I'm happy with how it works, am certain it's janky and held together by duct tape.

    Time_Tracking_Dashboard

    #sass/scss
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted 11 months ago

    Great work :-)

    I believe that in the CSS part, you could pay special attention to making your implementation look closer to the proposed layout.

    In the user experience part, I suggest that you use some strategy so that the screen already comes with the data loaded without the user having to click on the links. How about bringing a default value from the data that is in data.json?

    I really liked your work, keep improving.

    If you want to discuss the points mentioned, you can contact me

  • shubham oulkar•210
    @ShubhamOulkar
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This is my 1st mobile-first workflow project. Now I understand how to choose design workflows! I think flexbox works well with mobile-first workflow. I ended writing very less CSS.

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

    Writing media query's was quite challenging because I was used to write CSS from desktop to mobile workflow.

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

    I want to write modular CSS code by using @container and :has(). I want to use form validation API's and modules in my next complex form project. Please recommend me complex form validation projects.

    Responsive newsletter signup form with real time form validation

    #accessibility
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    great job.

  • P
    Kamran Kiani•2,780
    @kaamiik
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I did this challenge for the second time and I changed html structure and using Vite, cube css and also Sass.

    What challenges did you encounter, and how did you overcome them?
    • Using aria methods for accessibility issues
    • Add a popover on different screen sizes
    What specific areas of your project would you like help with?

    There is no specific issue. Please leave any feedback that you think might help me.

    Article Preview Component Using Saas and Vite

    #accessibility#bem#cube-css#sass/scss#vite
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    hi,

    Just to maintain good organizational practices, it would be interesting to keep all images within mass assets

  • ljmanayon•90
    @ljmanayon
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully implementing CSS Flexbox and Grid in this project. This was a significant milestone for me, demonstrating that I could effectively use these powerful layout systems to create a complex and responsive design. It was rewarding to see the design come to life and function as intended across different screen sizes.

    Next time, I would try to plan out my CSS structure more thoroughly from the beginning. While I was able to achieve the desired result, I found that I had to backtrack and refactor some of my code partway through the project. If I had spent more time planning my CSS classes and structure from the start, I could have potentially saved time and made the development process smoother.

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

    One of the challenges I encountered was ensuring that the landing page was fully responsive. This required careful planning and testing to ensure that the layout and elements adapted well to various screen sizes. To overcome this, I utilized CSS Flexbox and Grid to create a flexible layout that could accommodate a range of devices. Additionally, I regularly tested my design on different screens to catch any potential issues early on.

    Another challenge was organizing my CSS in a way that made it easy to manage and update. Initially, my CSS became a bit disorganized as I kept adding more styles, which made it difficult to navigate and understand. To resolve this, I refactored my code, grouping similar styles together and commenting my code clearly. This made my CSS more readable and maintainable, improving my workflow for the remainder of the project.

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

    I would like help with refining my understanding of CSS Flexbox and Grid. While I have made significant progress, I believe there is always more to learn. I would also appreciate any advice on how to structure my CSS more effectively from the beginning to streamline the development process. Finally, I would value any tips on best practices for web accessibility to ensure my websites are usable for all visitors.

    Meet Landing Page

    #accessibility#sass/scss
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    great job.

  • Benhemin•180
    @Benhemin
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This was my first time using CSS Grid! I am proud that I was able to use it successfully.

    I would take more time contemplating how to organize my styles using SASS, I kind of was rushing at the end to just complete the mobile version and it got pretty messy.

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

    How to handle the transition from a grid to a column. I wanted to use a grid for both desktop and mobile, but just use a single column grid. I was unable to figure that out but was able to make it work using flex display column rather than grid.

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

    I would like some help on handling dynamic font sizes, and keeping proportions of divs/content containers so that everything looks the same as the screen size begins to change before the hard transition caused via media queries. Is there in easy way to do this so that things still look great regardless of the size in between desktop/mobile size?

    Testimonial Page using CSS Grid and Sass

    #sass/scss
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    great job.

    just pay attention to the detail that the columns must follow the content, and not have a fixed height

  • DF•330
    @FengDenny
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This project helped me tackled the usage of mixins for different borders

    I would learn how to use other SCSS styling

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

    It took me some time to get used to learning SCSS as this was my second time using it. However, for the mixins, I had to read the SASS documentations to understand what was needed to be done.

    Once I read the documentation, it was straightforward on how to implement it.

    For those of you, who is curious on how it was done, here is the code snippet:

    @mixin cardContainerBorder($color) {
      &::before {
        content: "";
        display: block;
        border-top: 4px solid $color;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
    }
    // then use it like so
        &.supervisor {
          @include cardContainerBorder(var(--cyan));
        }
        &.team-builder {
          @include cardContainerBorder(var(--red));
        }
        &.karma {
          @include cardContainerBorder(var(--orange));
        }
        &.calculator {
          @include cardContainerBorder(var(--blue));
        }
    
    What specific areas of your project would you like help with?

    At the moment, none.

    SAA/SCSS Four Card Feature

    #sass/scss#accessibility
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    excellent work using mixins, I really liked it and I will be inspired by your example

    Marked as helpful
  • Mirjax2000•720
    @Mirjax2000
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    "art direction" and "resolution switching."

    I made another two copies in lower resolution width exact container width, and save some bandwith and higher resolution imgs are used for retina displays x2 and higher. for every resolution switch.

    This is lot of code. And if there will be more pictures on the site it will be nightmare. But it is doable and it speeds up the site.

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

    The most of the time i strugle with resolution switching and @media for it.

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

    "art direction" and "resolution switching." that is pain. But now i have some templates which i can use.

    Product-preview-card

    #gulp#sass/scss#bem
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    hi,

    Just to maintain good organizational practices, it would be interesting to keep all images within mass assets

    Marked as helpful
  • Codelearner123456•70
    @Codelearner123456
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Make what I had before better (because I had already started it on the individual challenge). Take less time on each project.

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

    Making what I had better and I overcame it by looking at the design closely.

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

    Css.

    Recipe page

    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    hi there! 👋

    You can center your content with Flexbox if you apply these to the body tag:

    body { min-height: 100vh; display: flex; justify-content: center; align-items: center; } Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
  • Cynthia•50
    @tina4449
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I feel I have become more familiar with container and card design through practice and can now use 'gap' to set the distance between flex items instead of setting margins individually. Next time, I believe I can think even more about how to handle responsive layouts.

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

    No particular challenges were encountered this time.

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

    I want to know if there's anything I can improve in the current responsive layout. I've only set up two screen sizes, and the visual changes on the screen aren't as smooth as I expected when testing different screen sizes.

    Responsive layout using flex

    #sass/scss
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    hi there! 👋

    I think a good practice would be to organize the style files within the assets directory.

    an example would be:

    /assets / styles style.css

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
  • kirilzab•220
    @kirilzab
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    i'm make this page fast

    What challenges did you encounter, and how did you overcome them?
    What specific areas of your project would you like help with?

    Responsive page using FLEXBox

    #sass/scss
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    hi there! 👋

    You can center your content with Flexbox if you apply these to the body tag:

    body { min-height: 100vh; display: flex; justify-content: center; align-items: center; } Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
  • Emmanuel-Oyewole•10
    @Emmanuel-Oyewole
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Completing my first project in such a short timeframe is exhilarating, and witnessing my solution go live on the internet adds an extra layer of satisfaction.

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

    Centering the QR card and adjusting the font size of the paragraph text proved to be a bit challenging for me.

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

    Some CSS properties still elude me, but I believe with time and practice, I'll grasp them and incorporate them effectively.

    css flex box,html.

    #sass/scss
    1
    P
    Daniel Basilio•420
    @danielbasilio
    Posted about 1 year ago

    hello! 👋

    An efficient way to centralize your container would be to use something like this:

    body { height: 100vh; display: flex; justify-content: center; align-items: center; } I hope this was helpful 🙏

    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