Skip to content
OverviewSolutions
26
Comments
10

arogersrenee

@arogersrenee330 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • arogersrenee•330
    @arogersrenee

    I general go with the mobile first approach. It's easier to build upon rather than takeaway if you start with desktop.

  • arogersrenee•330
    @arogersrenee

    updated my JavaScript. Added functions to calculate the healthy weight ranges.

  • arogersrenee•330
    @arogersrenee

    Gradients & Drop shadows

    Are you using the Figma files? The gradients and box shadows needed are provided with the design. Figma provides the styles when in dev mode.

    Bottom Grid

    For the bottom portion I used a 12-column grid and positioned the items where I wanted them using grid-column.

    Here's a snippet of the css I used to position the items:

    .limitations-card,

.limitations-card:last-child { grid-column: span 4;}

.section-bmi-limitations  >  div:nth-child(3) { grid-column: 8 / span 4;}

.section-bmi-limitations  >  div:nth-child(4) { grid-column: 5 / span 4;}

.section-bmi-limitations  >  div:nth-child(6) { grid-column: 3 / span 4; }

    I think my HTML and CSS are good. Don't look too much into the JS 😅 Take a look at my solution here: https://www.frontendmentor.io/solutions/body-mass-index-calculator-L_mIraAuz0

    Custom Variables Take a look at how I set up my classes and use the custom variables. I think what's making it hard for you is that you are making a unique class for each custom variable. Try making one class and style that using the custom variables. For example:

    .limitations-card-heading {

font-size: var(--fs-heading-S);

font-weight: var(--fw-semibold);

line-height: var(--lh-heading);

letter-spacing: var(--ls-heading-S);

color: var(--clr-gunmetal);

}
  • arogersrenee•330
    @arogersrenee

    For the color over the image, trying using box-shadow: inset ...... (see link below)

    "The box-shadow has a property value called inset, which causes the shadow to appear inwards of the frame of the box." This combined with a color with a lowered opacity will give you the effect that you want.

    https://www.hongkiat.com/blog/css-only-overlays-box-shadow/

  • arogersrenee•330
    @arogersrenee

    For the color over the image, trying using box-shadow: inset ...... (see link below)

    "The box-shadow has a property value called inset, which causes the shadow to appear inwards of the frame of the box." This combined with a color with a lowered opacity will give you the effect that you want.

    https://www.hongkiat.com/blog/css-only-overlays-box-shadow/

    Marked as helpful
  • arogersrenee•330
    @arogersrenee

    I think everyone might be different. I start with the mobile format first then work my way up the different sizes. I usually work on the structure of the HTML as much as I can at first. Then move to the CSS. I think I start with global changes, like fonts and colors. Then I kind of work from top to bottom based on the HTML. So I style my body first, then header, divs and so on. Usually once I get to the CSS I may have to modify the HTML a little, so it becomes a bit back and forth sometimes. Overall, I think it may just be about finding a system for yourself and being consistent so that it doesn't feel random.

    Marked as helpful
View more comments