Skip to content
OverviewSolutions
13
Comments
18
Durban86
@Durban86

All comments

  • Durban86•320
    @Durban86Posted over 1 year ago

    Trying to figure out these accessibility errors. I have the role and alt attributes in the icon tag, not sure why i'm still getting the errors.

    0
  • MIRZA ZEESHAN BAIG•40
    @Mirza-ZeeshanSubmitted over 1 year ago

    Please provide your valuable feedback on my project. Specifically, I would like to know the following:

    1. How is the overall look and feel of the project?
    2. Is the content clear and easy to understand?
    3. Are there any suggestions you have for improving the card design or user experience?
    4. Are there any areas of the project where you experienced difficulty or confusion?

    Thank you! for your valuable feedback.

    Responsive Results Summary Component

    2
    Durban86•320
    @Durban86Posted over 1 year ago
    1. The look of the project is very nice
    2. Content clear and easily understood
    3. I think you nailed it, for what the project is, not much to improve on.
    4. Some issues I had were the spacing on the summary icons and titles spacing between the scores.
    0
  • Durban86•320
    @Durban86Posted over 1 year ago

    The transitions are so smooth!

    0
  • Sideshow-Dad•10
    @Sideshow-DadSubmitted over 1 year ago

    I'm still getting a feel for CSS. Its not my strong suit. I definitely struggled when it came to getting my container centered up on the page. But I'm happy with how it turned out, feels pretty close to whats been asked.

    QR Code Component 1st attempt using Flex

    1
    Durban86•320
    @Durban86Posted over 1 year ago

    Looks good, nice job.

    In the future, you're going to want to write your css in it's own file. most people call the file style.css and then they link it in the head of the HTML document like this:

    <link rel="stylesheet" href="style.css">

    Also, you should keep the html page named index.html

    Marked as helpful
    1
  • Isaele Araújo•20
    @IsaeleAraujoSubmitted over 1 year ago

    Hi, guys. God I took like 2 weeks to build this, LOL. It's my first time doing a page with HTML and CSS complete alone without following a tutorial. So, please let me know how to put this little shapes 'cause I don't know how.

    Qr-code (first solution using CSS )

    2
    Durban86•320
    @Durban86Posted over 1 year ago

    For starters in your HTML file and fix the accessibility errors.

    Line 11 - you need to change that to a <main class="container"> and make sure to change the closing tag in line 22 to </main>

    Line 15 - you need to add an alt attribute to your img tag that describes your image. so for this project you can add alt="QR code"

    Line 16 - you need an h1 tag, so change it from h4 to h1

    Line 17 - change from h5 to p

    Other than those easy fixes, it actually looks pretty good. You could probably do without so many divs so your content isn't so nested maybe something like this to make it more readable:

    <main class="container">
  <img src="./images/image-qr-code.png" alt="QR code">
  <h1>Heading</h1>
  <p>Paragraph</p>
</main>
    Marked as helpful
    1
  • Sarah Soares•30
    @sarahsoaressilvaSubmitted over 1 year ago

    1.What did you find difficult while building the project?

    • The first difficult was how to change the image without using background-image using url(), because I wanted to use the alt description for accessibitity.

    • The second was how to do the padding at mobile version, since mine does not show the background behind the card.

    2.Which areas of your code are you unsure of?

    • I will find a better way to create the responsive version on the future without media queries using just CSS Grid.

    Product Preview Card Component v1 - HTML, CSS, BEM CSS

    1
    Durban86•320
    @Durban86Posted over 1 year ago

    Looks good except one small problem. Both the desktop and mobile images display next to each other when the viewport has a width of 681 - 699. You need to change line 141 of your CSS to @media (min-width: 681px) {

    This way you have no overlap where things may break, otherwise, it looks very nice

    Marked as helpful
    1
  • ashleyftw•120
    @ashleyftwSubmitted over 1 year ago

    had some trouble with the background pattern... for some reason I had to add a transparent border to the body in order for the background pattern to show up at the right position. Did anyone run into this issue?

    Also would love feedback on how to organize media query better. Thanks!

    responsive page using SCSS and flexbox

    1
    Durban86•320
    @Durban86Posted over 1 year ago

    An easy way to set up the background is putting this in your mobile media query

    body {
        background-image: url(images/bg-pattern-top-mobile.svg), url(images/bg-pattern-bottom-mobile.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: top left, bottom right;
    }

    And this in your desktop media query

    body {
        background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: top left, bottom right;
    }
    Marked as helpful
    0
  • stain-i•10
    @stain-iSubmitted over 1 year ago

    I managed to do the HTML but had a bit of a challenge styling the image. Apart from that it was a bit confusing for a first timer to add the solution link and the live link to the README file, I have tried though.

    Is it possible to style the image with CSS only? What are some of they stylings used? The terminologies and values used How does someone attach the screenshot to the README file?

    Qr code component attempt using HTML and CSS

    2
    Durban86•320
    @Durban86Posted over 1 year ago

    This is a simple project, you don’t need a full reset in your CSS..

    You have some repeating code in the CSS, try refactoring it. For example all the same text styles (font family and line height) put in the body.

    Learn flex box Complete Guide to Flexbox it’s going to help you layout elements easier.

    Also you should use a main tag instead of a section tag in your HTML.

    Probably don’t need the .index in your class names

    As far as naming files, you don’t need the QR in the file names if you have your project organized.

    To create a live version of the code, you need to go into setting of the repository on GitHub, then click pages and deploy it from the main branch

    1
  • Stoica Claudiu•300
    @llr3v0llSubmitted over 1 year ago

    It's not really visible, but if you change the background color from white to something else you can see that when <main> wraps there are 2 white "gaps" with purple background and diagonal stripes. I've tried to search how can I get rid of those and match the size of the content inside but the only thing I found was the " gap: 0;" thing, but that doesn't work. If anyone knows how can I fix that please let me know, and if you didn't understood what I was trying to say please say so I can explain again haha.

    Result summary challenge with weird a*s wrap

    1
    Durban86•320
    @Durban86Posted over 1 year ago

    It looks really good to me, I tried changing the background colors of main and of body, I didn't see anything that you're describing.

    The only thing I notice for the mobile version is your top corners shouldn't be rounded.

    Great job!

    0
  • Durban86•320
    @Durban86Posted over 1 year ago

    Ok an error I found was in your HTML

    Line 13: change the img id to "product-img"

    and then remove "#product-img-desktop" from Line 125 of your CSS

    Doing so will at least make every element visible for mobile, it doesn't look as nice as your desktop view which is very nice. I think you might have an easier go of this using flexbox instead of grid. Best of luck, well done on the desktop layout.

    Marked as helpful
    0
  • Durban86•320
    @Durban86Posted over 1 year ago

    Your background images are not positioned correctly

    remove the background images from the wrapper class and add this to the body

    body {
        background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: top left, bottom right;
}

    Also, there is no mobile version, the layout breaks for small screen sizes.

    Marked as helpful
    0
  • Durban86•320
    @Durban86Posted over 1 year ago

    Nice work, came out nearly identical to the design.

    Marked as helpful
    0