Skip to content
OverviewSolutions
5
Comments
6

Sania Saleem

@codeBloom361Pakistan110 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Mawel Abellana•140
    @maomaoXD
    What are you most proud of, and what would you do differently next time?

    I used the mobile first approach. I'll do it again this practice in next project.

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

    I have problem with grid layout using sass.

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

    Sass and BEM.

    Mobile first approach using Grid Layout

    #accessibility#bem#sass/scss
    1
    Sania Saleem•110
    @codeBloom361

    Great job completing this challenge. Your code is well written, and your design is the same as the challenge. Here is some info about BEM:

    • BEM stands for Block Element Modifier.
    • We give elements a class according to BEM like this: <main class="main"><h1 class="main__heading--1"></h1></main>
    • In this example, .main is a block, .main__heading is an element, and .main__heading--1 is a modifier.
    • Main is block, heading is element, and 1 is modifier. And we write it like the example above. Hope this helps!
    Marked as helpful
  • sj•100
    @subjectiverealityy
    What specific areas of your project would you like help with?

    Could you tell me if my code could have been cleaner, more professional or more efficient? If yes, how so?

    qr-code-component

    1
    Sania Saleem•110
    @codeBloom361

    Great job completing this challenge. Here are my suggestions:

    • You can use CSS variables for background colors and font colors. It will make CSS more reusable and efficient.
    • You can use media queries for responsive layout. You can set width and height with media queries for different devices.
    • Use semantic HTML for accessibility. Your code looks good and clean. Well done!
    Marked as helpful
  • Gabriel•40
    @4ndradeGabriel
    What are you most proud of, and what would you do differently next time?

    • HTML5:

      • Implemented semantic elements like <main> and <section>, and to enhance document structure.
      • Applied ARIA labels to provide better context for assistive technologies (e.g., aria-label="Instructions").
      • Used descriptive alt attributes for images to support screen readers and improve accessibility.

    • CSS3:

      • Utilized CSS Grid and Flexbox to create a responsive and well-structured layout.
      • Applied CSS variables :root for better maintainability of colors and consistent theming.
      • Styled list markers with ::marker to differentiate list items visually.
      • Used media queries to ensure the layout adapts correctly on smaller devices.

    • Accessibility Enhancements:

      • Ensured accessible navigation by adding ARIA labels to key content sections like ingredients, instructions, and nutritional information.
      • Adjusted color contrast between text and background based on WCAG guidelines.
      • <ul> and <ol> tags are used for the ingredients and instructions, ensuring that screen readers can properly interpret the sequence of items.
      • The use of <section> elements to group related content (e.g., recipe image, preparation time, ingredients, instructions, and nutritional information) improves document structure, making it easier for users with disabilities to navigate the page.

    • Responsive Design:

      • Adopted a mobile-first approach, ensuring compatibility with various screen sizes.
      • Applied max-width: 800px to prevent content from becoming too wide on larger displays.
      • Utilized place-content: center with CSS Grid to center the content both vertically and horizontally.

    Used HTML5, CSS3(Grid), Google Font, vars, and ARIA for accessibility.

    #accessibility
    1
    Sania Saleem•110
    @codeBloom361

    Good job completing this challenge. Your solution looks good and the code is clean.

  • Annalyza106•190
    @Annalyza106
    What are you most proud of, and what would you do differently next time?

    I took the creative liberty to add some icons into the design as well as some styling while still keeping the color palette and typography as close as possible to the original.

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

    Some moments of struggles was encountered when I was trying to position the contents of the links inside the buttons. Fortunately I was able to find some codes written by other people that helped immensely.

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

    Media queries are still a concept that I'd like to be more experienced in.

    Social Links Profile Challenge

    #pure-css
    1
    Sania Saleem•110
    @codeBloom361

    Your code and project look great. Well done on completing the challenge.

  • Hossana Monday•40
    @hossygifty
    What are you most proud of, and what would you do differently next time?

    this was one of the fun thing i have done, i didn't really find it difficult because i now understand the concept of card

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

    creating the side side shadow effect for the box i asked Chatgbt for help

    responsive blog preview card using html and css

    #accessibility
    1
    Sania Saleem•110
    @codeBloom361

    Great job completing this challenge! Here are my suggestions: Using the font-weight property, you can make the heading bolder, making it look more like the design.

    • Avoid using unnecessary media queries. Adjust the height and width for mobile first, then add the media query for desktop.
    • Use CSS variables for background color and font color etc. It will make it more reusable and manageable. With that, your code will be more efficient and accessible.
    Marked as helpful
  • Sania Saleem•110
    @codeBloom361

    Hi, Good job completing the challenge. Your code looks great and well-structured.

    Here are some suggestions that you may like:

    • Adding media queries will improve the responsiveness. You can add media queries specifically for screen size like 320px or 1440px.
    • You can align the <p> and <h> element with line height property. Hope you like these suggestions. Good luck on your coding journey. Happy coding!