Skip to content
OverviewSolutions
4
Comments
7
Connor McLaughlin
@Gingerlox

All comments

  • SITRAKA Tsimisaraka Joliot•70
    @Joliot-TSIMISARAKA
    What are you most proud of, and what would you do differently next time?

    I'm not particularly proud of any particular section of my code as I'm still far away from being proficient enough to be confident in css. But I hope that for the upcoming projects, my code will be clean and concise enough

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

    The real challenges that I encounter was when I tried to combine margin and padding around the element in order to get the correct result. There is also git and github, topics I haven't touched upon before

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

    Writing better and cleaner css code as to avoid repeated element calls

    Centered QR component using css flexbox

    #accessibility
    2
    Connor McLaughlin•120
    @Gingerlox

    Looks really good! Almost perfectly sized to fir the design!

    I see you have issues on how to best deal with padding and margin. Now I'm no pro, but how I think about it is this:

    • Use padding for borders and styling e.g making an <a> look like a button.

    -Use margin for layout stuff, like creating space between elements and centering.

    Marked as helpful
  • Connor McLaughlin•120
    @Gingerlox

    Looks great! Pretty bang on compared to the design in desktop view.

    Feedback:

    1. The mobile view is a bit off compared to the design spec (image not taking up full width, left in border radius ect. Be sure to look at the design for the mobile view and have another crack at this. Media queries helped me with this.

    2. Your CSS could be structured a bit better. What I try to do is start mobile first, start from the top of the page, and apply styles and layout properties as I move down the page. Not sure if this is best practice, however it seems to keep my head straight when moving through it.

    Cheers!

  • Connor McLaughlin•120
    @Gingerlox

    Great solution! Everything seems well structured, and I like how you grouped all your buttons together.

    One bit of feedback:

    Avoid using buttons when you are not submitting data to a form. The correct element to use in this situation would be <a>, then you can simply style it to look like a button. :)

    Marked as helpful
  • Connor McLaughlin•120
    @Gingerlox

    Looking good!

    One bit of feedback is on the mobile view, the edges of the container a quite close to the edge of the view port. You could have done on your container "blog-card" :

    width: 80% max-width: 400px

    This would keep a nice bit of space around your container in mobile view, but stop it from stretching on desktop view.

    I can also see you have <blog-card> as an actual html tag. Unless there is something I do not know, this is not a valid element name. You should have maybe used <main> or <div> with a class of .blog-card?

    Great solution!

  • Connor McLaughlin•120
    @Gingerlox

    Nice solution!

    I would recommend having your styles in a separate stylesheet. Makes things easier to manage.

    You could have also centered your component perfectly by using the below on your container:

    Display: flex Justify-content: center Align-items: center

    Marked as helpful
  • Carlos Ojeda Avendaño•30
    @Carl-code
    What are you most proud of, and what would you do differently next time?

    I am proud of the work done, I want to be able to improve and I am very enthusiastic about achieving it, next time I would improve with the feedback you can give me.

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

    To many it seems like a simple project but it is quite the opposite for someone without experience, for example the mobile view I had to research mediaqueries css to be able to make it responsive, and also how to sit the entire card in the center of the screen.

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

    I would like you to help me know if my code in general is good, and also in the uses of measures and flexbox

    QR Code Component with flexbox css

    #pure-css
    2
    Connor McLaughlin•120
    @Gingerlox

    great solution!

    Love that you used custom CSS properties, and managed to avoid using media queries.

    One thing to note, I think as you have justified and aligned on your container class, there should be no need for margin: 0 auto.

  • Vozmo•60
    @V0zmo
    What are you most proud of, and what would you do differently next time?

    Doing the layout with Flexbox. For me, the hardest part of learning HTML and CSS is how Flexbox works, and how to contain HTML elements that is useful. Maybe with the next project, I should learn how to better contain elements and use Flexbox correctly.

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

    Not knowing the CSS element to use, the responsive layout with Flexbox, and the @media queries for mobile view are quite challenging. How I solve this is; for the CSS element I can search through the W3School website, layout can be done with in-depth learning through articles, website, or even video, the media queries is knowing what element needs to be changed.

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

    The layout responsive, especially with @media queries, any classes that contain 'display: flex' and the div classes element. What is the optimal way to do it and how to approach it differently optimize the code, clean the code, and also easy to understand.

    QR code component solution | HTML, CSS, Flexbox

    1
    Connor McLaughlin•120
    @Gingerlox

    thank for your comment on mine!

    this looking great also, love the hover effect. one thing i would suggest is trying to avoid media queries if you don't need to. work mobile first, then add complexity for wider screens. I used the width and max width attributes together on my container to avoid the component stretching :)

    Marked as helpful