Skip to content
OverviewSolutions
4
Comments
5

Oscar Echenique D.

@OscarE2DMontería80 points

Bacteriólogo, Estudiante de Ingeniería de Sistemas.

Latest solutions

  • Recipe Page Solution

    Oscar Echenique D.•80
    Submitted 22 days ago

    Improving CSS structure and maintainability for more complex projects: How to integrate ITCSS or CSS Modules without losing simplicity?

    Optimizing project performance and accessibility: What tools and practices would you recommend to audit and enhance both aspects?

    Deepening the use of new CSS features like container queries and functions like clamp(): practical examples to implement them effectively.

    1 comment

  • Social links profile

    Oscar Echenique D.•80
    Submitted 27 days ago

    I’d like feedback on these specific points:

    Accessibility optimization: Is there anything I could improve in terms of semantic tags, color contrast, or keyboard navigation?

CSS best practices: Is my CSS organization okay, or are there suggestions to make it more scalable or maintainable?

Loading performance: Even though it’s a small project, is there anything that might be negatively affecting its performance?

    If you see anything else I missed or could improve—I'm all ears!

    1 comment

  • Blog Preview Card - semantic HTML, modern CSS layout techniques.

    Oscar Echenique D.•80
    Submitted 29 days ago

    I would appreciate help or resources on best practices for organizing CSS code more efficiently. Also, guidance on advanced CSS pseudo-classes, animations, and transformations would be very valuable as I aim to deepen my skills and create more dynamic UI interactions.

    2 comments

  • responsive QR code component - HTML - CSS - Responsive design

    Oscar Echenique D.•80
    Submitted 30 days ago

    What I’d Like Help With

    While I’m proud of completing this project independently, there are a few specific areas where I’d really appreciate feedback:

    Responsiveness techniques
I used clamp() to handle responsive typography without media queries. Does this approach scale well across different resolutions and devices? Are there edge cases I might have missed?

Image performance and security attributes
I applied several <img> attributes like referrerpolicy, crossorigin, decoding, and loading. Are these the best choices for this type of project, or are there better practices I should consider?

CSS structure and organization
I wrote my own CSS reset and tried to keep variables and layout code well-organized. Are there any improvements you’d suggest for clarity, maintainability, or scalability?

Accessibility
I attempted to use semantic HTML wherever possible. Are there accessibility improvements I should implement for a better user experience, especially for screen reader users?

General code quality
Any recommendations on improving my code readability, file structure, or adherence to modern front-end development standards are more than welcome!
    1 comment

Latest comments

  • Oscar Echenique D.•80
    @OscarE2D

    ✅ Strengths

    • Modern Development Stack
      Uses React with Vite, providing a fast and efficient development environment.

    • Clear Project Structure
      The folder structure (e.g., components, pages, public) shows good separation of concerns, making the codebase more maintainable and scalable.

    • Linting Setup
      ESLint is included, helping ensure clean and consistent code throughout the project.

    🛠️ Suggestions for Improvement

    • Improve the README
      The current README.md contains only default boilerplate. Adding specific information about the project, setup instructions, and usage would help others understand and contribute more easily.

    • Add Routing Capabilities
      Consider integrating a routing library like React Router to support navigation between multiple views or sections.

    • Improve Accessibility (A11y)
      Make sure all interactive elements are keyboard-accessible and use ARIA labels when needed to support users with assistive technologies.

    • Optimize Media Assets
      Ensure that images and other resources are optimized for performance, particularly on mobile devices.

    📌 Summary

    This project has a strong foundation with modern tools and a clean structure. Implementing the above suggestions would further enhance its quality, maintainability, and accessibility.

  • Oscar Echenique D.•80
    @OscarE2D

    ✅ Strengths

    • Semantic HTML Structure
      Uses semantic tags like <section>, <article>, and <figure>, which improve accessibility, SEO, and code clarity.

    • Responsive Design
      The layout adapts well to different screen sizes, maintaining a consistent user experience across devices.

    • Organized CSS
      CSS is modular and structured, allowing easier maintenance and potential scalability.

    • Clean Codebase
      HTML and CSS are readable, well-indented, and follow good practices, which is great for collaboration and further development.

    🛠️ Suggestions for Improvement

    • Enhance Accessibility
      Consider adding aria-* attributes where necessary, ensuring proper heading hierarchy, and verifying color contrast for users with visual impairments.

    • Optimize Images
      Use the srcset and sizes attributes to serve responsive images. This reduces bandwidth use and improves performance on various devices.

    • Improve Navigation
      Adding features like a “Back to Top” button or sticky headers could enhance usability, especially on mobile devices.

    • Add Meta Tags
      Including tags such as <meta name="viewport" content="width=device-width, initial-scale=1.0"> and a meta description can improve SEO and responsiveness.

    Marked as helpful
  • Oscar Echenique D.•80
    @OscarE2D

    ✅ Positive Aspects

    1. Clear file structure: The project is organized with a css folder for styles and an index.html file in the root, which makes the code easy to navigate and understand.

    2. Use of pure HTML and CSS: Implementing the project without frameworks shows a solid understanding of web development fundamentals.

    3. Flexbox implementation: The use of Flexbox for layout indicates a modern and efficient approach to arranging elements.

    🛠️ Suggestions for Improvement

    1. HTML semantics:

      • Consider using semantic tags like <main>, <section>, or <nav> instead of <div> to improve accessibility and SEO.

    2. alt attributes in images:

      • Make sure all images have descriptive alt attributes to enhance accessibility for screen reader users.

    3. Responsiveness across devices:

      • Implement media queries to ensure the layout adapts properly to different screen sizes.

    4. Separation of styles:

      • It’s best to keep styles in external CSS files and avoid inline styles to improve code maintainability.

    5. Use of relative units:

      • Consider using relative units like rem or em instead of px to enhance the scalability and accessibility of the design.

    💡 Additional Recommendations

    • Code validation: Use tools like W3C Validator to check the validity of your HTML and CSS.

    • Image optimization: Make sure images are optimized for the web to improve loading times.

    • Naming consistency: Maintain consistent naming conventions for classes and files to facilitate code maintenance.

    Marked as helpful
  • kieranichiban•30
    @kieranichiban
    What are you most proud of, and what would you do differently next time?

    pretty straight forward. looking to make sure my css isnt over engineered

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

    keep code to a minimum so its easier to read

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

    same as above. would like feedback on css mainly

    blog preview

    1
    Oscar Echenique D.•80
    @OscarE2D

    ✅ Positive Aspects

    • Semantic HTML Structure: Your use of semantic HTML elements enhances accessibility and provides a clear structure to the content.

    • Responsive Design: Implementing a responsive layout ensures that the blog preview card adapts well to various screen sizes, improving the user experience across devices.

    • Interactive Elements: Incorporating pseudo-classes like :hover and :focus adds interactivity, making the UI more engaging.

    • Use of Modern CSS Techniques: Utilizing Flexbox and CSS Grid demonstrates a good grasp of modern layout methods, allowing for flexible and efficient design implementations.

    🛠 Suggestions for Improvement

    • README Enhancement: Consider expanding your README to include sections like "What I Learned" and "Continued Development." This not only showcases your learning journey but also provides context for others reviewing your code.

    • Code Organization: Organizing your CSS using methodologies like BEM (Block Element Modifier) or adopting a modular structure can improve maintainability and scalability.

    • Accessibility Considerations: Ensuring that interactive elements are accessible via keyboard navigation and providing appropriate ARIA labels can enhance the inclusivity of your project.

    • Consistent Styling: Maintaining consistent spacing, font sizes, and color schemes throughout the project can lead to a more cohesive and professional appearance.

  • Oscar Echenique D.•80
    @OscarE2D

    ✅ What’s Done Really Well:

    🧱 Clear and Clean HTML Structure

    • You correctly used fundamental HTML tags (<!DOCTYPE html>, <html>, <head>, <body>).
    • You neatly separated the visual sections: image and text.
    • The use of class names like .white-container, .img-container, and .text is descriptive and semantically helpful.

    🎨 Well-Organized Styles

    • You applied a basic reset with * { margin, padding, box-sizing }, which is excellent for creating a consistent starting point.
    • Great choice of font with Google Fonts (Outfit) and proper use of font-family on the body.
    • The layout is vertically and horizontally centered using Flexbox on the body, which is a great modern practice.
    • The use of soft colors (hsl(212, 45%, 89%) and hsl(0, 0%, 100%)) gives the design a professional and pleasant appearance.

    📱 Responsive Without Complexity

    • The main container’s width (320px) is ideal for mobile, and thanks to flex, it adapts well to most screen sizes without breaking.

    🛠 Suggestions for Further Improvement:

    🧩 1. CSS Placement

    • Although it’s okay to include <style> in the same file for small projects, the ideal practice is to separate the CSS into an external file (styles.css). This improves organization as your project grows.

    🖼 2. Improving Image Accessibility

    • Currently, the alt="" is empty. While valid, it’s better to use a descriptive text such as:

      <img src="./images/image-qr-code.png" alt="QR code linking to Frontend Mentor" />

      This helps users who rely on screen readers.

    📐 3. Font Size and Visual Hierarchy

    • The font-size: 15px is fine, but you could consider using rem instead of px to improve accessibility and scalability:

      font-size: 0.9375rem; /* equivalent to 15px */

    • You could also use clamp() in the future to make font sizes fluid, like:

      font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);

    🔤 4. Using Relative Instead of Fixed Units

    • Instead of width: 320px, you could practice using units like max-width or clamp():

      max-width: 320px;
width: 90%;

    This makes the layout more adaptable to smaller screens without needing media queries.

    ✨ 5. Optional Semantic HTML

    • Although not required, you might consider using a <main> instead of the div.white-container, and a <section> for the text content. This improves semantic structure for accessibility and SEO.

    🏁 Final Summary:

    The design is clean, well-organized, and functional. The use of Flexbox, Google Fonts, and harmonious colors shows attention to detail.

    🎉 Congratulations! You’re building a very solid foundation. These suggestions are just to help you keep growing and prepare for more complex projects. Keep it up! 🚀