@kayan2004Submitted 4 months ago
P
Patrycja
@Patrycja-dzAll comments
- @Patrycja-dzPosted 4 months ago
Hey, the code is well-organized and demonstrates a clean and effective structure with logical order of elements. The use of flexbox in the CSS provides a good layout for centering and aligning elements, and the styling choices contribute to a visually appealing design.
Areas for Improvement: The circle class name, while descriptive in its current context, may benefit from a more specific name if it serves a broader function. For instance, if this class is used to style profile pictures or similar elements, renaming it to something like profile-picture could enhance clarity.
The current use of <button> elements for the social links may not align with typical user expectations, as these are more commonly represented as <a> (anchor) elements. Anchor tags are inherently designed for navigation and are more semantically appropriate for linking to external sites. Switching to <a> tags with appropriate href attributes would improve semantic correctness and accessibility.
Except for these nuances very good work. Good luck and keep working
Marked as helpful0 - @dv-tiagosilvaSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
This time I have finished the project more quickly!
What challenges did you encounter, and how did you overcome them?I think my best challenge this time was to improve my responsive skills, aside the synthaxis that I am still understanding.
What specific areas of your project would you like help with?I would like help with responsive for cell phones, I think media queries is the answer but I am still learning about it.
@Patrycja-dzPosted 5 months agoHi, your project looks very good, super job. However, I'm not sure why you put most of the code in the <a> tag. You don't tend to use it as a parent to so many elements, you might want to think about using main as a container, especially since the link so far doesn't lead to anything. However, I understand that you wanted a proper cursor, you can use cursor: pointer without a link for example by writing it as a rule for the flex-container class. It's not a golden rule, but it's better to avoid styling after the id because it's definitely harder to override it somehow later. Also to include space between project and mobile screen (checking it on iPhone) you can add margin for first class. But there is a very big potential. Congratulations š
Marked as helpful0 - @MajorFreedomSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Maybe that my workflow and code was more clean and structured
What challenges did you encounter, and how did you overcome them?how to load font from file with font-face, how to change animations on hover with multiple objects
What specific areas of your project would you like help with?css flexboxes
@Patrycja-dzPosted 5 months agoHi, your solution looks very good. The transition to hover is smooth and there is no jumping effect between states. As for the things you mention in the retro, I see you are already using font-face correctly, you can additionally assign some of the used values to custom properties, including font with its font-weight, to avoid code repetition. The HTML looks good, I see a good foundation in naming you can additionally try using the BEM methodology.
Here are also some fun websites which can help you to deal with flexbox: https://mastery.games/flexboxzombies/ https://flexboxfroggy.com/ https://codingfantasy.com/games/flexboxadventure
Marked as helpful0 - @SrinathKadam048Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Very proud that I can complete this project. Not to the flawless extent, but very happy that I am better than what I was yesterday with understanding the flexbox and new JS concepts.
What challenges did you encounter, and how did you overcome them?Responsive design is always a challenge to me and a topic which I tend to skip always
What specific areas of your project would you like help with?Responsive Design. Not sure if the widths, margins, etc should be in % or vh or rem or px. Also, need help with simplifying media queries
@Patrycja-dzPosted 8 months agoHey there! Great to see your progress with JavaScript and flexbox. It's evident that you're enjoying what you're doing, which is crucial for staying motivated and productive! š
Regarding your question about units in CSS, it's essential to understand that the choice of units often depends on various factors such as project requirements, design considerations, and personal preferences. Here's a breakdown of when to use different units:
Percentages (%): Ideal for creating fluid layouts that adapt to different screen sizes. Useful for specifying widths relative to the size of the parent container. Ensures elements scale proportionally when the parent container's dimensions change. Viewport Height (vh): Useful for elements that need to span a specific percentage of the viewport height. Often used for full-screen sections, hero images, or elements that should always fill the screen vertically. Provides consistency across different screen sizes. Root Em (rem): Recommended for setting font sizes and spacing. Offers scalability and consistency, as rem units are relative to the root element's font size. Simplifies adjustments to font sizes and spacing by changing the root font size. Pixels (px): Provides precise control over element dimensions and spacing. Useful for fixed-size elements or when specific pixel measurements are required. Less flexible for responsive design compared to percentage-based or relative units.For further insights into CSS and units, I recommend checking out Kevin Powell's YouTube channel. He provides excellent explanations, especially regarding the tricky parts of CSS and units.
Regarding your CSS file, I noticed that the same percentage value appears in several places. Consider storing it as a custom CSS variable to enhance maintainability and consistency across your stylesheets.
As for media queries, while you mentioned that you don't need media queries for this small UI component, I typically use them as an extension beyond the mobile version. Here's a breakdown of how I approach it:
Base Styles for Mobile: Everything defined before the media query can be considered as styles for the mobile version. These styles cater to smaller screens and ensure that the component looks good on devices like smartphones. Media Queries for Larger Screens: Within the media query, I define styles for small tablets, tablets, and desktops. This allows me to adjust the layout and appearance of the component to fit larger screens appropriately. It's essential to consider the design and extend the styles to ensure a seamless user experience across various devices.Lastly, regarding JavaScript, consider using let instead of var to avoid creating global variables in the window object. This helps keep your code encapsulated and prevents unintended access to variables by other scripts.
Remember, if comments are unnecessary, feel free to remove them to keep your code clean and concise.
0 - @David-dawnSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Am proud of knowing how to use more advance CSS grid features.
And what I will do differently next time are:
- I will make sure I use advance CSS styling
- I will make sure I use CSS preprocessors....
- I will make sure I explore web accessibility standards and best practices to ensure my QR code component is accessible to users with disabilities.
The challenges I encountered was how to implement CSS grid.. I overcome them through some useful resources like MDN and w3schools.....
What specific areas of your project would you like help with?On How to use CSS Media Queries in making the screen size....
@Patrycja-dzPosted 8 months agoHello,
First off, I want to commend you on your first solution! It's a great start, and you should feel proud of your progress.
While reviewing your code, I noticed a couple of areas where we can improve the handling of element dimensions, particularly regarding the image's height and width.
One issue I observed is the hardcoded dimensions set for the image. A good practice to follow is to utilize a simple image reset technique, such as setting width: 100%; and display: block;, ensuring that images always scale appropriately to fit their container.
Additionally, you've specified a height for the container element, which is redundant since it's already a grid item inheriting dimensions from its parent element. Given that you've declared display: grid; at the body level, the grid row and grid column values (in this case, 1fr x 1fr) already determine the height and width respectively.
Finally, it's worth mentioning that it's beneficial to review the style-guide.md file, where styles such as colors are defined. This ensures consistency and clarity throughout the project.
By addressing these issues and referring to the style-guide.md for style definitions, we can ensure a more flexible and maintainable layout. Keep up the good work, and feel free to reach out if you have any questions or need further assistance.
Best regards, Patrycja
Marked as helpful0
