Skip to content
OverviewSolutions
47
Comments
82
P
Kamran Kiani
@kaamiik

All comments

  • Kamran Kiani•1,280
    @kaamiikPosted 6 days ago

    Hi Wendy. Nice Job. I really liked your animations. and Your footer style is nice too.

    0
  • Lisa Allen•530
    @CrypticMangoSubmitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that i added the hover state to the paragraphs.

    What specific areas of your project would you like help with?

    Let me know if there is a better way to complete this challenge. All tips are welcome! :D

    Social Links Profile Main - Vanilla CSS HTML

    1
    Kamran Kiani•1,280
    @kaamiikPosted 8 days ago

    Hi, congrats on completing this challenge! I noticed a few points I'd like to mention. Before that, I suggest choosing challenges based on the Frontend Mentor learning path rather than selecting them randomly. It's better to start with basic challenges and then progress to junior, intermediate, and advanced levels.

    • First of all, your Github link is broken or wrong. I can not see your code inside the Github.
    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    • Adding padding or margin inside your body selector is not true I think and CSS on your body should contain more general CSS properties like font-size, min-height and ...
    • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size. Try to use more rem for padding and margin too.
    • Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.
    • Only the h1 should be in the html and as I see the h2 and h3 should be a p tag. The address and description are not headings.
    • Elements that have hover effect are interactive. So because you have hover effects for your h1 then It needs to be a or button. Now you have to choose between a and button. If the element take you to a new page It should be an a tag and If do an action like submit a form or add to cart then It should be a button. Here the social links are interactive and they should be an a tag because They take you to a new page. and they are like a list of link items so you have to wrap them inside the ul with li for each link.
    Marked as helpful
    0
  • Kamran Kiani•1,280
    @kaamiikPosted 11 days ago

    Hi. Congrats for doing this challenge. I wanna mention some notes in your code:

    • In your HTML, I see your first element is a div but at the end you finished with a main. I think Its more clean that put your container class inside the main element.
    • Why using .tab as a span tag? You can use p if you see this a text or If you see this a tag that takes you to a new page, use an a tag.
    • Decorative images do not need an alt message and inside your img tag the alt attribute should be empty like alt="". It seems that the top image is decorative here.
    • Elements that have hover effect are interactive. So because you have hover effects for your h1 then It needs to be a or button. Now you have too choose between a and button. If the element take you to a new page It should be an a tag and If do an action like submit a form or add to cart then It should be a button. In your challenge you have h1 and inside the h1 you have to wrap it into a interactive element too.
    • Avatar images do not need alt message.
    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.
    • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.
    • There is no need to use fixed positioning for your footer. It cause some problems in your page. and There is no need here to use it.
    0
  • Vikas•130
    @gitVikas898Submitted 16 days ago
    What are you most proud of, and what would you do differently next time?

    Finally I was able to make a responsive design for both mobile and desktop , I am proud that I am getting better at this slowly

    What challenges did you encounter, and how did you overcome them?

    I cant understand my design on desktop looks good on browsers like mozila, brave but it stretches on chrome and edge

    What specific areas of your project would you like help with?

    Maybe practice more myself building layouts

    blog-preview-card-main

    1
    Kamran Kiani•1,280
    @kaamiikPosted 15 days ago

    Hi. Congrats for doing this challenge. I noticed some points I wanna mention:

    • max-width should be in rem unit not px.
    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    • Elements that have hover effect are interactive. So because you have hover effects for your h1 then It needs to be a or button. Now you have to choose between a and button. If the element take you to a new page It should be an a tag and If do an action like submit a form or add to cart then It should be a button. In your challenge you have h1 and inside the h1 you have to wrap it into a interactive element too.
    Marked as helpful
    1
  • Kamran Kiani•1,280
    @kaamiikPosted 16 days ago

    Congrats for doing this challenge. Just wanna say that:

    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

    • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

    Marked as helpful
    0
  • Michelle Chong•120
    @mdchongSubmitted 18 days ago
    What are you most proud of, and what would you do differently next time?

    This is my first time using node.js/npm and SCSS! I am proud to have learned how to install the SCSS through the npm. My time for completion has noticeably decreased compared to my first project. I constantly want to engage in using the SCSS for multiple projects and get a thorough understanding of it.

    What challenges did you encounter, and how did you overcome them?

    The most challenging was when downloading the SCSS through npm. I really spent most of my time getting through this process. I also figured out that the icon provided was hard to implement to my page, ultimately figuring out another way to make it work.

    What specific areas of your project would you like help with?

    The HTML structure and how to change the color of the icon!

    Product Preview Card Component

    2
    Kamran Kiani•1,280
    @kaamiikPosted 18 days ago

    Hi. Congratulation for doing this challenge. I really liked it. Your HTML and CSS code is great. Specially I liked using hgroup in your code. Knowing where to use html semantic tags is very valuable. About the scss, Kevin Powell has a good template for scss in his github. One with Vite and one with the Astro. You can use them too.

    Fantastic job! Keep up the great work and keep pushing forward

    Marked as helpful
    1
  • Kamran Kiani•1,280
    @kaamiikPosted 19 days ago

    Hi. Congratulation for doing this challenge. Your HTML is brief and clean. I have some notes on your code I wanna mention:

    • You can check most of the pages and see they have a structure like this inside the body:
    <body>
  <header>...<header>
  <main>...<main>
  <footer>...<footer>
</body>

    • Based on your design you may have header and footer or not. But You should have a main element inside your page. So after your body always wrap all of your code inside a main element. In this design you do not need header but yourfooter is your .attribution.

    • Each Page should have a h1 heading. In this challenge though, Because in a real scenario the QR code is part of another page It does not need to have h1 and you can use a h2.

    • In most of the times there is no need to add br tag to wrap your text to the next line. Just use a max-width for your container and also add a proper padding to your container too. Then let the browser decide when wrap the text.

    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

    • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size. And there is no need for calc.

    • Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens. And also no need for media query!

    • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.

    • Add your text-align: center; to the body because all of your text has the center alignment.

    1
  • Kamran Kiani•1,280
    @kaamiikPosted 19 days ago

    Hi. Congrats for doing this challenge. This is a really tough challenge in terms of the html structure to build a responsive pop up for both desktop and mobile users. I noticed some few notes that I think It's better to mention:

    • It's really important your page be responsive at minimum 320px. As I see, there is an overflow on the 320px to 335px for the share links and the share button on mobile view. I think If your div is a flex, then you can use flex-wrap to solve it. Or maybe another solution...

    • Another issue is that your social links are not just image. They are links that should be clickable (a tags) and need to have hover and focus on them.

    1
  • khalagai•390
    @khalagaiSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of setting the slider arrows in the different positions in mobile and desktop versions. I jumped straight into the challenge without planning my design. This set me back a day or two. Next time I will get the design mock-up first before starting.

    What challenges did you encounter, and how did you overcome them?

    Getting the slider buttons in place in the different screen versions. I used display: grid which allowed for flexibility.

    What specific areas of your project would you like help with?
    • How can I get the font sizes right in the different screen sizes?
    • I would also appreciate advise on how I can improve the code.

    Room Homepage Master

    1
    Kamran Kiani•1,280
    @kaamiikPosted 20 days ago

    Hi. Congrats for doing this challenge. I noticed some points I wanna mention:

    • You can check most of the pages and see they have a structure like this insid the body:
    <body>
  <header>...<header>
  <main>...<main>
  <footer>...<footer>
</body>
    • Based on your design you may have header and footer or not. But You should have a main element inside your page. So after your body always wrap all of your code inside a main element.
    • Decorative images do not need an alt message and inside your img tag the alt attribute should be empty like alt="".
    • Instead of using two img inside your html, you can use picture element that is more robust and change your image based on screen size. It also reduces the load time. You can read more about picture here inside MDN
    • I think there is no need to use br tag here. In case the width of the text become large, try to use max-width instead. It's more robust.
    • Each Page should have One h1 heading.
    Marked as helpful
    0
  • Kamran Kiani•1,280
    @kaamiikPosted 20 days ago

    Hi. Congrats for doing this challenge.

    I saw in your html you have used main and footer and It is so good. Your base structure is good but I think there is no need for article and section here. This is a card as I see. I think It's better using a div for your card container and the parts that is need use a div for wrap some group of elements to use for display: flex; or other things. But remember using div as needed. Here there is no need to wrap your image in a section. Or there is no need to wrap a single p tag in a section. Also for your link items It's better to use ul with li for each link.

    On your CSS:

    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.
    • width: 384px; is wrong. Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.
    • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.
    • There is no need using position: relative; for the body and also absolute positioning for your footer. I didn't understand why you used it.
    Marked as helpful
    0
  • wrinklytech•10
    @WrinklytechSubmitted 24 days ago
    What specific areas of your project would you like help with?

    Any help to improve this greatly appreciated.

    QR Code Challenge

    2
    Kamran Kiani•1,280
    @kaamiikPosted 24 days ago

    Hi. Congrats.

    • Your HTML structure is good. You have a main element in your html that is good. and You didn't create extra ‍div‍‍s. But this is not a page and you don't need h1 here. h1 is like a title of your page. Use h2 instead.
    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size. Also put your min-height inside the body.
    • Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here in your .container because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.
    • For your img you can use width and height but in this challenge there is no need. You just need max-width: 100%; for your image. If you add a proper CSS reset to your style, then this is used for img.
    • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.
    Marked as helpful
    1
  • Tushar Kaundal•120
    @TusharKaundalSubmitted 26 days ago
    What are you most proud of, and what would you do differently next time?

    Able to understand the concept of responsive image and will try design layout more responsive

    What challenges did you encounter, and how did you overcome them?

    showing different images to 2 different view port and to do that learned about scrset and sizes , pciture tag

    What specific areas of your project would you like help with?

    Need help regarding how to responsively design these kind of design in a better way , and how can i use scrset , sizes and picture tag for better responsive design

    Responsive Product Card Component using CSS

    2
    Kamran Kiani•1,280
    @kaamiikPosted 25 days ago

    Hi. Congrats for doing this challenge. I noticed some points I wanna mention:

    • In your picture use min-width in rem instead of px.
    • There should be only one h1 in your page because It is your page title and we only have one title. and the price I think is not a heading and you can simply use p tag for price number.
    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.
    • Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.
    Marked as helpful
    1