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
OverviewSolutions9Comments59

All comments

  • Tux3er• 760

    @Tux3er-Isma

    Posted

    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• 760

    @Tux3er-Isma

    Posted

    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

    @chiragglallwani

    Submitted

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

    QR Styling

    1

    Tux3er• 760

    @Tux3er-Isma

    Posted

    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• 760

    @Tux3er-Isma

    Posted

    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

    @PalHamza

    Submitted

    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• 760

    @Tux3er-Isma

    Posted

    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• 760

    @Tux3er-Isma

    Posted

    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• 760

    @Tux3er-Isma

    Posted

    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

    @cnsacramento

    Submitted

    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• 760

    @Tux3er-Isma

    Posted

    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• 760

    @Tux3er-Isma

    Posted

    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

    @AzizJatoi

    Submitted

    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• 760

    @Tux3er-Isma

    Posted

    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

    @Kapanadze04

    Submitted

    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• 760

    @Tux3er-Isma

    Posted

    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

    @liammalby

    Submitted

    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• 760

    @Tux3er-Isma

    Posted

    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
  • Peter• 270

    @Peteboss

    Submitted

    No questions. Coding first from the mobile state really is preferable. It makes the responsiveness transition to desktop easier.

    QR Code layout

    1

    Tux3er• 760

    @Tux3er-Isma

    Posted

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

    2
  • Tux3er• 760

    @Tux3er-Isma

    Posted

    Hi Christian!!!

    I have nothing to say, your project is amazing 👍🏻🎉

    I love the animations and your code looks very well 😉

    Well done bro 🐧👍🏻⌨️

    1
  • Tux3er• 760

    @Tux3er-Isma

    Posted

    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 🖐🏻🌟!!!!

    0
  • Rohit-R-Khawale• 40

    @Rohit-R-Khawale

    Submitted

    I tried to make the page as close to the given sample, but if there are any improvements that I can make then do drop your feedback.

    Also if there are any suggestions on how to improve code writing practices and any alternative methods to do things then do drop them in the feedback, it would be of great help.....

    All Feedbacks are accepted.... Thank You

    NFT preview card component (Responsive)

    1

    Tux3er• 760

    @Tux3er-Isma

    Posted

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

    1
  • Alex Garcia 🦝 Garcialexco• 440

    @garcialexco

    Submitted

    Hello! This is my solution for this challenge. 🚀

    Help:

    This is my second project built using Sass and BEM, any improvements on technique are welcome! I had a little trouble with vertically centering the icons with text below the description. This was a very fun project, I learned a lot!

    Built Using:

    Sass, BEM, Responsive Design

    Any ideas on how to improve in any way are greatly appreciated! Much thanks. 😊

    NFT Preview Card Component

    #bem#sass/scss

    1

    Tux3er• 760

    @Tux3er-Isma

    Posted

    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

    1
  • Tux3er• 760

    @Tux3er-Isma

    Posted

    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

    0
  • Heza• 20

    @ChoiHeza

    Submitted

    Second frontend mentor project, this one did not take that long to build, but as always I had fun building it, feedback would be greatly appreciated on how I could of done something better. Thank you! :)

    QR-Code Component (HTML & CSS)

    3

    Tux3er• 760

    @Tux3er-Isma

    Posted

    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

    2
  • Héctor Figuereo• 370

    @hector535

    Submitted

    Question

    Is using an article tag without a heading element inside of it acceptable?

    Built with

    • HTML
    • SASS
    • BEM
    • Flexbox
    • CSS Grid

    I'm always open to suggestions on how to improve the accessibility of my solutions.

    Thank you. 😊

    Product preview card component (HTML + SASS)

    #accessibility#sass/scss#bem

    1

    Tux3er• 760

    @Tux3er-Isma

    Posted

    Hi Héctor

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

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

    • In the responsive mobile you can add margin-top to the card and quit the position fixed in the author information and put it down of the card

    • To get your hover states more cool I recomend you to put transition. This is the documentation, 📖

    You have done it perfect, congrats 🐧👍🏻😉

    Have a nice coding ⌨️🌟

    Marked as helpful

    0
  • Tanmay Ravane• 10

    @codeminex

    Submitted

    1. What did you find difficult while building the project?
    2. Which areas of your code are you unsure of?

    => Areas where I felt difficult to build is to make the website view same as on desktop as well as mobile. Still I am not able to figure out how to get the desired look on Mobile devices.

    QR code landing page using HTML and CSS

    3

    Tux3er• 760

    @Tux3er-Isma

    Posted

    Hi Tanmay!!!

    Congrats completing this challenge 👍🏻

    When I was starting I found also difficult to pass from desktop to mobile

    • In css there is a property called media-querie. The structure is like this: @media only screen and (max-width: Xpx){}.`

    In this case we are using 375px because is a mobile. This is the documentation with exercices, documentation 📖

    • Don't use position to center elements. There is a easy way to center elements nowadays widt css flexbox: .main_body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; video about flexbox 📹

    You have done it very well, congrats 😉👍🏻🎉

    I hope this comment will help you in the future building awesome projects 🌟

    1
  • Tux3er• 760

    @Tux3er-Isma

    Posted

    Hi Mukkamalla!!!

    I am Tux3er, a junior frontend dev 🐧⌨️

    Congrats 🎉, you have done it very well to be your first challenge

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

    • In the HTML don't put a lot of space between tag and tag. That makes your code easily to read

    • If you are using font awesome don't forget to put the tag in the <head></head>. Create a new kit and then copy and paste the code. Or directly put the img on the img folder in the downloader of the frontend mentor

    • Put a margin-top in the container when you are using media-queries in this project.

    • Also put who did the project <p>Project by <a href="https://frontendmentor.io">Frontend Mentor</a>. Coded by <a href="your-github-webste.com"></a></p>

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

    That's all, your code looks nice and continue like this 🎉🖐🏻😉⌨️

    Marked as helpful

    2
  • Tux3er• 760

    @Tux3er-Isma

    Posted

    Hi Sameer!!!

    Wow you code looks genial, congrats 🎉👍🏻

    But I have some tips for your next project 💡:

    • In JS try to use camelCase. It is easy to use: the first word you put in in minuscule and the new word you put the first letter in capital letter const socialMedia helping web page 😉

    • Try to use BEM Methodology 📖🎨 to get easily to elements documentation 📖

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

    Tux3er wishe you a nice coding 🐧⌨️😉

    Marked as helpful

    0
  • Tux3er• 760

    @Tux3er-Isma

    Posted

    Hi Isabella

    Congrats, your code is nice and you have completed this challenge🎉

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

    • If you want to center elements use min-height: 100vh; display: flex; justify-content: center; align-items: center in your main.

    • I recomend to you to put box-sizing: border-box;

    • Also put a normalize.css file noramlize.css 🎨

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

    That's all, have a nice coding ⌨️👍🏻😉

    0