@IliaTikyovSubmitted about 1 month ago
Latest solutions
Latest comments
- @BabatundeXBTSubmitted about 1 month ago@JDev-8Posted about 1 month ago
The CSS code you presented has a solid foundation, but like all code, it can benefit from improvements to optimize its efficiency, maintainability and scalability.
Relative Units (rem or em) The primary use of pixels (px) to define sizes, margins and padding makes it difficult to adapt to different screens and user preferences. You should transform the units to rem (relative to the font size of the root element) or em (relative to the font size of the parent element). rem is generally preferable to maintain consistent scaling across the page. Example:
CSS
/* before (con px) */ .container { width: 50%; margin: 20px auto; }
/* after (con rem) / .container { width: 50rem; / Ajusta el valor según tu diseño */ margin: 2rem auto; } Organization and Class Names Generic class names (e.g. .image, .inner) make it difficult to understand the code and reuse it. Use descriptive and specific names (e.g. .recipe-image, .container-inner). Consider methodologies such as BEM (Block, Element, Modifier) for better organization. Example:
CSS
/* before / .image { / ... */ }
/* after / .recipe-image { / ... */ } Avoid Repeating Styles Repeated styles, especially in media queries, make the code difficult to maintain. Define base styles and in the media query only modify what is necessary. Use classes to group common styles. Example:
CSS
.title { color: hsl(30, 10%, 34%); font-size: 2rem; }
/* Media query / @media (max-width: 640px) { .title { font-size: 1.5rem; / Solo se modifica el tamaño de fuente */ } } Limited Use of Element Selectors Direct use of element selectors (ex: h1, img, li) can generate unwanted styling on other elements. Prioritizes the use of classes to apply styles. Example:
CSS
/* before / h1 { / ... */ }
/* after / .main-title { / ... */ }
Specific Media Queries Media queries that modify too many styles, even unnecessary ones. Make media queries more specific, applying styles only to the elements that really require it. Consider using min-width instead of max-width if it is more appropriate for your design. Margins with margin: 10% auto Percentage margins can give unexpected results on different screen sizes. Use rem or em for margins. To center horizontally, use margin: 0 auto. 9. Styles in HTML (Avoid) Although it is not seen in the fragment, make sure that all the styles are in the CSS, not in the HTML (style attributes). Keep CSS separate from HTML for better maintenance.
0 - @DangelobastSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
One achievement that stands out to me is styling and applying different techniques to make this page look similar to the original design, If I were to approach this again I would probably think more about responsive design.
What challenges did you encounter, and how did you overcome them?My first approach to build the buttons section was to actually use <button> tags, however it is better to use anchor elements since buttons are mostly use to perform actions with javascript.
Also there was a problem with my approach using selectors in which CSS was overriding :hover (There was another selector with more specificity), by using color:inherit in that selector; I didn't need to change or add more classes, instead when :hover is active it will inherit the color of parent, in other words, if :hover is currently active it will inherit the color property from :hover if it's not then it will inherit from global color which is set to white.
- P@SebbyVonBlackSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I started learning responsive design with this project and am working on learning desktop view down to mobile opposed to mobile to desktop
What challenges did you encounter, and how did you overcome them?CSS styling is my biggest struggle, as I am still learning design patterns and conventions
What specific areas of your project would you like help with?Reviewing off CSS to see what I could have done more efficiently or more clever.
@JDev-8Posted about 2 months agoGreat, it is important to start from the bottom step by step to achieve great results. You should stick a little more to the design and thus challenge yourself to use other CSS properties
0 - P@jburger69Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of coming back to coding and being able to complete the project to a degree. I've had a lot of refreshing to do. Next time I would come back and learn how to use figma more often.
What challenges did you encounter, and how did you overcome them?My most difficult part was trying to get the text to line up correctly with the right size and color.
What specific areas of your project would you like help with?The text part of the whole challenge and how I can go about doing it a lot easier next time. I believe I should of used a CSS framework and it would of been a lot easier. Tail wind or bootstrap.
@JDev-8Posted about 2 months agoThe solution is great, but take a look at the original design! I think it could be adjusted better.
0
