@andref2015Submitted 5 months ago
P
RevazSologhashvili
@RevazSologhashviliAll comments
- @gbtan1991Submitted 11 months agoWhat 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.
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.
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.
@RevazSologhashviliPosted 5 months agoGreat 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 -
- @ItotiaHarrisonSubmitted 5 months ago@RevazSologhashviliPosted 5 months ago
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 helpful0 - @JirosuSubmitted 10 months ago
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!
@RevazSologhashviliPosted 10 months agoHi
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 helpful2 - @ZaiBermSubmitted 10 months ago
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!!!
@RevazSologhashviliPosted 10 months agoYou did great job.
I noticed two thing you can improve here.
- Try to close already opened question if you open another.
- 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 helpful2 - @imanmaulana1Submitted 10 months ago
Which is better between using an image as a background or as an element?
@RevazSologhashviliPosted 10 months agoIt 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 helpful0 - @leamsi-ciberSubmitted 10 months ago
Hi everyone, I would like to know how can I achieve mobile first workflow in CSS?
@RevazSologhashviliPosted 10 months agoHi 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.
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 helpful2 - @jahanzaib504Submitted 10 months ago
I have one question that should I add class or id to every html tag.
@RevazSologhashviliPosted 10 months agoUsing 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 helpful0
