Skip to content
OverviewSolutions
4
Comments
5
P
Omair Majid
@BigO-Dev

All comments

  • Omair Majid•100
    @BigO-DevPosted 7 months ago

    Overall, you did an excellent job of coming close to the design. Some things to work on:

    • Having a <main> section where your main content is a good idea.
    • Semantic headings and structured text enhance accessibility.
    • Media queries adjust layout elements and typography on smaller screens.
    • Responsive image handling with max-width: 100% ensures images scale correctly.
    • Consider the impact of setting margins and paddings in fixed units; switching these to more flexible units like rem or percentages could improve scaling.
    • Review and remove any potentially unused styles to optimize loading times.
    0
  • Mihai•220
    @h-mihailSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    Social links profile

    1
    Omair Majid•100
    @BigO-DevPosted 7 months ago

    Semantic HTML Assessment:

    • The use of <figure> for the profile picture is appropriate and semantically correct.
    • However, the div elements used for buttons should be replaced with semantically correct elements, as div does not convey any meaning about its content.

    Suggestions for Improvement:

    • Replace div elements with button or a (anchor) elements for the links. This is crucial for accessibility because div elements are not focusable or keyboard accessible by default. For instance: 
      <button class="button">GitHub</button>
<!-- or -->
<a href="https://github.com" class="button">GitHub</a>
    • Use <header> within the .card for the name and location if it suits the card's context, improving the document structure.

    Accessibility Assessment:

    • The image has an appropriate alt text, which is good for accessibility.
    • role="main" is redundant on the <main> element, as <main> inherently carries that role.

    Suggestions for Improvement:

    • Ensure that interactive elements (currently marked as div) are accessible. Use <button> or <a> with proper aria-label attributes if the text content is not descriptive enough.
    • Add :focus styles along with :hover to improve keyboard navigation visibility.

    Responsive Design Assessment:

    • The CSS ensures that the card is centered and should render fine on different devices due to the use of percentages and viewport units.

    Suggestions for Improvement:

    • Test the layout at various breakpoints to ensure the card scales properly. Consider implementing media queries if the current setup does not suffice for all screen sizes, especially smaller devices.

    Code Quality Assessment:

    • The CSS is well-organized, using CSS custom properties would enhance the maintainability of the color and font styles.
    • The selectors are straightforward and the classes are appropriately named.

    Suggestions for Improvement:

    • Move CSS to an external stylesheet if it’s not already, for better separation of concerns and reusability.
    • Use CSS custom properties for color and other frequently used properties. For example: 
      :root {
  --primary-bg-color: hsl(0, 0%, 12%);
  --button-hover-bg-color: hsl(75, 94%, 57%);
}
.button {
  background-color: var(--primary-bg-color);
  &:hover {
    background-color: var(--button-hover-bg-color);
  }
}
    • Validate the CSS to ensure there are no syntax errors (e.g., missing semicolons or incorrect properties).

    The code effectively sets up a visually appealing social links profile card. Emphasizing semantic HTML and accessibility improvements will greatly enhance its functionality and user experience, particularly for those using assistive technologies. Adding responsive design elements will ensure the card looks good on all devices.

    0
  • David•60
    @Dav1dGPSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    What I am most proud of is the time and ease of doing this project.

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

    As with the QR project, the biggest challenge has been to center the container and make it responsive.

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

    Tips related to responsive are welcome.

    BLOG-PREVIEW-CARD with HTML and CSS

    3
    Omair Majid•100
    @BigO-DevPosted 7 months ago

    Semantic HTML

    Assessment:

    • You've used <main> and <footer>, which are semantic elements that help define the structure of the web page. This is good practice.
    • However, there's an error with a <p> tag incorrectly closed with </h2>. It should be properly closed with </p>.

    Suggestions for Improvement:

    • Correct the closing tag for the paragraph that starts with <p class="tag">Learning</h2>.
    • Consider using <article> for the card container to provide more semantic meaning to the content block which seems to represent an article.

    Accessibility

    Assessment:

    • Alt attributes are used for images, which is good for screen reader users.
    • There's an attempt to make the site navigable and informative, but some improvements can be made.

    Suggestions for Improvement:

    • Ensure that text contrasts adequately against the background to meet WCAG AA or AAA standards.
    • Use semantic HTML tags where possible to improve the structure and accessibility of the content.
    • The <div> with class "author" should use a proper <figure> and <figcaption> element for the avatar and its caption.

    Responsive Design

    Assessment:

    • The media queries are used to limit the width of the container on larger screens, which can help maintain the layout's integrity.
    • However, the fixed width (375px) and scaling might not be the best approach for all device sizes.

    Suggestions for Improvement:

    • Rethink using transform: scale(0.9) as this could lead to unpredictable layout results. Instead, use responsive units like percentages or viewport units for better control.
    • Ensure padding and margins are responsive, using relative units like percentages or em/rem rather than fixed pixels where possible.
    • Expand on your media queries to ensure the layout adapts well not just in width but also in spacing, font sizes, and other dimensions across different devices.

    Code Quality

    Assessment:

    • The CSS is organized with root variables, which is great for maintaining a consistent theme.
    • Some styles and properties are not optimally used or could be simplified.

    Suggestions for Improvement:

    • In .author, flex-direction: center; is invalid. If you meant to center items, use justify-content: center; and align-items: center; within a flex container.
    • Avoid using position: absolute; for the footer unless absolutely necessary. This can lead to content overlapping or being cut off on smaller screens. Consider alternatives like position: relative; or flex layouts.
    • Clean up any redundant semicolons and ensure CSS properties are valid and used correctly.

    Summary

    Your code is on the right track with a good use of CSS custom properties and semantic HTML elements. Focus on fixing the noted errors, improving accessibility features, and refining the responsive behavior of your layout to enhance usability and maintainability. This will lead to a more robust and user-friendly web page.

    Marked as helpful
    0
  • Omair Majid•100
    @BigO-DevPosted 7 months ago

    Review of HTML/CSS Code

    1. Semantic HTML

    Assessment: The provided HTML code is quite simple and does not make extensive use of semantic HTML elements. It primarily uses <div> elements for layout, which are non-semantic. While this is sufficient for a simple project like this, using more semantic elements could improve accessibility and the overall structure of the document.

    Suggestions for Improvement:

    • Replace <div> tags with semantic HTML5 elements where appropriate. For example, wrapping the main content in <main>, using <section> for the card, and <footer> for the attribution.
    • Using <header> for any headings or introductory content if added later.

    2. Accessibility

    Assessment: The code includes some aspects of accessibility such as the alt attribute on the <img> tag, which is good. However, there are areas for improvement.

    Suggestions for Improvement:

    • Ensure that the page is fully navigable via keyboard. This includes making interactive elements like links easily focusable and visibly highlighted on focus.
    • Use aria-labels where necessary to provide more descriptive labels for assistive technologies.
    • Avoid using overflow: hidden on the body, as it can cut off content and restrict the page’s navigability with a screen reader or when zoomed in.

    3. Responsive Design

    Assessment: The layout employs a basic responsive design using flexbox which centers the card and makes the website look good on various screen sizes. However, the fixed width of the card (250px) may be too small for larger screens or too large for very small devices.

    Suggestions for Improvement:

    • Use more responsive units like percentages or em for widths, and consider using media queries to handle different screen sizes more gracefully.
    • Test the layout on various devices to ensure that the content scales properly and remains accessible and readable.

    4. Code Quality

    Assessment: The code is generally well-structured and readable. Inline CSS in the <head> section is well organized, and classes are meaningfully named which is good for maintainability.

    Suggestions for Improvement:

    • Move the CSS to an external stylesheet to clean up the HTML file and further separate content from styling.
    • Increase the reusability of styles by grouping common styles together and using more utility classes if necessary.
    • Commenting both in HTML and CSS could be improved for better clarity and maintenance, especially for someone else reviewing or working with the code.

    Summary

    Overall, the code provides a basic, visually appealing QR code component with a decent start on accessibility. The improvements suggested would help make the page more semantic, accessible, and responsive, improving the overall user experience and maintainability of the code.

    Marked as helpful
    0
  • Omair Majid•100
    @BigO-DevPosted 7 months ago

    Overall, your project is well-constructed, with a clear structure and good style decisions. Addressing the minor issues below will enhance its accessibility and maintainability.

    • There's a typo in the <title> tag ("component" should be "component").
    • The <img> tag is missing an alt attribute. This attribute is crucial for accessibility as it provides a text alternative for screen readers.
    • The import of Google Fonts should be placed in the <head> section of your HTML to ensure it loads before your page content. This helps avoid a flash of unstyled content (FOUC).
    • Consider adding responsiveness through media queries if you expect the page to be viewed on different devices.
    • In your CSS for the paragraph within .text, you've used text p which is incorrect. It should be .text p to correctly select the paragraph within the .text class.
    Marked as helpful
    1