Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions35Comments144

All comments

  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi . I noticed this was your first challenge. I want to start by saying great work indeed . I will share with you this video link which will nsurely help you on how to submit your solution https://youtu.be/QOIo_47FujE

    0
  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    I want to help you by

    changing the background image and having hover efferct by setting new properties in your CSS file

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live l ink here >>

    https://youtube.com/live/32h0DwiaFA8?feature=share

    0
  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi lets center the solution vertically at the center add this property

    ..qr-card{margin-top: 5%}

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live l ink here >>

    https://youtube.com/live/32h0DwiaFA8?feature=share

    Marked as helpful

    0
  • Clea Carty• 20

    @CNash23

    Submitted

    This is my second challenge. I notice the challenge asked to show the active and hover states so I am curious about how exactly to accomplish this.

    I tried some code for the hover state but couldn't get it to work. And I'm just beginning to learn javascript so I am open to advice on that as well. Thank you in advance.

    HTML and CSS grid

    3

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    HI Clea Carty

    to have hover effect you need to set your code in CSS file to

    .button:hover{background-color : var(--selectedcolorcode)}

    If you find tihis difficult let me know and I can do youtube video or livestream for your editing your code

    Marked as helpful

    1
  • Pablo Santiago Rodriguez Cantillo• 50

    @SantiagoRcp

    Submitted

    What did you find difficult while building the project? Which areas of your code are you unsure of? Do you have any questions about best practices?

    Tarjeta Qr

    2

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    welldone I do have one suggestion which I want you to consider is to put some border radius properties on your image

    if you find this difficult to do let me know and I can do youtube video for you editing your code

    0
  • Karim• 10

    @KarimSalah26

    Submitted

    -It's a simple project. -I'm sure it works. But I think responsive parts could be better.

    • If there is a best practice available, Sure I'd like to check it.

    Display flex, and media query

    2

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi.

    I do have one extra suggestion to make your solution look great by matching the expectations of the challenge

    lets set the background ccolor of the body to to the CSS code background-color: hsl(212, 45%, 89%);

    If this difficult fior you let let me know and I can do a video tutorial for you

    Marked as helpful

    1
  • Ernie Hernandez• 10

    @detanaded

    Submitted

    Hello! While I wasn't sure about adding in the original copy that was included in the files, I ended up moving them into a footer. My issue I came across with the footer was how to position it on the page. In this case I used position: absolute and bottom: 1px. When viewing this in dev tools mobile it looks great, however viewing the live site on my iPhone 13 the footer overlapped the container. What would be the best way to go about position a footer and ensuring its responsive? I'd like to not rely on Chrome dev tools

    CSS Flexbox

    2

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi Ernie Hernande. well done that was good work for your first submission project I do want you to consider removing duplicate text found on your footer.

    0
  • Maiphan• 50

    @Maipenrai23

    Submitted

    1. The difficult point is responsive design while building the project responsive is the most difficult for me
    2. For the unsure code is the responsive part
    3. For questions I haven't yet, but I am really happy to welcome the trips or some suggestions or comments from experts or anyone, I will bring them to develop my skill, thank

    Product-overview-card-component

    2

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi Maiphan

    your solution looks very great . I liked everything especially the mobile responsiveness. I would like you to consider adding hover effect which changes the background color of the button when I hover through

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live l ink here >> v https://youtube.com/live/L6WTd7HRTMM?feature=share

    0
  • Fabio F.• 50

    @fabalvesfr

    Submitted

    Hello everybody,

    First of all thank you for taking your time to review my solution.

    So, I did not know how to round the image edges. I tried to add the "border-radius" image property, but I didn't seem to work.

    Plus my image do not seem to be neither vertically, nor horizontally centered, even though I've written CSS code to make it happen..

    Thank you!

    My first desktop solution using traditional box model

    3

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi Fabio F.

    I noticed you requested feedback on how to center you soution at the center of the page , here are suggestion . inside your CSS file set the properties of the id "card" to

    #card { width: 50%; margin: auto; height: 550px; /* border: 2px solid black; */ box-shadow: 5px 4px 15px -2px #2E2E2E; border-radius: 10px; overflow: hidden; background-color: hsl(0, 0%, 100%); position: relative; top: 50%; transform: translate(0, -50%); }

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live l ink here >> v https://youtube.com/live/L6WTd7HRTMM?feature=share

    0
  • Chamod Perera• 140

    @ChamodJ

    Submitted

    I want to know how to align image and text inside the button. I tried few things but it didn't work.

    Product Review Card

    2

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    Hi

    I read your feedback request I do know that by simply ,making use of div that will wrap all the contents you want to align will be helpful

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    Marked as helpful

    0
  • Taruna• 305

    @Tiyana19

    Submitted

    Please Provide your feedback!!! And tell me where I can improve my coding Skills... I usually struggle with my image's width and height property, if you guys can give me some suggestion, that would be a big help. Thank you

    Product card preview with Flex property of CSS

    4

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    Hi Tinker

    Well done for the work you did on this challenge. I do have on suggesting your text is too close to the image . try to push the text away away from image by making use of padding and left properties .

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    Marked as helpful

    1
  • António Lobo• 40

    @awolf23

    Submitted

    Okay, my second project. I had some difficulties, especially with the gaps in the "card" section. I know the button is not great, the svg is not centered along with the "Add to Cart". Any tips on that are welcome, as well as other tips in general! Cheers!

    Product Preview Card Component

    1

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi AWOLF23 your solution is not mobile responsive this can be solved by making use of media queries and flexbox properties

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    Marked as helpful

    0
  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi @MRUFKA755 I have some improvements which i want you to consider first the hover effect color change did not match to the expectations of the design . This can be corrected by simply changing the color code. secondly your solution is not mobile responsive this can be solved by making use of media queries and flexbox properties

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    1
  • Ohsand• 70

    @ohsand

    Submitted

    My css for the summary elements with the icons isn't very pretty, I had to give each an individual id to apply correct colors, any tips on a more efficient way to get the same result would me much appreciated!

    Results summary page

    3

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi Ohsand

    this was great work from you. Now I want to work on the hover effect when i hover through the button referred here

    <button id="continueButton">Continue</button>

    We can reduce the opacity on hover to make the solution match the expectations of the design . Also I want to improve on mobile view to reduce the with of "main" class so that it does not take up the whole page

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself live link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    Marked as helpful

    0
  • Mishael Joseph• 180

    @Mishael-Joe

    Submitted

    Hello, I'm Mishael Joe by name. This was a fantastic project to work on (it was actually easy tho). But, I'm not so sure if I got the media query right, please can someone check it for me? Project link

    QR code component

    3

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi Joe this was great work from you since I also noticed this was your first project. I would like you to work on the background color so as to match better with the design expectations.

    If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

    0
  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    Hi Travis

    This was very good work I would like us to work on the all the four corners of the the 3 columns

    I noticed that border-radius applies to all corners in all view for example on "column-1" desktop view the top-right-radius and bottom-right-radius should be removed

    Also noticed that border-radius applies to all corners in all view for example on "column-2" desktop view the should be removed

    For the desktop view on column-3 top-left-border-radius and bottom-left-border-radius should be removed

    If you find this a challenge to resolve let me know and I could do a YouTube feedback video editing your project code

    Marked as helpful

    0
  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    Hi Abdulquddus

    Well-done for the work the solution looks okay on desktop view .Now we need to work on the code and improve on mobile responsive ness especially on the footer using media queries for example

    @media screen and (max-width:600px){}

    this will tell the browser how to display the content on smaller screens

    If you find it difficult to resolve let me on and I can do YouTube video editing your code.

    Marked as helpful

    0
  • Faruk Oluwaseun• 10

    @Seunprof

    Submitted

    Its was quite difficult trying to get the CSS to look just like the original styling. The image seems not to display on the live site.

    Testing

    2

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    Hi Faruk

    Well done for your first attempt challenge . I would like to help you make your challenge better and as close to the solution as position, especially on mobile responsive ness it seems the outlook on mobile view can be made better by the use of media queries.

    If you find it difficult to resolve let me on and I can do YouTube video editing your code.

    0
  • Renardo Pine• 50

    @Pinedevs

    Submitted

    I found it really difficult to align the bottom text (created by..) with the avatar image. In the end, I had to hard code it in. How could I center the text to the center of the image?

    Any tips/methods would be really appreciated.

    NFT preview component using HTML and CSS

    5

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    Hi Renardo

    There are two easy ways to center the text which is use either flexbox or grid framework. In combination of text-align and justify-content properties .Align item center sets the content at the center

    If you find it difficult to resolve let me on and I can do YouTube video editing your code.

    Marked as helpful

    1
  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    I wanted to view you GitHub repository and live URL correctly but i had a challenge . my suggestion I s for you to resubmit your solution .

    Here is a YouTube tutorial that will surely guide you

    https://www.youtube.com/watch?v=BW0FCFV323s&t=63s

    If you find this a challenge to resolve let me know and I could do a YouTube video for your editing your project code

    0
  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    Hi Jose

    Since you are new to this I should start by say well done. I would like you to consider the size of the image which is relatively high. This can be easily done by adjusting the Height properties with the class of "qr-code".

    If you find it difficult to resolve let me on and I can do YouTube video editing your code.

    Marked as helpful

    1
  • alexeira• 60

    @alexeira

    Submitted

    On this occasion I started with the mobile resolution and from now on I think I'm going to start like this.

    But I have the doubt, I think that occupying min-width in the @media is not correct for this case.

    Is it really a good practice to do it this way, or should I correct something?

    Stats preview card

    1

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    Hi alexeira

    Yes you are correct the your solution is by default on ,mobile view on all screen sizes . this can easily be resolved . if you right click on the screen click inspect google chrome will be able to tell you the value for the "min-width" to use for different screen sizes according to your choice If you find this a challenge to resolve let me know and I could do a YouTube video for your editing your project code

    0
  • SamTam• 20

    @SamuelTamunoateli

    Submitted

    Unsure of changing the font size when you hover over the button using JS, how can that be done using CSS?

    Responsive landing page

    #accessibility#itcss#jss#materialize-css#emotion

    1

    IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    HI This is good design from you. I do have on suggestion to make the solution looks good . On the hover effect when i hover over the button the color change can be improved from the current dark color to dark green using the html color codes from this website

    https://htmlcolorcodes.com/

    If you find this a challenge to resolve let me know and I could do a YouTube video for your editing your project code

    0
  • IRVINE MESA• 1,855

    @DrMESAZIM

    Posted

    hi Eren

    you solution looks okay . I do have some suggestions to make it better we need to resolve on its height and width which are too large by default. remember you will also need to edit the height and width for mobile view. take note we have to tell the browser which image to display for different screen sizes

    If you find this a challenge to resolve let me know and I could do a YouTube video for your editing your project code

    0