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

All comments

  • Gilbert Tan• 150

    @gbtan1991

    Submitted

    What are you most proud of, and what would you do differently next time?

    Proud of:

    • Component Structure: I'm proud of the clear and modular component structure of the project. Separating the Card component from the App component makes the code more readable and maintainable.

    • Styling: The use of Tailwind CSS for styling ensures a clean and modern design with minimal effort. The use of CSS classes like bg-cover, bg-center, and shadow-retro enhances the visual appeal.

    • Data Handling: Mapping over the learningCards array to dynamically generate Card components is an efficient way to handle multiple data entries.

    Do Differently:

    • Error Handling: Add error handling for missing data, such as a default image if the cover URL is not found or a placeholder if the authorPhoto is missing.

    • Prop Types: Implement PropTypes for type checking, which can help catch bugs related to incorrect prop types.

    • Component Testing: Write unit tests for the components to ensure they render correctly with different props.

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

    Challenges:

    Dynamic Background Image in Inline Style:

    • Solution: Used template literals to dynamically set the background image in the Card component's div. This required understanding of how to properly format the URL string within the style attribute.

    Responsive Design:

    • Solution: Utilized Tailwind CSS's responsive design utilities, such as sm:w-[320px], to ensure the card adjusts to different screen sizes. This involved learning and applying Tailwind's responsive classes effectively.

    Date Formatting:

    • Solution: Created a helper function monthFormat to convert the month number to its abbreviation. This required basic understanding of JavaScript functions and array indexing.

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

    Optimizing Performance: Any suggestions on optimizing the rendering performance of the Card components, especially if the learningCards array grows significantly.

    Accessibility: Best practices to improve the accessibility of the components for users with disabilities.

    Advanced Styling Techniques: Advice on advanced CSS or Tailwind techniques to enhance the visual design and interactivity of the cards.

    State Management: Recommendations on how to handle state management if the app scales, particularly if more dynamic interactions are introduced.

    Testing: Guidance on setting up a testing environment and writing effective tests for React components using libraries like Jest and React Testing Library.

    Blog Preview Card using ReactJS and TailwindCSS

    1

    P
    RevazSologhashvili• 210

    @RevazSologhashvili

    Posted

    Great work!

    The only thing I would change in your solution is to create a 'cardData.ts' file for storing every card item's information and then import it for use wherever I need it. Other than that, everything looks well done to me.

    1
  • P
    RevazSologhashvili• 210

    @RevazSologhashvili

    Posted

    Hi,

    Based on your solution i think that you are new to web development, I suggest you to always imagine boxes when you code something, it will help you to organize your code and style it.

    Marked as helpful

    0
  • Jirosu• 20

    @Jirosu

    Submitted

    Hi!, this is my first solution in Frontend Mentor so I chose the QR Code Component as a good starting point in the plataform. I was wondering if a should I use rem units instead of px. And if so, is there a particular reason?

    I'd really appreciate any feedback. Thank you for reading!

    Responsive QR Code Component - Flexbox

    1

    P
    RevazSologhashvili• 210

    @RevazSologhashvili

    Posted

    Hi

    rem stands for “root em”. It is relative to the root element, which is usually the <html> element. By default, 1 rem is equal to the font size of the root element, which is typically 16px. So, if you set the font size of an h1 element to 2rem, it would be equivalent to 32px.

    em is relative to the font size of its closest parent element. If you set the font size of an h1 element to 2em and its parent element has a font size of 20px, the h1 font size would be 40px.

    Here are some examples:

    <html style="font-size: 16px;">
  <body style="font-size: 1.5em;"> <!-- This is 24px (1.5 * 16) -->
    <h1 style="font-size: 2em;">Hello World</h1> <!-- This is 48px (2 * 24) -->
  </body>
</html>

    In this example, the h1 element has a font size of 48px because its parent’s font size is 24px (which is 1.5em or 24px of the root’s font size).

    <html style="font-size: 16px;">
  <body style="font-size: 1.5rem;"> <!-- This is 24px (1.5 * 16) -->
    <h1 style="font-size: 2rem;">Hello World</h1> <!-- This is 32px (2 * 16) -->
  </body>
</html>

    In this example, the h1 element has a font size of 32px because it is set to 2rem, which is based on the root element’s font size, not the parent’s.

    Using rem and em can indeed make your website more responsive and accessible. They allow users to adjust the default font size in their browser if needed, which can be especially helpful for visually impaired users. However, it’s not the only reason to use them. They also make it easier to scale your design, maintain consistency, and make your CSS more readable and easier to manage.

    Remember, there’s no one-size-fits-all solution in CSS. The best approach depends on your specific needs and the context of your project. Happy coding! 😊

    Marked as helpful

    2
  • ZaiBerm• 50

    @ZaiBerm

    Submitted

    It's my first time writing Javascript and doing DOM Manipulation, I don't know if I did good :)) If you notice that I did bad practices in my code, I'll appreciate it f you point it out to me :))) Thank you!!!

    Responsive FAQ Accordion

    1

    P
    RevazSologhashvili• 210

    @RevazSologhashvili

    Posted

    You did great job.

    I noticed two thing you can improve here.

    1. Try to close already opened question if you open another.
    2. There is extra height on screen. you can use body{min-height: 100dvh;}

    this will set minimum height based on device screens sizes so there will be no more unnecessary scrolling

    Marked as helpful

    2
  • P
    RevazSologhashvili• 210

    @RevazSologhashvili

    Posted

    It depends on semantics i think. If in UI you have Card component as in this challenge then you should use img element for showing img as a part of card item. but if image is for just showing something like vector lines for entire background then u should use background image styles.

    Marked as helpful

    0
  • P
    RevazSologhashvili• 210

    @RevazSologhashvili

    Posted

    Hi Ismael,

    Mobile first design is achieved by using media queries.

    like this, first body element styling is for mobile devices and others are for different types of device widths.

    check out this MDN link for detailed examples.

    Media Queiries

    body {
  background-color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

/* Media query for tablets */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* Media query for desktops */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

    Marked as helpful

    2
  • JahanzaibArifAwan• 10

    @jahanzaib504

    Submitted

    I have one question that should I add class or id to every html tag.

    Flexbox

    2

    P
    RevazSologhashvili• 210

    @RevazSologhashvili

    Posted

    Using class or id tags in HTML actually depends on what you want to create or how you plan to style it. If you want to apply the same style to multiple elements, such as all list items, you can use the same class for all of them. However, you can’t use the same ID for multiple elements since IDs must be unique. With classes, you can also apply multiple styles to a single HTML tag, like class="color-red bg-black".

    If you want to apply unique styling to an element, then you can use IDs. IDs are also used for navigation within a webpage. For example, <a href="#idName">Go to this Part</a> allows you to navigate to the section of your website identified by the specified ID.

    Remember, IDs have a higher specificity than classes in CSS, meaning that if there are any conflicting styles between classes and IDs, the styles defined under the ID will override the others. Also, while classes can be used multiple times within a document and can be applied to multiple elements, IDs are unique and each one can only be used once within a document. This uniqueness makes IDs very useful for JavaScript manipulation.

    Marked as helpful

    0