Skip to content
OverviewSolutions
50
Comments
120
Kamran Kiani
@kaamiik

All comments

  • Kamran Kiani•1,840
    @kaamiikPosted about 21 hours ago
    • You need to re structure your html. You have a form with submit button. Inside your form you have a group of radio buttons. each radio button needs a label too. For group of radio buttons You need to wrap them in a fieldset and the question needs to wrap inside a legend.
    • 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 max-width: 374px; should be in rem unit.
    • 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.
    • Instead of width and height add a padding to your button.
    0
  • P
    David Bonilla•30
    @thegrindnetSubmitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    Overall, I enjoyed the project very much, it was my first Frontend Mentor Challenge. It was my first time using Figma and I enjoyed all the detail the app gives when trying to getting padding, margins, border-radias etc.

    Since this is my first challenge, I tried to pay attention to the details in line-height, font-size and font-weight, as well as the sizes of the divs container. I look forward to more challenges.

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

    The biggest challenge I had was when I used live-server on VS Code to preview and I could see the design on the browser, everything looked fine. However when I uploaded the folder to the GitHub repository and Netlify, the QR Code wouldnt show, just the alt text.

    I used the Frontend Mentor discord to look for a solution as to why the qr code wouldn't show and I found it! Someone else had the same the issue and another member was kind enough to share his knowledge. It turned out I had the img src file path wrong. It was a simple fix, but it took some time to figure out. Thank you #Weldu for the help.

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

    At the moment I would like to develope that developers perspective, or fine tuned eye. After learning HTML and CSS implementing semantic HTML is where I questioned myself on this project. I want that skill to come naturally and I will be working towards that.

    QR Code Challenge - HTML, CSS, Flexbox, git, GitHub

    4
    Kamran Kiani•1,840
    @kaamiikPosted about 22 hours ago
    • Wrap all of your contents except for the footer inside a main tag.

    Your headings should have a order. You do not need h1 here because this card is not a whole page but after h1 is h2 and you should change it to h2.

    • 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.
    • Never limit your width (width: 320px;) and height (height: 499px;) 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.
    Marked as helpful
    0
  • Kamran Kiani•1,840
    @kaamiikPosted about 22 hours ago
    • I think you misunderstood the design. Your whole page has a black background.
    • Your img needs an alt="" of empty. The name is a heading. The address and job info should wrap inside a p. The socials are not button inputs. There are list items that is a ul and li and in each li you have anchor tag.
    • 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.
    • You should not limit your width: 1440px; and height: 960px; and there is no need for it. You did the same mistake for card. 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.
    • Try to code mobile first.
    0
  • Abhay Ghorela•40
    @AbhayGhorelaSubmitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I believed that in this section, I would learn the proper technique to use CSS by storing the colors using css variables and root properties. ''' :root { --white: hsl(0, 0%, 100%); --slate300: hsl(212, 45%, 89%); --slate500: hsl(216, 15%, 48%); --slate900: hsl(218, 44%, 22%); } ''' ''' p { font-size: 15px; color: var(--slate500); font-weight: 400; padding: 0.2rem 0.5rem; } '''

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

    This assignment helps me recollect my CSS abilities. I had a couple months of not using pure CSS.

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

    If someone has a better answer than me, please tell me where I can improve my code. I would like to gain input, which will help me develop my skills.

    QR code component

    3
    Kamran Kiani•1,840
    @kaamiikPosted about 22 hours ago
    • Add a separate file for your CSS styles.
    • Wrap all your contents in a main and the .attribution inside a footer.
    • No need for width: 100%; and max-width: 1440px;. There are pointless.
    • 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 img only needs a max-width: 100%; and nothing else.
    • 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.
    0
  • Kamran Kiani•1,840
    @kaamiikPosted about 22 hours ago

    Hi,

    I noticed some serious problems in your code. I strongly suggest reviewing this code and previous challenges you’ve done before starting a new one. If you do not solve these problems, it is likely you will repeat the same mistakes.

    1. The main tag is a semantic tag that defines the main content of a document. There is no need to add a role attribute inside it.

    2. Decorative images do not need an alt text. The alt attribute in your img tag should be empty like this: alt="". The top icon here is decorative.

    3. The HTML structure is very important in this challenge. Inside your cards, you have a form element that contains a group of radio buttons with a question linked to these radio buttons. The best element for this is a fieldset with a legend inside it. Then, you have a submit button to submit your form.

    4. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have good ones. You can easily find them by searching online.

    5. You do not need to set a height like min-height: 22rem; for your card.

    6. The hover effect should be on interactive elements like links, buttons, or inputs. Also, your button does not have a hover effect.

    7. Add padding to your button instead of setting a height like height: 3rem;.

    0
  • Kamran Kiani•1,840
    @kaamiikPosted 1 day ago

    Hi. This challenge structure is really Important. You need a form exactly but Also you have group of radio buttons. Try to search about fieldset with legend to restructure your html and make a group of radio buttons with it.

    1
  • Kamran Kiani•1,840
    @kaamiikPosted 2 days ago

    Some notes that may improve your code:

    1. Headings are like the title of a page or card. In this card, while the name is a heading, the .location is just an address and should be wrapped inside a p tag.
    1. Use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have good ones. You can search the internet to find them.
    1. Your font-size and max-width should be in rem units, not px. You can read this article about it and why you shouldn't use px as a font size.
    1. 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.
    1. Using width: 300px; and height: 500px; inside your .card is incorrect. Never limit the width and height of a container or element that contains text. 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.
    1. The width: 260px; inside .social-link is unnecessary as well.
    Marked as helpful
    0
  • P
    VirginiaPatrika•50
    @VirginiaPatSubmitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I completed the challenge and now I am getting used to "read" better the figma files. I didn't read all the instructions before starting coding, so I used media queries. Next time I will be more careful.

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

    Any feedback is helpful!

    Responsive layout using CSS flexbox

    2
    Kamran Kiani•1,840
    @kaamiikPosted 3 days ago

    Some notes which may improve your code:

    1. Decorative images do not need an alt message. The alt attribute in your img tag should be empty, like alt="". It seems that the top image is decorative here. Additionally, note that avatar images do not need alt text either.
    1. It is recommended to use a proper CSS reset at the start of your CSS file. Both Andy Bell and Josh Comeau offer excellent CSS resets. You can easily find them by searching on the internet.
    1. Using font-size: 62.5%; is generally considered a bad practice. It was also mentioned in the last challenge. It is better to adopt the habit of considering 1rem as equal to 16px. This will help maintain consistency and readability.
    1. It is advisable to use a unitless value for line-height. This approach ensures better scalability and consistency across different font sizes.
    1. There is no need to use media queries for the max-width of a container in this challenge. You should only have one max-width defined in your CSS.
    Marked as helpful
    0
  • P
    bleubertoncodes .•30
    @bleubertoncodesSubmitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    I am very proud of completing this project fully. I am most proud of problem solving to get the results that I wanted, for example, aligning the footer of my page to stay at the very bottom was a bit challenging, but I tried a lot of different techniques until one of them worked. What I would do differently next time is to take the time upfront to start off the project more organized so it is easier for me to follow when making edits and revisions.

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

    The biggest challenge I encountered was how to get the table portion to look like the design. First I used an actual table element and quickly realized that it would be much easier to create my own "table" using multiple div elements instead. I overcame this obstacle by experimenting with the various ways I could achieve the table from the design and ultimately coming to the solution described above.

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

    Areas that I would like help with in this project are better ways to organize my CSS and ways to improve accessibility within my HTML. Any constructive feedback is very much appreciated.

    Frontend Mentor | Recipe page

    2
    Kamran Kiani•1,840
    @kaamiikPosted 3 days ago

    Some notes which may improve your code:

    1. You do not need to have two img elements for the top Omelette for mobile and desktop views. First, structure your HTML based on the desktop layout. Then, use CSS to style the image for mobile views, and apply media queries to adjust the styling for desktop views.
    1. Instead of using <div class="divider"></div>, try using the <hr> tag, which is more semantic.
    1. All the headings should be h2 because they are in the same hierarchy.
    1. For the nutrition section, use a <table> element in HTML. Remember, this challenge is for practicing using semantic tags as best as you can.
    1. You do not need any CSS properties inside HTML elements, and there is no need to have position: relative here.
    1. You only need min-width for media queries and do not need to use max-width.
    0
  • Kamran Kiani•1,840
    @kaamiikPosted 3 days ago

    There are some important issues in your code specially your CSS I wanna mention:

    1. 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.
    1. 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.
    1. 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 (and no need for width and height) 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.
    1. position: absolute; is completely wrong here. no need to use it.
    1. 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.
    1. No need to have media query for this challenge and always try to code mobile first.
    Marked as helpful
    0
  • Kamran Kiani•1,840
    @kaamiikPosted 3 days ago
    • headings are not part of the header and mostly we use logo of the site or nav items that are repeating contents inside the header. Your h1 tag is not a repeating contents. It should be inside your main.
    • No need to add aria-hidden for img.
    • 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.

    Both your HTML structure and CSS are good. Keep on the great work!

    Marked as helpful
    0
  • Luiz Carlos Jr.•30
    @lucarl07Submitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    I'm definetly proud of using fresh resources (TS & Tailwind) on this project but at the same time, not relying heavily on fancy dependencies and writing all the logic with straight-up TypeScript code. However, i shall try to properly structure and write the logic before full-on focusing on stylizing the page.

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

    I'd say they were mostly architectural: i had almost a headache when trying to use a single, custom hook to handle input values & errors while not use to some "barriers" TypeScript imposes on React. However it was a part of the process, and re-writing some code (specifically, the hook, now 2 separate hooks) from scratch really helped me out.

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

    Is professional, adequate Form validation on React this boring? I mean, i know React for a year now and I don't know if I underestimated this project's scale, but to be more specific:

    I want to know if the approach i used to handle the Form on App.tsx is good enough, in a code-wise than markup-wise sense.

    Responsive contact form using Tailwind CSS

    #react#tailwind-css#typescript
    1
    Kamran Kiani•1,840
    @kaamiikPosted 3 days ago
    • Wrap all of your content inside a main element.
    • The error of the first and last name are not align properly.
    • Add a padding to top and bottom of the body to prevent stick the card to top and bottom.
    • Your asterisks need a .visually-hidden text like required to tell the screen reader users about this sign.
    • Your inputs need aria-invalid attribute, aria-describedBy attribute to link with the error message, autocomplete attribute.
    • Your email input type should be email.

    This challenge is really important in terms of accessibility and you have to consider it next to design and JS too.

    0