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

All comments

  • Tux3er•780
    @Tux3er-Isma

    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
  • Tux3er•780
    @Tux3er-Isma

    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
  • Tux3er•780
    @Tux3er-Isma

    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 ⌨️🌟

  • Tux3er•780
    @Tux3er-Isma

    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
  • Tux3er•780
    @Tux3er-Isma

    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 ⌨️🖐🏻

  • Tux3er•780
    @Tux3er-Isma

    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
  • Tux3er•780
    @Tux3er-Isma

    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
  • Tux3er•780
    @Tux3er-Isma

    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 ⌨️🖐🏻!!!

  • Tux3er•780
    @Tux3er-Isma

    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
  • Aziz•130
    @AzizJatoi

    qr

    2
    Tux3er•780
    @Tux3er-Isma

    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 🖐🏻😉🎉

  • Tux3er•780
    @Tux3er-Isma

    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
  • Tux3er•780
    @Tux3er-Isma

    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
  • Tux3er•780
    @Tux3er-Isma

    Hi Peter!!!

    I have reviewed your code and looks nice 👍🏻😉🎉

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

    • Put font-family in your text elements to change the typography. Documentation 📖 Video 📹

    • In your text use text-align: center; to put the text in the center

    • In your Github repository 😺put a Readme.md file 📖 to share information about the project

    • Don't forget to put who did the project at the end of the page. You can use the <footer></footer> tag

    I hope this will be hapeful for you 🌟

    Have a nice coding ⌨️😉🖐🏻

  • Tux3er•780
    @Tux3er-Isma

    Hi Caio!!!

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

    It looks nice, congrats 🎉😉

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

    • Don't forget to put cursor: pointer; in all the hover states to get a better user experience

    • Your reset looks good, but I will recomend you another reset css if you want to change it. normalize.css 📖

    • Don't forget to put a Readme.md file 📖 in your Github 😺 repository to share some information about your project.

    • Also don't forget to put who did the project at the bottom of the page. You can put it in the <footer></footer> tag to get a better HTML semantic

    I hope this comment will help you a lot and improve your coding skills ⌨️👍🏻

    Have a nice coding caio 🖐🏻🌟!!!!

  • Tux3er•780
    @Tux3er-Isma

    Hi Rohit!!!

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

    Congrats because it is cool 👍🏻🎉

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

    • In the font-family if you haven't imported the styles from google font this won't work. There is an link example for Outfit font

    • You can also use variables in css. There is a full video and the documentation explaning variables in css. Documentation 📖 Video 📹

    • You can also use the BEM methodology to make your code easy to read. Documentation 📖 Video 📹

    • Don't forget to put the Readme.md 📖 file in your Github 😺 repository to put information about your project

    • Don't forget to put the hover states in your page. You can do this using :hover in the element.

    I hope this will help you a lot 😉🌟

    Continue coding like a pro 🖐🏻🐧👍🏻⌨️

  • Tux3er•780
    @Tux3er-Isma

    Hi Garcielexo!!!

    Congrats for completing this challenge, it looks awesome 👍🏻🎉

    I have reviewed your code and I will give you some tips 💡:

    • In hover states try to use cursor: pointer; to get a better user experience.

    • I think you forget to put the hover states in the img. You can do this adding a new <div class="img-hover-state"></div>. Then you put .img-hover-state{ background-color: var(--the-background-color); opacity: 0; and finally you put an animation with ```@keyframes puttin the opacity in 1.

    • You can also use transition to get cooler hover states.

    • If your are using reset states, I recomend you the normalize.css 📖.

    • An advatage of SCSS is that you can put child into a parent and don't do it separated the parent element. I recomend you this video 📹.

    • The best way to center elements is with css Flexbox. min-height: 100vh; display: flex; justify-content: center; align-items: center;

    That's all, I hope this comment will help you in the future!!!

    You do it very well so continue coding 😉⌨️

    Marked as helpful
  • Tux3er•780
    @Tux3er-Isma

    Hi OD!!!

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

    And you have done it very well 🎉

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

    • Use some transition to hover states to get more cool efects

    • Also use cursor-pointer in hover elements to get better user experience

    • In CSS you can use variables and it better than comment them (I think). There is an example of variables: In the top of your file rite :root{ --my-color: #0f0; } . If you want to use this variable in an element put: .my-element{ color: var(--my-color); }. There is the documentation 📖.

    I hope this comment will help you in your next challenge 😉

    And don't forget to continue coding ⌨️🌟

    Marked as helpful
  • Tux3er•780
    @Tux3er-Isma

    Hi Heza!!!

    Congrats for completing this challenge, you have done it very well 👍🏻🎉

    I have reviewed your code and there are some tips for youe next project 💡:

    • Your reset CSS is good but I recomend you another that I think is better. normalize.css 📖

    For being your second challenge I am very suprised, you have done it fantastic 👍🏻🎉

    I hope this comment will help you in your next challenge or project 😉

    And don't forget to continue coding ⌨️👍🏻🖐🏻

    Marked as helpful