Skip to content
OverviewSolutions
29
Comments
16
matbac85
@matbac85

All comments

  • Srijan Manandhar•470
    @srijanssSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I learned how to,

    • Pass the text to the custom web components. And this was possible by adding element in the CustomCheckbox component.
    • use CSS pseudo selector :nth-child to show the strength meter bars and apply colors to it. I had some idea about passing number to nth-child which selects the corresponding child of an element. However, the use of :nth-child(-n + 2) was new to me, and it was really helpful for this case.
    • set internal states to the custom web components and make use of those pseudo selectors in CSS to apply different styles.
    • use RegExp constructor method to match the generated password and calculate the strength.
    What challenges did you encounter, and how did you overcome them?

    I had some issue making the custom range slider.

    • Adding CSS to the built in input['range'] was too time consuming and it was not looking like in the design. So, I decided to make custom range slider.
    • To make it work I had to handle events like mousedown, mousemove and mouseup. - And based on the width of the slider track and screen position of the thumb, we need to calculate the left or right movement based on how much the thumb was dragged across.
    • And then I calculated the percentage of the movement to set value based on the max attribute of the default range slider.
    • Similar, events listener for touch enabled devices were also done using touch events like touchstart, touchmove and touchend.
    What specific areas of your project would you like help with?

    Open for feedback

    Password generator app using web components

    1
    matbac85•600
    @matbac85Posted 4 months ago

    At first, I had the impression that your app wasn't working because the strength indicator for your password wasn't responding to the user's choices. When I tested your button, I realized that your strength indicator did work, but it was triggered when the button was clicked.

    I approached it differently. I made the user see the strength of the password before it was generated, based on the selected criteria. I didn't investigate the best practice, but intuitively, I find it more useful to see the impact of the selected options on the password's strength before it's generated. What do you think?

    Aside from this question, which I'm curious to hear your opinion on, I think you've done a really good job.

    Your design is great. It's pixel-perfect in Chrome and Firefox. I'm impressed.

    1
  • Bakhtiar•380
    @b4khtiarSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    ..

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

    ..

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

    ..?

    Vue - Tips Calculator

    1
    matbac85•600
    @matbac85Posted 4 months ago

    Hello,

    I noticed a few things that could enhance the user experience of the Tip Calculator App:

    Display Bug When Selecting Tip Percentage: There seems to be a display issue when selecting a tip percentage. It's not updating as expected visually.

    Error Messages Showing Unnecessarily: Error messages are appearing on the "Number of People" input even when it's not interacted with yet.

    Legibility Issue with Disabled Button: The text on the disabled button is currently hard to read due to its color against the background.

    Design Alignment with the Model: The current design doesn't align perfectly with the provided design model. Some elements might need adjustment.

    App Functionality: It seems like there might be an issue with the overall functionality of the app. It's not functioning as intended.

    To improve the app:

    • Check the logic for updating the display when selecting tip percentages.
    • Ensure error messages only appear when the respective inputs have been interacted with.
    • Adjust the button's text color for better readability when disabled.
    • Review the design elements to match the provided model more closely.
    • Double-check the functionality to ensure calculations and resets work seamlessly.
    • Validation in setTip Function: Update the setTip function to properly handle validation and calculation when selecting tip percentages or entering a custom tip.
    • Error Handling: Ensure error messages are shown correctly based on user input and interactions, particularly focusing on the "Bill" and "Number of People" fields.
    • Button Styling: Adjust the disabled button's text color to ensure it's readable against its background.
    Marked as helpful
    1
  • Kamran Kiani•1,170
    @kaamiikSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge was a landing page that has different parts and using media query properly is really important in this challenge.

    What challenges did you encounter, and how did you overcome them?
    • Aligning the images on this page was very tough for me.
    What specific areas of your project would you like help with?

    • First, is my HTML structure correct? Could it be improved? I’d appreciate any suggestions.

    • Regarding the alignment of the phone image, I used negative margins and adjusted visibility with a media query. Is this approach correct?

    • In general, can I write my CSS code more concisely? Which parts should I consider removing?

    • Do you have any recommendations for better coding structure in this challenge?

    • Additionally, for added convenience, I’ve created some functions using Sass mixins. Is this a good practice?

    Workit Landing Page

    1
    matbac85•600
    @matbac85Posted 7 months ago

    It seems to me that you've done a great job! I remember doing this challenge and it was deceptively simple.

    I see in your CSS code that you write your media queries at each stage, I imagine that's because you're thinking about the three screen sizes and how the elements evolve as you go along, but isn't it safer to put your media queries at the very end?

    I've seen that you've liked all my challenges. Thank you for your support!

    Keep up the good work!

    0
  • matbac85•600
    @matbac85Posted 7 months ago

    The dashboard looks vertically off-centre to me. I think that's because you've left the margins in the desktop version.

    I tried changing the data by clicking on "weekly", "daily" and "monthly", but it didn't work. I haven't managed to look at your source code, so I can't really help you unfortunately.

    0
  • Piyush Bhatt•190
    @Piyushb790Submitted 7 months ago
    What challenges did you encounter, and how did you overcome them?

    showing and success page and get back to main-container

    HTML CSS JS

    1
    matbac85•600
    @matbac85Posted 7 months ago

    Hello !

    I see that you haven't followed the design completely. The error message should be next to the label with the same typeface, but in red, and the edge of the input and its background should also be in red.

    In the mobile version, it seems to me that there are extraneous margins. Don't hesitate to use a CSS reset to remove the default settings.

    Your HTML is well coded. I can see that you attach importance to using semantic tags. That's really good.

    I've also just done this challenge and one of my friends, who's an experienced developer, advised me to do this challenge on two HTML pages, one page with the form and another that you arrive at when the form is submitted. The information submitted can be retrieved in the params. Initially, I coded my solution in the same way as you.

    Apart from that, on the whole, it looks great. Well done and all the best for the future.

    Marked as helpful
    1
  • matbac85•600
    @matbac85Posted 7 months ago

    Hello,

    I've just gone through your code and here are my comments and/or advice, bearing in mind that I'm also a beginner.

    General

    • CSS Reset: Consider using a CSS reset or normalization for consistent rendering across browsers.
    • Units: Prefer rem or em units over px for scalability and accessibility.
    • Media Queries: Follow "mobile first" approach, use rem units in media queries.

    Specific CSS Properties

    • height Property: Avoid fixed heights, use percentage or flexible values.
    • width Property: Prefer relative units for better responsiveness.

    CSS Variables

    • Usage: Utilize CSS variables for consistency.

    Recommendations for Improvement

    • Implement CSS reset for consistency.
    • Replace fixed dimensions with relative units.
    • Use rem units in media queries, adopt "mobile first" approach.

    good job and keep up the good work !!

    Marked as helpful
    0
  • Øystein Håberg•10,390
    @Islandstone89Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I managed to do some JavaScript functionality all by myself.

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

    The JS parts were a bit tricky. I didn't figure out how to make a question collapse when another is clicked. And for some reason, the card gets a little bit wider when clicked.

    FAQ Accordion Card

    1
    matbac85•600
    @matbac85Posted 8 months ago

    Hello,

    I think your card gets bigger because its width is influenced by the text's width that appears after the click.

    I don't understand what you mean about the collapsing part. Do you mean to have only one question answered at a time ? If so, you can just use a condition.

    Marked as helpful
    0
  • Yahaya Auwalu•30
    @yauwalu84Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    The approach I used is based on what I have learned so far, which I feel need more improvement with time.

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

    Making the text responsive was the challenge I encountered.

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

    I would love to get more help on responsive design.

    Responsive Blog Preview Card

    1
    matbac85•600
    @matbac85Posted 8 months ago

    Hello,

    I'm a beginner too, but I hope my comments help you.

    HTML:

    • This challenge is a card component. The empty <h1> in your code doesn't seem necessary to me. Opting for the h2 in your component is a good thing.

    • The main container you called <div class="container"> could be an <article>.

    • Take a look at the resources offered by Front End Mentor. One of them talks about how to fill in the "alt" attribute.

    • The little component with the profile photo and name could be an <figure> with an <figcaption>

    CSS:

    • There's a really good CSS reset written by Josh Cormeau. Feel free to take a look.

    • The width property is deprecated. Better to opt for min-width and max-width. To manage the width of my components in these FEM challenges, I do two things: - Either I work with the max-width property (I say that my element can't have a width greater than "x "rem) and I use the clamp() function to define a maximum size in mobile and desktop mode. - Either I put a padding on the container that contains the component (usually a <main> and I set a max-width for the desktop version. To centre my component vertically and horizontally on the page in desktop mode, I use flex.

    • I see that you haven't put the hover effect on your h2. If you want to, you need to change your HTML and make your h2 a link on which you can put a hover effect. Imagine that this component is a summary of a blog article and that to access it, you have to click somewhere. In this case, you need to be able to click on the h2.

    • It's best to avoid px and use em or rem.

    • To make the text responsive, use clamp() and a clamp() generator like this one

    • Your "learning" tag is too wide. To manage its size, use the fit-content value and add the appropriate paddings.

    • For colours, use CSS classes. You set them at :root and then, if you ever want to change them, just change them there and they'll change everywhere. Go and have a look.

    That's all I can see. Well done and keep up the good work!

    0
  • matbac85•600
    @matbac85Posted 8 months ago

    You've done well. Personally, I found the challenge daunting. I'm not going to be able to help you much because it was already very difficult for me.

    I thought your solution for the colour of the footer image was very clever.

    Well done!

    1
  • ParthUON•100
    @ParthUONSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I take pride in completing a recent HTML and CSS challenge using grid layout. For future challenges, I aim to enhance responsiveness and explore more advanced styling techniques.

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

    I'm pleased to share that this time, I encountered no significant challenges. The task went smoothly, and I was able to complete it without any major obstacles.

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

    animation

    Responsive Testimonial Grid

    1
    matbac85•600
    @matbac85Posted 8 months ago

    Good job !

    I'm a beginner so I can't be much help, but here are my comments

    • It's best practice to create a separate file for CSS styles.
    • Instead of a div for the part with the profile image, name and profession, you can use <figure> and <figcaption> elements.
    • Your "alt" attribute lacks information.
    • You forgot the shadow on each card.
    • In your .container, I think it's unnecessary:
            grid-auto-columns: 1fr;
        grid-template-areas: 
        'one'
        'two'
        'three'
        'four'
        'five';
        gap: 2.5rem;```

In mobile view, the cards are one below the other. This is the basic behaviour of the elements. With the code above, you're just repeating what exists by default. You can simply add this information when the screen width is larger and you need to position your cards according to a specific template.

I hope it helps !
    0
  • Ruben•250
    @rugarcia25Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    It is the first time I use grid, it was difficult for me but by searching for information I was able to get it.

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

    Grid. Searching info.

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

    Any feedback is always good.

    Responsive Four Card Feature Section

    1
    matbac85•600
    @matbac85Posted 8 months ago

    Hello !

    Here's my feedback, but I should point out that I'm also learning, so I can't help you much.

    I've also just finished this challenge and found it a bit tricky with the use of grids.

    My solution is quite similar to yours, so I don't have much to say. I've organised my HTML differently (a header with the text above and a main with different sections for the cards). I saw that you'd added articles. I think that's good too.

    What I've noticed, and what I've often been asked to correct, is the height in px and fixed. Apparently, it's better to avoid this. The same goes for element widths. The width property is deprecated.

    Finally, for your media queries, you shouldn't use px, but rem.

    Good job !

    Marked as helpful
    0
  • Timic Ivey•300
    @LwmeekSubmitted over 2 years ago
    What are you most proud of, and what would you do differently next time?

    using flexbox

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

    i dont remember

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

    I don't remember

    Responsive Preview page using flexbox

    1
    matbac85•600
    @matbac85Posted 8 months ago

    Well done! Your component looks great.

    Here are my comments (as always, I should point out that I'm a beginner, so I could be wrong):

    • Like you, I used flex, but for the .container I used grid to transform one column into two when you switch to desktop view.

    • Concerning the width of your .container: It's good to use %. If you want the width of your container to be locked at a certain size when you switch to desktop view, simply set a min-width of 90% and a max-width of 37.7rem (=600px, that's the width of the component in desktop view) and there's no need to set a max-width in your media queries.

    • You're using pixels and it's better to use em or rem. Explanations in the resources on discord.

    0