Skip to content
OverviewSolutions
12
Comments
8
Agustin Sanchez
@AgusSaMac

All comments

  • Zascu•140
    @ZascuOfficialSubmitted over 1 year ago

    Hello, everyone!

    This is my solution to the profile card component challenge. It only misses one single thing, the background patterns, and that is because I couldn't figure out how to make them scale up and down when the window shrinks in width (to make them responsive).

    I guess that's the only question I have this time around haha, so thank you to anyone who decides to respond this time again. Have an amazing day!!

    Profile Card Component built with semantic HTML and responsive SCSS

    1
    Agustin Sanchez•250
    @AgusSaMacPosted over 1 year ago

    Hello Zascu,

    Congratulations on finishing the project,

    To address your question regarding the background patterns you should set them up using background-image in the body selector. This is the block of code I used for setting up the patterns:

        background-origin: content-box;
    background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
    background-position: top -50rem left -75rem, bottom -50rem right -75rem;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;

    Now for making it responsive I just adjusted the position values according to the screen width:

    @media (min-width: 768px){
    body {
        background-position: top -40rem left -60rem, bottom -40rem right -60rem;
    }
}
@media (min-width: 1000px){
    body {
        background-position: top -40rem left -45rem, bottom -40rem right -45rem;
    }
}
@media (min-width: 1440px){
    body {
        background-position: top -40rem left -20rem, bottom -50rem right -20rem;
    }
}

    I leave you the link to my solution if you like to check it: AgusSaMac profile card code

    Have a great day! Happy coding!

    Marked as helpful
    1
  • Agustin Sanchez•250
    @AgusSaMacPosted about 2 years ago

    Hello Adarsh, first congratulations on finishing a new challenge. There are some details I observed.

    • When hovering over the a non active question, the text color doesn´t change.
    • Also the box is misalligned to the left in comparison to the design.

    Hope this helps.

    Have a great day,

    Keep coding!

    0
  • Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello! Congratulations for finishing your challenge! Here's some feedback:

    • The attribution should be moved at the end of the html just before the closing </body> tag, and change it to <footer>. Atributions and legal disclaimers are usually part of the footer.
    • Try to always link the attribution to your profile. This is a good practice for the future, so potential employers and/or clients may have a way to contact you.
    • Change the <section> tag for <main>.
    • use a <h1> tag instead of <h4>.
    • You have an html issue in the image source, change \ for /.

    Now on the css part.

    • You were going great when you applied the box sizing as border box, just add a box-sizing: inherit, check: https://www.paulirish.com/2012/box-sizing-border-box-ftw/.
    • Also to the html tag add a font-size: 62.5% this is to make 1rem = 10px.
    • I would recommend against using static units like px, cm and such, because screen sizes vary continously, if you leave them static, it may cause problems with some screens.

    I hope it helps.

    Happy coding!

    Have a great day!

    Marked as helpful
    0
  • Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello Ivan congratulations on completing the challenge!

    I noted some things on your solution:

    • Be mindful of your reports. you have a couple of issues there.
    • You used two massive media queries, it would have been better if you wrote your code for mobile outside the query and just use the media query to expand to the other design.
    • On the same line, instead of one big media query, break it in several small chunks. It will be easier to mantain that way as your code grows larger.
    • You forgot give the proper font-family to the prices, and make smaller the original price.
    • The image is not centered on the desktop view. Just change your with in the card-sec-one from 40% to 50%. that should take care of that problem.
    • For the issue with the button on that same view, remove the margin-left and change your width=100% for min-width=80%

    Hope it helps,

    Keep it up and happy coding!

    Have a great day!

    Marked as helpful
    0
  • Gabriel Ojeaga•40
    @Gabriel4PFSubmitted over 2 years ago

    This is my first frontend Mentor project, I am trying to solidfy my knowledge of HTML and CSS, by doing more Practical Projects, I had a little bit of a hard time trying to resize the image properly for the different screen sizes.

    I am relatively satisfied with how the Card responds to different sizes, If you have any feedback on what I can do to improve or any comments please feel free and let me know

    Response Card Component page made using CSS and HTML

    3
    Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello Gabriel, congratulations for finishing this challenge, here's some feedback:

    . When using tags on html try and avoid using div unless there's no other option. you used one at the very beginning a <main> tag would be better. See https://www.w3schools.com/html/html5_semantic_elements.asp for more info.

    • On your CSS file you use too many tags at the beggining. I suggest you use normalize.css to achieve the same result.
    • Also many tags have their properties modified, but they arent used in the html. If you don't use them, don't bother with them. It will keep you code cleaner that way.
    • When the card is in a mobile screen size it isn't centered. Use justify-content: center in your media query for the wrapper class.
    • Try and apply the mobile first approach. Then just use media queries to modify them for other sizes.
    • I suggest you use several media queries, try and avoid writing all that code together, it would be easier to maintain and read afterwards if you have the queries separated by their class.
    ..container {

}
@media (max-width: 500px) {

}
    • Lastly, remember to keep you indentation.

    I really hope it is helpful,

    0
  • Trae Zeeofor•490
    @traezSubmitted over 2 years ago
    1. Hello all, this is my very first project, and the beginning of my portfolio.
    2. Please help review and state any corrections necessay.
    3. I have just noticed the Accessibility issues (lack of landmarks). Point well taken and will correct for subsequent challenges.

    @traez's QR code component page using HTML and CSS

    1
    Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello Trae, congratulations on finishing your first challenge, here's some feedback:

    • You have 3 accessibility issues you should deal with them.
    • You used a div for the main elements, use instead the <main> tag.
    • For your footer, use the <footer> tag instead of a span.

    Check https://www.w3schools.com/html/html5_semantic_elements.asp for more info about html semantics.

    Best of luck in your coding adventure.

    Have a Great Day!

    Marked as helpful
    0
  • Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    The solution in visually looks good, there are just some things I noticed.

    • When looking it in the live site without the inspect window the solution isn't in the center.
    • Also the image doesn't change to the mobile version.
    • Check your reports you have some accessibility issues and html issues.

    Check this link for more on fixing those reports you have: https://www.w3schools.com/html/html_basic.asp

    Have a great day!

    Marked as helpful
    0
  • Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello, congratulations for finishing your project!

    Here's some feedback:

    • Check your accesibility issues and html issues you seem to have quite a few of them.
    • For coding CSS, use a second file named Styles.css and link it to your html, this is for ease of reading, both for you and any other programmer that checks on your code.
    • The background color should be covering the entire space, for this try and declare it in the body { } element.
    • I would advise you use flexbox or grid for this challenge.

    Hope this is helpful, and all the best in your coding adventure!

    Have a great day!

    Marked as helpful
    0