Skip to content
OverviewSolutions
27
Comments
18
Raymond Adutwum Agyei
@alosoft

All comments

  • Marco Bareno•20
    @baremarcoSubmitted over 2 years ago

    How can I improve the mobile design? I couldn't figure out how to implement that part, the designs was the same for desktop and mobile versions.

    If you see any improvement, please feel free to comment, I would really appreciate any feedback

    Solution using css flexbox and Sass preprocessor

    3
    Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @baremarco You've done a greate job with the ui. Here is how you can make html semantic

    • Change the div with the showcase class to a main tag
    • Every html page should at least one h1 tag so change the paragraph to an h1 instead of h2
    1
  • Adam M•550
    @AdamMzkrSubmitted over 2 years ago

    Hi! I submit my next solution. To finish this challenge I use only HTML CSS and vanilla JS. All suggestions to improve this solution are welcome :-)

    FAQ HTML/CSS Flexbox & vanila JS

    1
    Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @AdamMzkr You missed the background image and also this image resources bg-mobile.svg cannot be found on the mobile view

    Marked as helpful
    0
  • Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @TonyHdez-Pi You've done a nice job but there is still room for improvement

    • On mobile, remove the height of the main tag to make the content much scrollable
    main{
    height: unset
}
    • Your box shadow too is not the best, try this
    article{
     0px 0px 0.5rem 0px #0000003b
}
    • The border radius on the bottom of the card does not show, try
    article{
    overflow: hidden
}

    Good luck!

    Marked as helpful
    1
  • Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @JoeDeSantis1 There is a couple of things you need to do

    • You need to remove the border from the submit button
    button{
    border: none;
}

    To fiix your Semantic HTML errors

    • change the root element from div to main tag
    • change the "how did we do" tag to H1
    • the heading tag need to be H2

    I also noticed that when no rating is selected the Thank You screen does not show the selected rating comment. I would be nice if a user is required to select at least one rating

    Nice work!

    0
  • Clytax•120
    @ClytaxSubmitted over 2 years ago

    Here are some questions I have:

    1. did I do responsive design correctly? I added media queries through Sass on individual elements instead of one big media query.

    2. should I have chosen a dynamic width/height for the elements of the rating number?

    3. any feedback is welcome!

    Responsive Rating Card

    3
    Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @Clytax I don't use Sass so I cannot comment on your approach with the media query but I can help make your component responsive when zoomed in and out.

    You can start by removing the height and adding a gap to space the children elements out and also set a width in rem to make the rating element to adjust according to the screen size or zoom level

    .rating{
    width: 30rem;
    height: unset;
    gap: 2rem;
    margin: 1rem;
}
    Marked as helpful
    1
  • Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @afaiz-space I see you've already given the cards align-self property. The last thing you have to do is give the parent-child-two a much bigger height to make the cards align-self property to show

    .parent-child-two{
    height: 18rem;
}

    Nice work!

    Marked as helpful
    0
  • Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @Juan2579 You can add the underline by wrapping the link tag with a div container and an empty div below the link

            <div class="container">
          <a href="#" class="styled_button yellow"> Learn more</a>
          <div class="yellow_line"></div>
        </div>

    add these styles for the yellow_line and red_line

    .red_line,
.yellow_line {
    width: calc(100% + 0.5rem);
    height: 0.3rem;
    border-radius: 1rem;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: -0.4rem;
    background: transparent;
}

    after that you can show the lines on hover with these styles

    .styled_button:hover+.yellow_line {
    background: var(--yellow);
}

.styled_button:hover+.red_line {
    background: var(--soft-red);
}
    Marked as helpful
    0
  • KamRan•370
    @comendrunSubmitted over 2 years ago

    I tried my best to match the styles. Also, it was a little hard for me to update my code on GitHub and also publish it using GitHub pages. so I simply put the link to sandbox from codesandbox. hopefully, it comes out good I would really appreciate any advice or tips

    Interactive rating component with two states and CSS flex-box

    1
    Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @comendrun To host your code on github you gotta make sure the index.html file is in the root of the repository not in a public folder in your case.

    Marked as helpful
    0
  • Matheus•40
    @MatheusTeixeira1Submitted over 2 years ago

    Hey guys, this is one of my first codes integrating html, css and javascript, I would like some tips to optimize it. Also, there is a problem that I didn't know how to solve, if the user selects a score and then selects another, the hover effect of the previous one will disappear. Thanks for your attention.

    Interactive rating component

    1
    Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    You can achieve that with javascript. Checkout my solution repo for the code https://github.com/alosoft/interactive-rating-component-main

    0
  • iago•400
    @iagohenrique2009Submitted over 2 years ago

    Hi frontend Mentor Community!

    this is my first junior challenge, so if you have tip/advice or feedback please tell me!

    Intro DropDown menu with html,css,js

    1
    Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    @iagohenrique2009 You did a good job but there is still some improvements you could make

    1. remove the blue color and underline from the navigation links
    text-decoration: none;
    1. Remove the width size from the text elements and also on the textcenter class on mobile
        width: unset
    1. Wrap and center the client container on mobile
        flex-wrap: wrap;
    justify-content: center;
    Marked as helpful
    1
  • Nabil-Y•150
    @Nabil-YSubmitted over 2 years ago

    Hi everyone,

    I build the todo app with local storage so your theme and todos will be saved, you can even use it if you don't clear your browser cache. Your prefered theme (dark or light) is automatically detected and applied on page load.

    I used a third party library for the drag and drop list (sortable.js). Your changes made by reordering the list are saved in the local storage too!

    It was my first time using TypeScript and Vite, please tell me if there is anything I can improve.

    Thank you !

    Nabil-Y

    Todo App with TS, Sass and Vite

    1
    Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    I love the drag and drop feature. One thing I notice is you cannot mark a todo before you submit. Another is on very small screen sizes (250px) you need to change flex direction

    .todos-list__info{
    flex-direction: column
}

    Nice work!

    1
  • Raymond Adutwum Agyei•800
    @alosoftPosted over 2 years ago

    If is the hover to show effect you need checkout my [solution]https://www.frontendmentor.io/solutions/responsive-intro-section-with-dropdown-with-css-flexbox-and-bem-BJMPlW8Bc). Make sure you checkout my repo ReadMe.md for more information

    0