Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions6Comments71

All comments

  • ritik jain• 130

    @theritikshah

    Submitted

    Before starting this challenge I thought it gonna take 3-4 days, but it took me almost 3-4 weeks. If anyone has tips on being a productive programmer please let me know. Would really appreciate any feedback :)

    Ecommerce Product Page - React

    #react

    2

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Hi Ritik,

    The solution looks great on Desktop and Tablet mode ✨✨✨.

    The responsiveness can be improved between 770-1150px. The cart dropdown overflows the viewport when opened in this range..

    1
  • Veronica Ulrikkeholm• 40

    @veronisab

    Submitted

    My third project here, and the first one with JavaScript!

    Cannot say that I feel fluent in js at all yet, but it is so much fun when your can add new functionality!

    Interactive Rating Component

    1

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Hi Veronica,

    Great solution 🔥🔥!!!

    Just a few points...

    The selected rating does not go back to normal when I select another rating. You can do this by removing the "selected" class from all the buttons first, and then adding the "selected" class on the clicked element.

    The hover on Rating does not change the font color to white.

    0
  • Rachana Hegde• 155

    @rachanahegde

    Submitted

    Hi! This is my second challenge and I learned CSS grid through Wes Bos's course.

    1. As far as I can tell, I was able to replicate the UI design well with CSS grid but I'd appreciate it if you could let me know if there's anything I missed.
    2. I'm not sure whether I overused divs in my HTML code but it seemed like the best way to structure all the different aspects of the card. If there's a way to streamline this more, let me know.

    Please feel free to point out anything that needs fixing, I'm still familiarising myself with CSS. Thanks for your help! :)

    Order summary component using CSS Grid

    3

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    The font-family for the links(change, proceed payment and cancel) can be set to "Red Hat Display" to match the design.

    Not an overuse of ''DIVS" but some extra "buttons" that could have been just replaced with divs(plan-btn) or a tags(cancel-btn). Semantically speaking, buttons should be signifiers that something can be clicked.

    Marked as helpful

    1
  • Michelle• 20

    @michellewongi

    Submitted

    Hi I would love feedback on if my code is messy and any tips for improve writing clean code...

    I also have a technical question regarding how to make the width of the underline that pops out when my mouse hovers over the menu links shorter?

    Mobile First Page with Flexbox, Grid, and Vanilla js

    1

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    You have border-bottom for the underline so it will take the complete width of the text. For variable widths, you can use ::after pseudo element.

    You can also change .hamburger position from fixed to absolute, because the fixed hamburger appears even after scroll.

    You should set a fixed max-width on the .container so that it does cover the whole screen on bigger viewports.

    Marked as helpful

    1
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Looks good on desktop as well as mobile...

    Just around 1200px to the mobile breakpoint.. things are a little squeezed and start overlapping/overflowing. You can look into that area..

    Marked as helpful

    0
  • OK169• 605

    @olgak169

    Submitted

    Everything seems to be working, but if you find an issue or have a suggestion on how to improve my code, or just want to ask me a question, I will be happy to hear from you!

    Responsive tip calculator using JS, Sass

    1

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Great work man. ✌✌✌

    This is by far the best solution for this particular challenge that I've seen.

    Just a minor issue is that when changing the tip, the counter starts from undefined to and reaches upto the final calculated value. It's barely visible because of the speed of the counter but i thought I should mention it.

    Few improvements apart from this challenge would be to have a default tip and an active state for the bill input field after website load.

    0
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Okay so I looked into the issue regarding the radio buttons, tweaked some properties and may have found a fix.

    Use a border

    .selectionContainer_background .selectionContainer .rewards .csections .radio__control {
    border: .125em solid #bdbdbd;
//other properties
}

.circule{
height:23px;
width:23px;
//other properties
}

    This might center things exactly. Also, there can be an issue that will be resolved by removing the transform: translateY(1px);

    Marked as helpful

    0
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Set a max-width to your .card-container.

    The site looks good on both 1440px and 375px but is not fully responsive in the tablet sections. Also in these sections you will find the image is not covering the whole section of the container so you can try and use background images to fix those issues.

    Marked as helpful

    0
  • SnowFox• 100

    @ISnowFoxI

    Submitted

    I would like to know your feedback as I used this project to learn a bit about bootstrap. I think my bootstrap class naming is a bit off. I might have used some classes not correctly. So if you can let me know, that would be grand. 😃

    Responsive tip calculator, using html, sass, js, bootstrap.

    1

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    When typing a large amount(>99), the total/person amount is not completely visible due to overflow..

    Everything else seems good and Thank God you have used a default Tip(5%) selected before hand. One minor improvement you can do is just turn the state of Bill amount input field to active.

    Marked as helpful

    1
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Hey,

    The site perfectly matches on 1440px so kudos on that.

    But if we move to a larger screens or smaller screens, the site isn't fully responsive because you have a breakpoint on 1024px and a min-width:1440px

    On mobile view, use background-position:center with background-image:url(...) because the images(hero, transform etc.) are pushed down

    1
  • Tom• 245

    @tttinh

    Submitted

    Hello everyone,

    Hope you have a good day. This is my second exercise. I would like to receive any feedback or comment to help me improve my skills.

    Thanks so much.

    3-column preview card component

    1

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Few things to point out,

    1.Don't go to mobile view so early, you can shrink to upto 1000px and then go mobile

    2.You probably used outline property on hover because you didn't want the content to move the layout which would have happened in case you used border property.

    But the outline does not create a rounded hover but a rectangular one.

    A fix to that is.. use box-shadow: inset 0px 0px 0px 2px #fff; instead of a border or outline..

    Marked as helpful

    0
  • Siva kumar Katari• 150

    @sivakumarkatari2020

    Submitted

    Hello everyone, I think I developed this landing page as close to the design ,if you encounter any issues please let me know I will update. Thank you.

    Loop studios landing page

    1

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    The site is not mobile responsive.. so you can work on that.

    Also, set a max-width on your items as everything is stretched out on bigger viewports.

    0
  • Jose Chaparro• 455

    @jchapar

    Submitted

    Hello Everyone,

    One of my smallest yet biggest struggles was with the mobile css. On desktop, I have my container set as flex-box with the direction set as column. The two children inside are the columns div and attribution div. When I tried styling the mobile css, the attribution div kept staying in the center of the page. It would sit on top of the second (middle) column. I ended up simply putting the display to none but would love an explanation on what I could have done to still included it at the bottom.

    Thanks!

    Desktop First Solution Using CSS Grid and Flexbox

    1

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    The height of 100vh on .columns limits sets a fixed height on columns grid and therefore the attribution is placed right next to the end of the 100vh of the grid.

    Try using a smaller height viewport and you will notice that the attribution sits just after a smallest vertical scroll.

    Remove that height.

    That also does not fix the issue because the first card will go above the screen which is even more confusing.

    And that is caused by another 100vh given to the .container. Because you have centered the flex within a 100vh, such misalignment occurs.

    Remove both the 100vh and this will work fine.

    0
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    You have used position: absolute; on the Learn More button with a bottom:5%.

    This takes the button out of the normal flow of the card and fixes the button on the card. Changing the height of the button will not affect the height of the .items

    So, the content that remains in the card is just the SVG, the heading and the paragraph and the button is placed in the 5% padding given to .items

    When on smaller viewport, the value of 5% decreases, whereas the the dimensions of the button remain the same.

    Head over to my solution if you like, I've used flex in the card itself.

    Marked as helpful

    1
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    You card does not have a fixed height to begin with. All the content in the cards and the padding, margins etc. of that content make up the height of the card.

    Due to different content in the <p> tag as you said, the height of the card varies.

    One solution to this is

    Use a fixed height card.. And set flex on the card in the column direction. Then you can use the padding to position the elements in the cards. Can set padding/margin to auto if you want to use variable padding/margin.

    Marked as helpful

    0
  • Angela Lin• 10

    @xup6u600504

    Submitted

    I didn't figure out some challenges:

    1. how to use rounded corners for just the outline of the combined 3 columns?
    2. why my icons cannot show properly on the website?

    Please kindly advise me on solving those problems. If there is anything else I could improve, please also feel free to give me comments. Thank you.

    3-column-preview-card-component by using html and css in pycharm

    3

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    These 3 items are flex items... and you always want to keep them in a single row. So get rid of flex-wrap as that will push a single item out of the row as it does in viewport <1420px.

    For rounded columns, you can use one of the below

        border-radius: 10px 0px 0px 10px;
}
.column3{
    border-radius: 0px 10px 10px 0px;
}

    .flex-container>*:first-child
{
 border-radius: 10px 0px 0px 10px;
}
.flex-container>*:last-child
{
    border-radius: 0px 10px 10px 0px;
}
    0
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Set a max-width on the container as it stretches out on bigger screens.

    Everything else looks good.👍

    Marked as helpful

    1
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    On smaller screens, the buttons are overlapping the content of the card because of the absolute positioning given to them.

    Instead, use flex on the .items class so that you can position them in accordingly.

    Set a max-width to the cards as they keep on stretching on bigger screens.

    Marked as helpful

    1
  • glowes• 50

    @glowes

    Submitted

    Hi there!

    I would like to know how to add a gap in between the buttons without affecting to much the 'padding'/position of them , so they could have the same visual style as in the model(smaller and spread).

    Also if anyone had add the theme whats the best way to do so? changing the values by theme by adding a new class in Javascript or changing individual html elements.

    Thanks in advance, any constructive critics are welcome.

    Calculator app

    1

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    The reason why you had to use a padding-bottom of 100px on .inputContainer is because the grid is a little defective. You used percentages on your grid-template-rows and columns and a gap of 15px. The percentages would take up the the specified percent width and will not take into account the gap that you set in the grid.

    Use this instead:

    grid-template-rows: repeat(5,1fr);
grid-template-columns: repeat(4,1fr);

    This will create the exact grid you wan as it will take the gap into consideration and hen calculate the value of 1fr(Fractional Unit).

    Then you can easily change the whole grid size in order to set the buttons as you like.

    For the theme, use CSS variables in defining the basic colors of buttons, background, etc. and change them using JS on change of the theme switch.

    Marked as helpful

    1
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    Use 100% on body instead of 100vw because the 100vw is causing an overflow on the viewport <1400px.

    The reason is that a 100vw will not take into account the width of the vertical scrollbar, and thus 100vw+scrollbarWidth will create a horizonal scroll whereas 100% width will take the vertical scrollbar into consideration as well.

    I like the layout for the image being on top on smaller screens but the image is covering the whole viewport.. and the contend is pushed out. Might wanna look into that.

    Marked as helpful

    0
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    It really depends on the use case.

    If you want to place social icons in a row, go for flexbox. If you want to make something like a big area with cards like YouTube thumbnails, go for Grid.

    Marked as helpful

    0
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    It's responsive enough.

    But you can set a max-width to your cards so that on larger screens(>1400px), the card does not stretch too much.

    The <img> tag for the card image is making the image shrink at some screensize... Try using background-image instead.

    Marked as helpful

    0
  • Yashasvi Singh• 890

    @aUnicornDev

    Posted

    I liked that you are being honest about it.😂

    0
  • Grojd• 40

    @Grojd

    Submitted

    What units (px, %, em, rem) should I use? Thank you <3

    Practice

    2

    Yashasvi Singh• 890

    @aUnicornDev

    Posted

    I was of the same mentality where I wanted to use a single/two unit(s) for all the measurements. But after some experience, realized that units of measurement are made for a reason. To apply them where they fit the most. There is a reason we have meters and centimeters(we can easily measure everything in Centimeters if we want to.)

    Marked as helpful

    0