Skip to content
OverviewSolutions
21
Comments
4
vintech05
@vintech05

All comments

  • océane•250
    @Ocece77Submitted over 1 year ago

    What did you find difficult while building the project?

    -- That's stupid but the difficult thing was to setup the background. Because the starter pack has 2 background image, I thought I had to make the two images fit together like a puzzle, when in fact I had to choose one, place it at the top of the page, then apply a blue background color 🤦🏿‍♀️

    Which areas of your code are you unsure of?

    -- My media queries because when I shrink my page, my container becomes weird haha, but when I look at it with the firefox development tool on different devices, my media queries work correctly 🤨I need to practices my media queries😪

    Do you have any questions about best practices?

    Yes , especially about media query ! 🧐

    Using Flex and Grid !

    2
    vintech05•370
    @vintech05Posted over 1 year ago

    Ayy, Nice Work!

    I have been there before, media queries can be a troublesome when it comes to measuring your web page into different screen devices. also, one thing to pay attention for is the cross-platforming. so far so good from the browser I'm using right now (microsoft edge) as for the best practice is to read other people's code and try to implement it on your own.

    feel free to learn more from my code! company-stats-challenge

    here's the breakpoint for screen width I have been paying attention for, bear in mind that overengineering your media queries will result in significantly messy design and it can frustrates you so try your best to avoid that!

    widescreen desktop: 2560px

    wide laptop: 1440px

    laptop:1024px

    tablet: 768px

    mobile: 425px

    those are the breakpoints for each devices, the width might be vary for every browsers but one thing to keep in mind is that make sure to use the mobile-first approach for your coding sessions. make yourself comfortable with that.

    for the code itself, its readable but it would be better to use the dynamic unit measuring such as em,rem rather than the static one px as to not wasting too much time to scaling your layout

    CSS Unit

    last thing tho, make sure use the semantics html structuring so the browser can easily read your web.

    semantic HTML

    Marked as helpful
    1
  • SooperChiller•60
    @SoopChillerSubmitted over 1 year ago

    As I become familiar with flexbox and grid, I constantly wonder if I'm using too many divs or not enough?

    This one was pretty straight forward, but am curious if my html organization falls under 'best practice'? Either way how can I improve?

    Any feed back is always appreciated. Thanks!

    QR-code-component

    2
    vintech05•370
    @vintech05Posted over 1 year ago

    As I become familiar with flexbox and grid, I constantly wonder if I'm using too many divs or not enough?

    • very nice! it was easy to read since the div usage is very efficient and straightforward

    This one was pretty straightforward, but am curious if my html organization falls under 'best practice'? Either way, how can I improve?

    • there is no perfect way to structure your html but one thing for sure:
    <body>
<main>


</main>
</body>

    do not forget the 'semantics' structuring for HTML. that way, the browser can easily identify or read your web. divs can be tempting because of its versatility but you have to make sure your web can be more readable for users.

    semantic HTML

    hope this helps.

    Marked as helpful
    1
  • Tanobia•90
    @TanobiaSubmitted over 1 year ago

    I am not sure if using positioning was the right step even tho it gave me the result I wanted. Any different methods and feedback is appreciated.

    profile-card-component-main

    1
    vintech05•370
    @vintech05Posted over 1 year ago

    Greetings Tanobia,

    Congratulations on completing this challenge! One thing to appreciate though, is that your code looks easy to read! but also I believe there is a bit of CSS overengineering here...

    instead of repeating yourself with multiple lines of border-radius, you can simply use CSS one-liners such as

    border-radius: top right bottom left;

    last thing, you don't want to stress yourself with positioning, especially for the avatar. this is when pseudo-class comes into play:

    .avi {
border: solid 5px;
border-radius: 50%;
border-color: aliceblue;
position: relative;
}

.avi::before {
content: ' ';
top: 0;
left: 0;
position: absolute;
background-image: url(/images/card-bg);
width: 100%;
height: 50%; //this one may vary so feel free to explore the height yourself!//
}

    so make sure the bg-image is inside the avatar! and the rest of it is going to be a cakewalk.

    I hope this helps

    0
  • Mikhail•440
    @MikeBeloborodovSubmitted over 1 year ago

    I am not sure about my approach to make the provided image having a purpleish tint. I used a div with a purple background with the picture on top and then lowered the opacity of the picture. Is this the best practice?

    Stats preview card component using HTML and CSS only

    1
    vintech05•370
    @vintech05Posted over 1 year ago

    Greetings Mikhail,

    I, too, faced the same problem during the making of the purple tint. but I found one solution that makes it less stressful. Let me give you a heads-up.

    using the mix-blend-mode property in CSS would greatly help you in finding its exact saturation and colors. also if you want to be more precise, you can use the filter property instead!

    img {mix-blend-mode: overlay;}

    filter

    filter converter

    mix and blend

    I hope this helps!

    Marked as helpful
    1