Skip to content
OverviewSolutions
31
Comments
8
P
Esteban
@evertzner

All comments

  • KoalaChang•70
    @KoalaChangSubmitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    I use Tailwind CSS in this project for the first time, though I'm still not familiar with the workflow and the way to use it, I can tell that it would be easier to build consistent styles and layouts with Tailwind.

    I would like to combine Tailwind and React, and see how components can work efficiently with these two frameworks.

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

    The transformation from original CSS properties to Tailwind CSS needs some time to get familiar with.

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

    I would like to know the workflow of Tailwind with React, how do people start the project? Do they start with the html tags and then separate it into different components, or just simply start from the top of the webpage and make the components once encounter them?

    Mobile-first design with Tailwind CSS

    1
    Esteban•670
    @evertznerPosted 11 days ago

    Hi, nice job!

    What i do with tailwind/react projects is that first i create the components that I know I will use, let's say Main.tsx, Card.tsx and Button.tsx. Then inside each component I write the html and dummy content that I need (for example, using Lorem Ipsum text). Then after having all the content I need, I start with the tailwind implementation. Most of the times, I go from general to specific, in this case I do first Main then Card and last Button. After finish this or in the meantime I also take a look if there is something that can be converted into another component. For example, let's say that inside Card I have a list of items, well in that case I move out the list and create a component call Items.

    Hope it helps somehow

    Marked as helpful
    0
  • Ankur Patel•20
    @apatel544Submitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of my use of div tags along with knowing the different CSS styles to utilize on this project! Something I would like to do next time is minimize a lot of the code.

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

    I faced challenges when it came to specificity. I wasn't able to implement some of the styling used because they were being overridden by other styles. Overcoming this took some debugging that allowed me to find that I had issues with some of the style's syntax and plugging in dummy colors to show which colors were being overridden and which were working.

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

    I feel like I have done this basic project to the best I could, but learning is always a must in any scenario. How can I improve the positioning of the component as a whole? I set margin: auto; to have the whole card component centered but I feel there may be more responsive methods to implement this. Any advice is appreciated!

    QR Code Component with only HTML and CSS

    1
    Esteban•670
    @evertznerPosted 11 days ago

    Hi, nice job!

    To center the whole component, you can do several things. I will show you 2 options

    1. Using flex
    body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
    1. Using grid
    body {
  display: grid;
  palce-content: center;
  height: 100vh;
}
    Marked as helpful
    0
  • SashaYerokhov•140
    @SashaYerokhovSubmitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    The model helped to understand the CSS Grid

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

    Cannot apply minmax() because the width is different on desktop and mobile

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

    Grid mobile version

    Testimonials grid section using CSS Grid

    1
    Esteban•670
    @evertznerPosted 11 days ago

    Hi, nice job!!

    If you like to get more help with grid on mobile, you can take a look at my 2 codepens Grid Column Flow and Grid dense

    0
  • Tomislav Šuto•210
    @RetroApeSubmitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    I am just proud I managed to match the design :)

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

    There were some little challenges like working with Git, nothing to write home about.

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

    Although the project was simple to do, centering an element vertically and horizontally seems to be more complicated than it should. Using flex is possible (I think), but I decided to use positioning:

    .container {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    I understand the transform property, but I don't understand what is -ms-transform property supposed to be and what does it do. If anyone has an answer or has a link with a good explanation, I am happy to devour it :)

    Centering QR code component with -ms-transform

    2
    Esteban•670
    @evertznerPosted 11 days ago

    Hi, nice job!

    The -ms- is a vendor prefix, this allows developers to change browser configurations to test upcoming features. Browsers now add experimental features behind user-controlled flags or preferences. Flags can be added for smaller specifications enabling reaching a stable state much more quickly.

    Those prefixes are:

    • -webkit- (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers including Firefox for iOS; basically, any WebKit or Chromium-based browser)
    • -moz- (Firefox)
    • -o- (old pre-WebKit versions of Opera)
    • -ms- (Internet Explorer and Microsoft Edge, before Chromium)

    In my opinion, you should try to strengthen your flex and grid skills. It will let you do incredible things!

    Marked as helpful
    1
  • Esteban•670
    @evertznerPosted over 2 years ago

    Great job! Maybe there are some responsive issues on mobile screen. But you did it great!!

    Nice implementation on your filters, maybe a tip will be to keep status of what you wrote on search field.

    0
  • Esteban•670
    @evertznerPosted over 2 years ago

    Hey, I was taking a look at your solution. And have some points for you to take a look.

    1. Try the countries grid to be more flow with the device size, at 1439px width it collapsed and shows only 1 country.

    2. The solution fails when you click on a country that doesn't have border countries.

    3. Functionality required for the border countries to be clickable is not implemented.

    4. Clicking on the logo should go to the home page, but not change the color theme.

    5. Try to make the filters to be dependant on the other. So If I write a country that is not inside the continent that I select, It won't show anything.

    6. body should keep always the same min-height despite the amount of countries that we filter.

    NOTE: Check the report that is generated in your solution. It shows you that you have a lot of errors and warnings in your html.

    Hope this points help you out on improving your solution!.

    Have a nice weekend!

    Marked as helpful
    0
  • Esteban•670
    @evertznerPosted over 2 years ago

    Wow, awesome job!!! Keep going.

    2
  • Rahimullah•40
    @biqrarSubmitted over 2 years ago

    QR-code card was a challenge for the front-end mentor. I solve it using Bootstrap and custom CSS. you can view and give feedback.

    Responsive QR-code card

    2
    Esteban•670
    @evertznerPosted over 2 years ago

    Hey, I was about to take a look at your solution, but no QR is showing :(

    1