Skip to content
OverviewSolutions
10
Comments
12
Tomasz Zawadzki
@ExpertoMontanero

All comments

  • Adriane Santos•30
    @AdrianeSantosDevSubmitted over 1 year ago

    I completed this challenge after finishing my first Frontend Mentor project, which was really helpful, especially with the tips I received. The trickiest part of this challenge was deselecting the other numbers after selecting one, but a quick search on Google and Stack Overflow helped me find the solutions I needed. I also played around with different elements for the sections and ended up using <span> for the numbers. I'm not entirely sure if it was the optimal choice, but it definitely worked well. If you have any suggestions or alternative approaches, feel free to let me know.

    Rating Component (CSS, HTML)

    1
    Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    The desktop design is simply 1:1, so congratulations :>. Refering to your question, I think it would be better option to make this ''numbers'' buttons as buttons (<button> </button>), but it is a detail. However mobile accesibility is bigger problem. Your design is not responsive. So that you should use some media querries on your design. Try look how your design looks on some mobile devices in dev tools. You can look at my solution Media querries on my profile. I hope that I helped. If you have any questions, go on. Happy coding :>

    Marked as helpful
    0
  • Tommaso Caravaggi•150
    @Tiuty00Submitted over 1 year ago

    I'm very glad to share whit you another finish challenge! I hope you'll like it and I ask you some tips for improve my code! Thank you very much for your time!

    Responsive Credit-Card detail

    1
    Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    Hello, the solution is perfect 1:1. But in my solution I added feature that after 4 numbers ''-'' sign is added automaticly. It would be great further development of this function :

    // Dived values on blocks of 4

    let groups = value.match(/(\d{1,4})/g); // Join group with space in the middle if (groups !== null) { value = groups.join(" "); }

    This modified function is in my solution. LINK:

    https://www.frontendmentor.io/solutions/use-of-jquerry-bootstrap5-semantic-html-css-RyU0qaod7i

    Hope that I helped, maybe not about your solution, beacuse it is perfect and 1:1 to design but this ''-'' sign feature is awesome for me. Happy coding :>

    0
  • Yassine Afaila•540
    @YassineafailaSubmitted over 1 year ago

    Hi guys ,This is my solution for this wonderful challenge , the problem that i had is how to customize the progress slider bar , So if any one know how please share the method with me and thank you :D.

    Interactive pricing component

    1
    Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    Hello ALLLLL good but you haven't implemented slider filling animation so now I am going to help You. For information how to do this you can look at my solution.

    Whole solution repo: https://github.com/ExpertoMontanero/Interactive-pricing-component-FM

    Only slider component for you: https://github.com/ExpertoMontanero/Usefull-ready-to-use-components-by-ME/tree/main/Custom%20Slider

    If u have some questions about code write me on instagram. https://www.instagram.com/t_zawadzkiii/

    Hope I helped you. Have fun coding :>

    0
  • Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    Hello there is no simple method to determine actuall box shadow value of element without seeing a css property of it.

    Overall, good job about the challange. You did it simply 1:1, but there is a problem in very narrow screens like Galaxy Fold example (width:280px). Your design is moving appart. You can prevent it by scaling font size or other elements size. Try clamp() method or simple media querry values. Hope I helped. Have fun coding :>

    Marked as helpful
    2
  • Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    I look at it on chrome so maybe there are some bugs as you said, but you make some bad directioning of this tick images. Github is case sensitive so that you have to be carefull about pathing. I recomend you to use pattern like ../folder/file.sth and it ll prevent this mistakes.

    Another think is that in the design the unfilled part of slider is grey and filled is green, you have not implemented this code. If you want you can look at my code to this challange, how I did it. https://github.com/ExpertoMontanero/Interactive-pricing-component-FM

    The repository of your project is very unclear too. There are a lot uncecessery filles, which makes reviewing code very hard. There comes the advice, make your project structure clean and as simple as possible.

    Hope that I helped. Have a nice day :>

    Marked as helpful
    0
  • Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    Hello, looking at your solution I see that the site is completely not responsive. To deal with responsiveness you should use scaling values like %, vh,vw or media querries.

    Another problem is no error handling on your site, there is no problem in sumbiting blank form or with inappropriate values like letter cvc code or 132124312 month. You can do error handling by creating some conditions for every cell of a form in java script.

    What is more cards on the left should be interactive. That means that everything you input in form should be immediately displayed on the cards.

    I think there is no sense in slider input in card number too, y

    After submiting a form there is a problem with cards display.

    If you want some suggestions how to improve your code to be much more like the design you can look at my code to this challenge.

    Hope that I helped. Have fun coding :>

    https://github.com/ExpertoMontanero/Interactive-card-details-form-FM

    Marked as helpful
    1
  • Maia•60
    @maia-fwSubmitted over 1 year ago

    I was having trouble with the responsiveness part of this project. What are the best ways to make this project responsive? Going from mobile to desktop and vice versa.

    Order-Summary-Component (Using HTML & CSS)

    2
    Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    Creating a responsive design frontend involves implementing various techniques and best practices to ensure your website or application adapts to different screen sizes and devices. Here are some key steps and considerations to help you build a responsive frontend:

    Mobile-First Approach: Start designing and developing your frontend with mobile devices in mind first. This approach ensures that the core functionality and content of your website work well on smaller screens.

    Fluid Grids: Use CSS frameworks like Bootstrap or CSS Grid to create fluid grids that adjust the layout based on screen size. Grid systems allow you to define columns and rows that automatically adjust their width and height proportionally.

    Responsive Images: Optimize your images for different devices and resolutions by using responsive image techniques. You can use CSS media queries and the srcset attribute to serve different image sizes based on the screen size and resolution.

    CSS Media Queries: Utilize CSS media queries to apply different styles based on the screen width or device characteristics. Media queries allow you to define specific CSS rules for different breakpoints, making it easier to create a responsive layout.

    Flexible Typography: Use relative units like percentages, ems, or rems to ensure that your typography scales appropriately across different devices. This allows the text to adapt to various screen sizes, improving readability.

    Flexible Layouts: Avoid using fixed-width elements and use relative units for widths, margins, and paddings. Embrace the concept of fluid layouts, allowing your components and containers to resize and rearrange based on available space.

    CSS Flexbox and Grid: Learn and leverage CSS Flexbox and Grid systems to create flexible and dynamic layouts. These powerful CSS features enable you to build complex and responsive designs with ease.

    Touch-Friendly Interactions: Ensure that your user interface elements and interactive components are designed to be touch-friendly on mobile devices. Use larger touch targets, avoid relying solely on hover interactions, and provide appropriate feedback for touch events.

    Hope I helped :>

    Marked as helpful
    1
  • Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    You forgot about box shadow for main white container. Try this:
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    Hope i helped. :>

    1
  • Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    Your design is dedicated only for your working screen resolution. On my screen elements are out of the main white box and they are in inappropriate position to eachother. This is effect of not placing all childs of main container in the same level of DOM tree. Whereby flex positioning is not working anymore. You need to adapt your design for mobile devices as well using @media property.

    Wish I helped if you want some links for tutorials on materials text me. :>

    0
  • Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    you forgot about rounded borders of main white container, but it s a detail. What is more it is better to just link fonts from google fonts not downloading them manually and adding them to project as new folder. It generates mess and generates some difficulties when you want to change your font e.t.c. Tutorial how to to this: https://www.youtube.com/watch?v=eLY5KSXcQ6c&ab_channel=RosemaryBarker

    Hope that I helped :>

    Marked as helpful
    0
  • Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    use "box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;" property for your container for box-shadow as in example design. It ll make your design much more FRESH. Cheers :>

    Marked as helpful
    0
  • Tomasz Zawadzki•340
    @ExpertoMontaneroPosted over 1 year ago

    As you see on your final solution text is not centered in your container as in example design. Use "text-align: center;" not "text-align:justify" property and it will fix it all. You forgot to change the bold text font color and height of the box differ from example design. So that change container-qr height for maybe 550 px or sth. Do not forget that you can give <h3> and <p> classes like for e.x "<p class="sub-text">". Do not use h3 when you have not used h1 and h2 before. Just start your headers from h1 tag and than go through h2, h3,h4 etc. (just cosmetics). Cheers :>

    Marked as helpful
    0