Skip to content
OverviewSolutions
9
Comments
58
Tux3er
@Tux3er-Isma

All comments

  • Tux3er•780
    @Tux3er-IsmaPosted over 1 year ago

    Hi Joel

    Tux3er has reviewed your code 🐧

    Congrats 🎉, it looks nice, but I will give you some tips for your next project 💡:

    HTML 🟠:

    • Your HTML is fantastic!!! Contiue like that!!!

    CSS 🔵:

    • You can use CSS Grid or CSS Flexbox to center elements. I recommend you CSS Flexbox but both of them are useful too.

    • Also you can put a specific height to the page with px or better with vh

    That's all, have a nice coding ⌨️!!!!

    Marked as helpful
    1
  • Tux3er•780
    @Tux3er-IsmaPosted over 1 year ago

    Hi Renan

    Tux3er has reviewed your code 🐧

    Congrats 🎉, it looks nice, but I will give you some tips for your next project 💡:

    HTML 🦴:

    • In my opinion is not a good practice to add onclick in each element. You can do it with JS with the addEventListener()

    • Also you can put tabindex instead to use it after in css with :focus

    CSS 🎨:

    • As I said before you can use :focus in the numbers. Is like click in JS

    • You can also add a transition to all the hover states

    JS 🟡:

    • The function mark you can get it with only HTML and CSS (as I said before)

    • You have to put a return button to return to the homepage

    That's all, have a nice coding ⌨️!!!!

    Marked as helpful
    1
  • Chirag Lalwani•40
    @chiragglallwaniSubmitted almost 2 years ago

    Was difficult to find the width & height of the card.

    QR Styling

    1
    Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Chirag

    I am Tux3er a frontend developer 🐧 and I have reviewed your code!!!

    It looks nice but I will give you some advice for your next project 💡

    • You're right, it it difficult to get the exact width and height but you can do this by having a design file. Frontend Mentor gives a design file randomly every week.

    • I reccomend you to quit the overflow in your page, like this: body{ overflow: hidden; }

    • It isn't necessary but I recomend you to put a css reset. I think the best is normalize.css 🎨

    That's all, I hope this comment will help you in your next challenge 👍🏻🌟

    Happy Coding Chirag ⌨️🌟

    0
  • Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Youssef !!!

    Congrats, your code looks nice 👍🏻!!!

    But I will give you some tips to improve your coding skills in your next project 💡

    • In the attributes section put the link of your frontend mentor profile in the href attribute. <a href="https://www.frontendmentor.io/profile/yousef-s2" target="_blank">Coded by Youssef</a>

    • It isn't necessary but I recomend you to put some transition in your css hover effects. You can put transition when you are doing hover in the add to cart button.

    • Try to put some margin-top to your img in the responsive design using media-queries

    That's all, and I hope this comment will be helpful in your future projects!!!

    Happy Coding Youness 🖥️⌨️🌟

    Marked as helpful
    0
  • PalHamza•20
    @PalHamzaSubmitted almost 2 years ago

    Can someone check this code's structure for my project. It works, but I am not sure is it right. I would be thankful for any suggestions and advices.

    Code for product preview card component

    1
    Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi PalHamza!!!

    Congrats for completing this challenge and also for your cool code 👍🏻🎉

    *I have reviewed your code and I will give you some tips for your next project 💡:

    • Put an icon in the html head. There is an example <link rel="icon" href="frontendmentor.jpg">

    • I recomend you to put a css reset in your css file. I recomend you this css reset, normalize.css 🎨

    • In css you can put variables! It isn't obligatory but css with variables is awesome. There is some documentation 📖 and some practice.

    • In your img container, inside put an img. Like this: <img src="image.jpg" alt="Perfume">

    • Put some hover effects in your btn (button). You can get this by putting :hover in the button selector

    • I recomend you to put BEM css in your code. This will make your css code easily to read. There is a video 📹 explaining BEM

    • Also put some media-queries in your css code. Video 📹

    I hope this tips will be helpful to you in the future!!! 👍🏻😉

    Happy Coding PalHamza ⌨️🖐🏻

    0
  • Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Lucas!!!

    Congrats completing this challenge, and also for your awseome code 😉🎉!!!

    I will give you some tips for your next project 💡:

    • In your .gitignore file I recomendyou to put the .vscode folder

    • To get a better semantic, you should replace the <div></div> element for a <main></main> tag

    • Try to use a css reset, I recomend you the normalize.css 🎨

    • Also I recomend you to put variables in css. You can put it in :root{} in css. There is some documentation if you want to practice css variables. Documentation 📖

    • Also create a custom Readme.md file. In this file you can put the tecnologies you used to build this project.

    That's all. I hope this comment will be helpful for you in the future 😉👍🏻

    Happy coding ⌨️🖐🏻 Lucas !!!

    Marked as helpful
    2
  • Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi YoengOh!!!

    Congrats completing this challenge 👍🏻🎉

    There are some tips for your next project 💡:

    • If I don't remember the icon was in the img folder that frontend mentor gives to you

    • I recomend you to use css reset. There is an example of a good css reset normalize.css 🎨

    • Try to use cursor: pointer in the button and also transition to get a better user experience

    • In variables you can also put colors. If you want to change for example the color put: color: var(myVar);

    That's all. You have done a good work 😉

    I hope this comment will help you in your next project 👍🏻

    Happy coding YoengOh!!!! ⌨️🖐🏻

    Marked as helpful
    2
  • Christian Novo Sacramento•20
    @cnsacramentoSubmitted almost 2 years ago

    Hi, I'm Christian and this is my solution to this challenge.

    Comments are welcome

    Help:

    I was dealing with the semantic tags section and article and finally used article, I've read a lot about it, but the more I read it the less I understand it. I only know if the content can stand alone, it's an article and a good tip to notice if the content is a section is if you can include it in an outline, but I'm not sure when to use it I also know that a section has to have a header.

    I would like to know if I am doing some bad practice and how I can improve my css and html semantics.

    Product preview card component

    1
    Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Christian!!!

    Congrats completing this challenge and also for having a great code 👍🏻🎉

    I will give you some tips for your next project 💡:

    • Your css reset is good but I recomend you another css reset: normalize.css 🎨

    • When you are creating variables in css don't put it in * selector put it in :root

    • Use some hover effects, like changing the background-color of the button. You can get this by putting the btn class and then you add :hover. Also use cursor: pointer and a transition

    • Don't put two html files only put one index.html🦴

    • Don't forget to quit the comment in the <footer></footer>

    That's all. Your HTML semantic looks great and all your code too!!!👍🏻🌟

    I hope this will be helpful to you in the future 😉

    Happy coding ⌨️🖐🏻!!!

    0
  • Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Levi!!!

    I am Tux3er🐧, and I have reviewed your code. Congrats it looks nice 🎉!!!

    I will give you some tips for your next project and explain you a llitle media queries 🌟:

    • In the button put the cursor as pointer no at grab. We use this when we do hover effects like changing the background-color also use transition to make a better user experience

    • I recomend you a CSS Methodology called BEM css. I will put you the documentation if you like reading and a grat video explaining what is this. Documentation 📖 Video 📹

    • Also if you want to use a css reset you can use the normalize.css 🎨 reset

    • The media queries are css styles to adapt your styles into diferent types of devices. The simple structure is this: @media only screen and (max-width: Xpx){} we are telling that the css styles we put into this block will change when we have X px, or rem, or em or %. For better explanation there is some W3Schools info and a video. W3S ⌨️ Video 📹

    I hope this information will be helpful for you in the future 😉⌨️

    Happy Coding 👍🏻⌨️🖐🏻!!!!

    Marked as helpful
    0
  • Aziz•130
    @AzizJatoiSubmitted almost 2 years ago

    It was really hard for me to center it and didn't know what height and width to give it, and about that white border that was hard too, please point out mistakes, I would really appreciate it, I am a beginner, please check it out.

    qr

    2
    Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Aziz!!!

    All the programmers and developers were beginers, me too 😅, but I will be help you in your next project!!!

    • To center elements you can use a lot of methods. I think the best method is with flexbox. You can use this code to center an element, but you have to put in the parent element: min-height: 100vh display: flex; justify-content: center; align-items: center;

    • You can get the width and the height with a design model but if you don't have anyone you can aproximate your design like the final result.

    • I also see in your code that you don't use BEM methodology. It isn't obligatory but I recomend it a lot for new beginers. There is the documentation 📖 and a video 📹

    Your code doesn't look bad you only need to improve a little. I hope this comment will help you a lot 🖐🏻😉🎉

    0
  • Kapanadze Giorgi•20
    @Kapanadze04Submitted almost 2 years ago

    Summary In this "nft-card" project, a whole "card" class is introduced, where inside there is an image, a title, a paragraph, as well as a sub-class, the location of which is aligned with the help of "flexbox". And finally, I used the "hover" effect.

    NFT-Card

    1
    Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Kapandaze!!!

    I am Tux3er 🐧, a junior frontend dev and I have reviewed your code

    Your code looks nice, congrats 👍🏻🎉

    I will give you some tips for your next project 😉💡

    • Try to use BEM css methodology. There is some documentation if you want to read or if you want to watch a video I also will put you a video. Documentation 📖 Video 📹

    • If you want to use css reset use normalize.css 🎨 file.

    • In your readme.md file 📖 in your Github Repo 😺 put more information about your project like the tecnologyes or something like this.

    • In the img hover states put some cursor: pointer; to get a better user experience.

    • Don't forget to put who did the project at the end of the page.

    • In the responsive mobile put some margin-top at the card. You can do this by using media-queries.

    I hope this comment will help you a lot in the future 🖐🏻🌟⌨️

    Marked as helpful
    0
  • Liam Malby•20
    @liammalbySubmitted almost 2 years ago

    I have combined flex and grid to create this card, however perhaps there is a simpler way? I also feel there is probably a more efficient way to write the CSS, as I have duplicated basically the entire page for the two media queries for the screen sizes.

    Responsive product card using plain CSS and HTML

    1
    Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Liam

    Congrats for completing this challenge and have a nice code 😉🎉

    I will give you some tips for your next challenge 💡:

    • I recomend you to use a css reset like the normalize.css 📖

    • In hover states use cursor: pointer; to get a better user experience. You have to add this in the btn

    You have done it very well for combining grid and flexbox, great job 😉👍🏻

    I hope this tips will help you a little in the future 🖐🏻⌨️

    Marked as helpful
    1