Skip to content
OverviewSolutions
21
Comments
4

vintech05

@vintech05370 points

we all started somewhere else.

Latest solutions

  • advice-generator

    #accessibility#pure-css
    vintech05•370
    Submitted 9 months ago

    i think the dice button functionality could have handled better rather than reloading the window everytime we want another advice. let me know what you think is the best approach for this.

    im open to suggestions.

    0 comments

  • tip-calculator-app

    vintech05•370
    Submitted about 1 year ago

    the implementation of calculateTip seems to be a bit challenging for a junior level honestly but overall experience teaches us a good lesson about why and when to use operators. that is why i think the calculations are a bit off from my perspective(UPDATE: the calculations now are fixed after skimming people github source codes to try understand the logic). goes to show that you can actually learn from anywhere!

    1 comment

  • calculator-app

    vintech05•370
    Submitted about 1 year ago
    0 comments

  • Blogr-landing-page

    #tailwind-css
    vintech05•370
    Submitted about 1 year ago

    the part where we have to set the images and the text to be displayed inline but with a little twist, the image has to be absolutely aligned to the left or the right with only half portion of the image to be visible on screen without overflowing. any idea how to achieve the same design without shifting the layout with the most efficient way possible?

    any suggestions are welcome!

    0 comments

  • blog-preview-card

    #bem
    vintech05•370
    Submitted over 1 year ago

    I'm open to suggestions :)

    1 comment

  • easybank-landing-page

    #tailwind-css
    vintech05•370
    Submitted over 1 year ago
    0 comments
View more solutions

Latest comments

  • vintech05•370
    @vintech05

    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
  • vintech05•370
    @vintech05

    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
  • vintech05•370
    @vintech05

    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

  • vintech05•370
    @vintech05

    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