Skip to content
OverviewSolutions
2
Comments
20

jerry

@realsalePhilippines300 points

DUMB!, pretending to be Jerry...

Latest solutions

Latest comments

  • jerry•300
    @realsale

    Yo! @shaswatsingh19,

    Congrats submitting your solution to this design, it's a great start

    You're solution is actually responsive, and you're following desktop first approach, and I've notice you're aligning your component with the old approach using margin auto on left and right, there's nothing wrong in that especially in simple layouts, however its hard to create complex layouts with that approach.

    In terms of responsive web design I recommend learning the following:

    • @media query as it allows you to add breakpoints which you can use to target specific screens, devices, dimensions, orientations etc. Using media queries
    • mobile first approach when doing responsive web design, It is recommended to design the mobile first before moving on the larger devices(This will make the page display faster on smaller devices) How to write mobile first
    • flex and/or grid as these are the modern layout approach Beginners guide to flexbox | Beginners guide to grid
    Marked as helpful
  • jerry•300
    @realsale

    Yo! @MrSkyner,

    Congrats submitting your solution for this design.

    The obvious thing that might need refinement is your alignment, I've noticed you haven't use flex nor grid and hardly relied on margin and some fixed dimensions.

    I recommend you to try and learn flex and/or grid as these are the modern layout approach Beginners guide to flexbox | Beginners guide to grid

    Also you don't have to explicitly define the containers height, Just set the similar width as the design, and let the image take the half of it and leave image height: auto, This will keep the image proper aspect-ratio

    Marked as helpful
  • jerry•300
    @realsale

    Yo! Kate,

    First of all congrats submitting your solution, It wasn't bad at all.

    Regarding to your question:

    1 To make a shadow looks like a gradient or fading same as the background, I use the original background-color and adds three layers of it with different sizes and lightness using the hsl

    .component {
  box-shadow:
    0 0 45px hsl(217deg 54% 11%), // largest layer, same color and lightness
    0 0 35px hsl(217deg 54% 9%), // middle layer, same color with decrease lightness
    0 0 20px hsl(217deg 54% 6%) // inner layer, same color and the darkest
}

    2 There's a couple of way place an image and a text content together, One way is using flex, Setting display property to flex allows you to use other flex container properties e.g. justify-content|align-items etc. that can be used to manipulate and controls flex-items(children)

    Beginners guide to flexbox

    // markup
<div class="tag">
  <img src="./some/path" alt="foo" />
  <p class="tag__details">Foo bar</p>
</div>

// style
.tag {display: flex; align-items: center;}
.tag__details{margin-left: 6px;}

    3 Make sure you set your image dimension length equal both in width and height, then set the border and border-radius: 50%;

  • jerry•300
    @realsale

    Yo! @VicenteJ20,

    Congrats completing your first challenge, the design looks similar.

    Here are some adjustment you might consider:

    • scale down your components dimension, decrease some width
    • same goes with the main heading, decrease font-size a little bit
  • jerry•300
    @realsale

    Yo! AxL ⊂(◉‿◉)つ,

    You've properly aligned your component, great

    The obvious adjustment you need to make is

    • adjusting components dimension width
    • increase padding around the details
    • increase font-weight in main heading and button
    • add some box-shadow

    And also don't forget to address some html issues in report.

    Marked as helpful
  • jerry•300
    @realsale

    Yo! @Waldoozki,

    Great job completing this challenge a little refinement and it will look exactly the same.

    • A little adjustment in components width
    • Increase heading font-size
    • remove padding in details wrapper
    Marked as helpful
View more comments