Skip to content
OverviewSolutions
23
Comments
41
Osman Bay
@osmanbay90

All comments

  • Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge!

    your project looks good.

    here is a small improvement you should make

    Setting min-height: Utilizing min-height: 100vh on the body ensures that the flexbox layout can utilize the full viewport height, enabling effective vertical centering of elements within the body container.

    Using Flexbox Properly: Ensure proper utilization of Flexbox. For instance, within your <main> tag, the declaration justify-content: space-evenly may not be necessary as Flexbox isn't explicitly used for the layout there.

    Working with <div> elements: Integrating <div> elements within the <main> container can enhance the structure and organization of your HTML, thereby facilitating improved readability, maintainability, and semantic clarity.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    Marked as helpful
    1
  • chopipi•90
    @turtle-jinSubmitted 9 months ago

    Two issues I can't seem to solve myself:

    1. I tried to add media query but it didn't work as intent and anything I put under was completely ignored.
    /* Media query for mobile screens (up to 375px) */
@media only screen and (max-width: 375px) {
    body {
        padding-bottom: 0;
        padding-top: 0;
    }
    
    .container {
        max-width: 100%;
        padding: 0; /* No padding for mobile screens */
    }
    
    .container > img {
        border-radius: 0; /* No border radius for mobile screens */
        object-fit: contain;
    }
}
    1. I haven't figured out how to make the lines on the table the way it is shown in the design picture yet.

    recipe page--have some issues with media query

    1
    Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    Media Query Not Working: Your media query seems to be well-formed, but it might not be effective due to specificity issues. Ensure that the CSS rules within your media query are overriding the rules defined outside of it. To ensure this, you may need to increase the specificity of your media query selectors. Try adding !important to your mobile-specific rules temporarily to see if they take effect. If they do, it suggests a specificity problem. Also, make sure your media query is placed after the main CSS rules, so it can override them.

    Styling Table Lines: To achieve the table lines styling as shown in the design picture, you can use CSS border properties. Specifically, set borders on the <td> elements to create lines between them. Here's how you can modify your CSS:

    CSS code

    • CSS for table
    table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid var(--LightGrey); /* Add borders to cells */
}

    By setting a border on both <th> and <td> elements, you'll get the lines you desire. Adjust the border properties as needed to match your design.

    Additionally, here are some improvements you might consider:

    Organizing CSS: Group related CSS rules together for better readability and maintenance.

    Consistent Indentation: Maintain consistent indentation for better code readability.

    Accessibility: Ensure your website is accessible to all users, for example, by providing alternative text for images (alt attribute).

    Responsive Design: Check responsiveness on various devices and adjust styles as needed. Test your media queries thoroughly to ensure they work as expected.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    Marked as helpful
    0
  • Osman Bay•690
    @osmanbay90Posted 9 months ago

    Hello @verakissyou17,

    Don't worry, we're all beginners on this journey.

    Dealing with classes can be challenging, but I highly recommend learning BEM methodology if you want to have better control over them. I'm currently in the process of learning BEM myself. Additionally, you can explore frameworks like Tailwind if you prefer to avoid dealing with too many classes directly.

    here is link for BEM methodology

    Marked as helpful
    1
  • Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    Accessibility: Ensure all images have appropriate alt attributes for better accessibility.

    Consistency: Ensure consistent spacing and indentation throughout your CSS code for better readability.

    Responsive Design: Test your design on various devices and screen sizes to ensure it looks good and functions well on all of them.

    Semantics: Use semantic HTML elements wherever possible to improve the structure and meaning of your code.

    Optimization: Minify your CSS to reduce file size and improve page loading speed.

    Comments: Add comments to your CSS code to explain complex sections or to provide context for future developers.

    Error Handling: Handle errors gracefully, for example, if an image fails to load, provide a fallback or error message.

    Usability: Consider adding more interactive features to enhance user engagement and experience.

    Testing: Test your website thoroughly across different browsers and devices to ensure compatibility and functionality.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    0
  • Osman Bay•690
    @osmanbay90Posted 9 months ago

    Hi @verakissyou17

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    Consistency in Naming: Maintain consistency in naming classes. For example, you have right-side and left-side classes. Consider using a consistent naming convention like right-section and left-section.

    Accessibility Improvements: Ensure that your button has proper text content. Currently, the <a> tag inside the button is empty. You should move the aria-label attribute to the <button> element and add descriptive text within the button tags for better accessibility.

    Responsive Design: Ensure proper responsiveness on smaller devices. Currently, you have a media query for devices with a width less than 768px, but the condition should be @media (max-width: 768px) instead of @media (width < 768px). Check the layout and spacing on smaller devices to ensure readability and usability.

    Optimization: Optimize CSS by removing unnecessary comments or redundant styles. Consider using shorthand properties where possible to reduce the size of the CSS file.

    Typography: Check the line heights and font sizes for better readability, especially on smaller devices. Ensure proper contrast between text and background colors for accessibility.

    Testing: Test your website across different browsers and devices to ensure compatibility and responsiveness.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    Marked as helpful
    1
  • kltsunetsuki•10
    @kltsunetsukiSubmitted 9 months ago

    Should I did something different? I feel that on the <p> tags there should be a easier solution. Thanks in advance

    Html Css

    2
    Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    Your HTML and CSS code look well-structured and organized. However, if you're looking to simplify the styling of the <p> tags within the .qr-code class, you can leverage CSS inheritance and avoid repeating the font-family and other properties for each <p> tag.

    Consistency in Naming: Ensure consistency in naming conventions throughout your code. For example, you use both qr-wrapper and qr-code, which might confuse someone reading your code. Stick to one convention to keep things clear.

    Optimize Font Loading: Instead of loading the font directly from Google Fonts within the CSS, consider importing it in the <head> section of your HTML using a <link> tag. This can improve page loading performance.

    Accessibility: Always ensure your website is accessible to everyone, including those with disabilities. Make sure to add appropriate alt text to your images for screen reader users.

    Responsive Design: While your CSS seems well-structured, ensure your design is fully responsive across different screen sizes and devices. Test your layout on various devices to ensure it looks good and functions properly everywhere.

    Semantic HTML: While your HTML structure is generally good, always strive to use semantic HTML elements where appropriate. For instance, consider using <header>, <footer>, <main>, etc., if applicable to your content structure.

    Comments: Adding comments to your code can help others (and yourself in the future) understand your thought process and the purpose of specific sections of code.

    Validation: Validate your HTML and CSS to ensure they meet the standards set by the W3C. This can help catch any syntax errors or potential issues that might arise.

    Modular CSS: Consider breaking down your CSS into smaller, reusable modules or using a preprocessor like Sass to keep your codebase more maintainable and scalable.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    0
  • WillsX9•20
    @WillsX9Submitted 9 months ago

    This is my responsive solution to the social links profile front-end design. I use HTML & CSS All feedback are welcome.

    Responsive Social Links Profile

    2
    Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    Consistent Naming: Ensure consistency in class naming convention. For instance, you have used both "location-txt" and "card-btn". Choose one convention and stick with it throughout your code for clarity and maintainability.

    Comments: Consider adding comments to your code, especially for sections that might need clarification in the future or for other developers who might work with your code. This makes your code more understandable and easier to maintain.

    Font Loading: While using custom fonts is great for design, consider providing fallback fonts in case the custom font fails to load for any reason. This ensures a consistent experience for users across different devices and browsers.

    Button Styling: The button styles are generally good, but you might want to consider adjusting the width of the buttons for smaller screens to ensure they remain fully visible and accessible.

    Responsive Design: While your design looks good, it's always a good practice to test your layout on various screen sizes to ensure it looks good and functions properly on all devices.

    Use of Flexbox: Your use of Flexbox for layout is great. However, ensure that you're using it consistently and effectively throughout your code.

    Accessibility: Ensure your website is accessible to users with disabilities. For example, make sure all images have appropriate alt attributes, and buttons are keyboard accessible.

    Optimization: Consider optimizing your image sizes and other assets to improve page load times, especially for users on slower internet connections or mobile devices.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    Marked as helpful
    0
  • Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    HTML Structure: Your HTML structure is straightforward, but you could consider using semantic HTML elements for better accessibility and SEO. For instance, you could use <header>, <main>, and <footer> tags.

    CSS Styling:

    • Consolidate duplicate styles: You have .qr class defined twice in your CSS. Combine their styles into one block to avoid redundancy.

    • Use consistent naming conventions: You have a typo in the class name "buildiing." Make sure to use consistent and correct naming conventions to avoid confusion.

    • Improve readability: Break down long CSS rules into multiple lines for better readability. Use shorthand properties: Instead of setting border, border-radius, and height separately, consider using shorthand properties to make your code more concise.

    Responsive Design: Ensure that your design is responsive and looks good on various screen sizes. You may need to adjust widths, heights, and font sizes for different devices.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    Marked as helpful
    0
  • Dannia Roxana de la Peña Torres•100
    @danniadelapSubmitted 9 months ago

    What was difficult for you while building the project? I found it difficult to center my card What areas of your code are you unsure about? I'm not sure if I'm doing it right since I don't know good practices in CSS and Html and responsive development. Do you have any questions about best practices? Where can I find information and exercises about good practices and responsive development?

    Challenge 1 QR Code

    2
    Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    Centering the Card: To center the card horizontally and vertically, you need to make sure the parent container (<div class="container">) occupies the full viewport height (100vh) and uses flexbox to center its contents. Your current implementation seems correct, but ensure that there are no conflicting styles or elements affecting the centering.

    Responsive Design: Your media query for smaller screens is a good start, but you may need additional adjustments for various screen sizes. Consider testing your design on different devices and screen resolutions to ensure it looks good across a range of devices.

    CSS Best Practices:

    Avoid inline styles: You've defined some styles inline within the HTML file (e.g., .attribution). It's generally better to keep all styles in a separate CSS file for better organization and maintainability.

    Group related styles: Organize your CSS rules logically to make it easier to understand and maintain.

    Use meaningful class names: Class names like .img and .text are quite generic and may lead to confusion later on. Try to use more descriptive class names that convey the purpose of the elements they're applied to.

    HTML Structure: Your HTML structure looks fine, but consider adding semantic HTML elements where appropriate (e.g., <header>, <main>, <footer>) to improve accessibility and SEO.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    Marked as helpful
    2
  • mrockcodes•50
    @mrockcodesSubmitted 9 months ago

    I have problems estimating the pixels in the original designs. Also, I have problems with creating media queries because it is my first time doing it. I tried understanding media queries before hand to make sure my design will be responsive as much as possible. Overall, I somehow manage to make it responsive and have the design as close as possible with the original design.

    Frontend Mentor Challenge - Social Links Profile

    2
    Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    1. Consolidate Common Styles: You have repeated styles for .hero-card-links ul li button and .hero-card-links ul li a button.` Instead of repeating them, you can merge them into a single rule since they share most of the properties.

    2.Simplify Media Query: In your media query, you're repeating some styles unnecessarily. You can simplify it by only specifying the properties that need to change at the specified viewport width.

    3.Use Semantic HTML: Consider using more semantic HTML elements where applicable. For instance, you can use <header>, <nav>, <main>, <footer>, etc., to provide more meaning to your markup.

    4. Avoid Overusing <strong> Inside Buttons: Using <strong> inside buttons is not recommended for styling purposes. It's better to apply the necessary styles directly to the button element or use appropriate HTML elements for emphasis.

    5. Optimize Flexbox Usage: You're using flexbox in several places. While it's a good approach for layout, ensure you're using it effectively and not overcomplicating the layout unnecessarily.

    6. Accessibility: Ensure your website is accessible by using proper alt text for images, providing keyboard navigation, and ensuring color contrast for better readability.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    Marked as helpful
    0
  • Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    1. Semantic HTML: Ensure you use appropriate HTML elements for each piece of content. For instance, use <main> tags and wrap cards to improve accessibility. Replacing the first child <div> of the <body> with <main> can enhance the structure.

    2. Remove Unnecessary Code: Less is more! Eliminate any unnecessary code. For example, remove HTML comments and avoid redundant CSS properties. Clarity and simplicity are key.

    3. Responsive Images: Give images a max-width of 100% to ensure responsiveness across different devices. Also, consider adding a border-radius value for a polished look.

    4. Typography Consistency: Maintain consistent font sizes, text alignment, and margins. For instance, set h1 and p font size to 15px (0.9375rem), align text to the center, and apply consistent margins.

    5. Flexbox and Grid: Explore these layout techniques to create responsive designs. Flexbox is great for one-dimensional layouts, while CSS Grid handles two-dimensional layouts effectively.

    6. Accessibility: Use semantic elements like <nav>, <article>, and <section> to improve screen reader compatibility. Add alt attributes to images for better accessibility.

    7. CSS Variables: Leverage custom properties (CSS variables) for consistent color schemes, font sizes, and spacing. This makes it easier to maintain and update styles.

    8. Organized CSS: Group related styles together. Use separate CSS files for different components or sections. Avoid inline styles whenever possible.

    9. Mobile-First Approach: Start designing for mobile screens first, then progressively enhance for larger screens. This ensures a better user experience across devices.

    10. Browser Compatibility: Test your design on different browsers (Chrome, Firefox, Safari, Edge) to ensure consistent rendering. Use vendor prefixes for CSS properties if needed.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    Marked as helpful
    0
  • austin•50
    @austin11183Submitted 9 months ago

    Pratice html, css and github, let me know if i could do better! Thanks

    qr-code

    2
    Osman Bay•690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    Mistakes:

    Missing closing tag for meta viewport: You need to close the meta viewport tag properly with >.

    Relative path for image source: Make sure the path to the image is correct. If the image is not loading, ensure that the path ./images/image-qr-code.png is correct relative to the HTML file.

    Incomplete CSS class names: Avoid using abbreviated class names like png_class. Use more descriptive names that indicate the purpose of the class.

    Hardcoded width and height for card: Using fixed width and heightmay not be responsive. Consider usingrelative unitslikepercentageorviewport units`.

    Unnecessary styles: Some styles may not be needed or could be simplified.

    Improvements:

    Use of semantic HTML elements: Consider using semantic HTML elements like <header>, <main>, <section>, <article>, and <footer> for better structure and accessibility.

    Responsive design: Ensure your design looks good on various screen sizes. You can achieve this by using relative units and media queries.

    Consistent naming convention: Maintain a consistent naming convention for classes and IDsThis improves code readability and maintainability.

    Optimize image: Optimize your image to reduce its size without losing quality. This can improve page load speed.

    Accessibility: Ensure your website is accessible to users with disabilities by using appropriate HTML elements and attributes.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

    0