- Which is better when we want to create a responsive web pages, to build the desktop design first or to build the mobile design first?
- I think I have a lot of improvements to do regarding my HTML and CSS, especially in media queries and the usage of flexbox. I hoped that maybe from my submission, there will be some general pointer in which I can go or learn further for my own progress. Thanks a lot for any feedback.
arogersrenee
@arogersreneeAll comments
- @ygabdn29Submitted about 1 year ago@arogersreneePosted about 1 year ago
I general go with the mobile first approach. It's easier to build upon rather than takeaway if you start with desktop.
0 - @arogersreneeSubmitted about 1 year ago
If anyone has time to offer suggestions with my JS that would be great. I think the calculator works fine. I think my logic is okay, but I wonder if I could have simplified things.
I want to organize the JS code a little better. I'm trying to avoid "spaghetti code" or not repeating myself.
I converted my user inputs to numbers before doing calculations. Should I convert back to string when updating innerContent?
@arogersreneePosted about 1 year agoupdated my JavaScript. Added functions to calculate the healthy weight ranges.
0 - @cwwittorSubmitted about 1 year ago
Not really happy with my solution and think I need to work on how to better set up a project since I had been just having a lot of problems stemming from how I had done this one. Especially ones related to trying to use CSS variables for too many different html items where it came to bite me in the butt when working on the desktop viewport.
Aside from structural problems, I did find it hard to determine how gradients would work in general and what or where absolute background sections would be or if I would even use them. Same with dropshadow for some of the items in the solution.
Also was curious on how other people did the grid in the bottom. I will be checking out solutions for this project to see mine wasn't 1:1.
@arogersreneePosted about 1 year agoGradients & 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); }
1 - @TusharPandey98Submitted about 1 year ago
I found adding colour to the background image in this task challenging, but I accomplished it using the blend mode property in CSS. This was a new property for me, and I'm glad to have learned it through this challenge.
If you have any feedback or suggestions, please feel free to share them. Thank you! 😊
@arogersreneePosted about 1 year agoFor 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/
0 - @Bimme2audreySubmitted about 1 year ago
Found it difficult giving a color over the image. Thank you for your contributions.
@arogersreneePosted about 1 year agoFor 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 helpful0 - @Alexandre-Simoes361Submitted about 1 year ago
While working on this project, I couldn't help but feel like the order of how I went about things was a bit random, and would like to structure my approach a bit more. How should I go about organizinbg this? As in, should I first work on the position boxes, then the content, then the styles, top to bottom, left to right, how? That would be my biggest question in terms of best practices, how do I structure my approach.
Thank you.
@arogersreneePosted about 1 year agoI 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 helpful1 - @lainaq217Submitted over 1 year ago
Tengo problemas para las fuentes y para colocar de forma correcta los precios. Espro y agradezco sus comentarios
@arogersreneePosted over 1 year agoThe file can't find the image because your images are not uploaded to github. In your HTML file check that your image link is a relative link, then re-upload the folder to github and the image should display.
0 - @coffeeslammerSubmitted over 1 year ago
Very challenging for me getting it to be responsive. Hope I'm on the right track on how it should be done.
@arogersreneePosted over 1 year agosmall things that I noticed.
- you'll want your social media icons wrapped in <a> tags as they are links.
- include the last section (the part with the founder and beta info) in the <main>
- the numbers should still be wrapped in <p> tags
1 - @arogersreneeSubmitted over 1 year ago
This was a hard challenge for me. Any feedback would be extremely helpful.
-
How do you do curved divs? I don't think the solution I found is the best. It creates a horizontal scroll that I don't know how to fix.
-
I also know that I need to read into positioning and how to move elements. I found a solution that I was able to play with but any advice in that area is welcome.
Was positioning the best choice to use for the phone and the bottom section with the founder image and the text-box?
@arogersreneePosted over 1 year ago@grace-snow @Chanda-Abdul @burrijw
Thanks for feedback. It was truly helpful! I ended up restarting and I took into account as much as I could figure out.
I tried the svg route on one section and the clipping path on the other. I'll have to play around with them more to figure out when which is better than the other.
I also did the same for the coils. A couple are background images and the other added to the html. Positioning these was a challenge.
Overall, there's much more that I need to figure out. As a beginner (1 month of learning html & css) this was much harder than I thought it would be!
1 -
- @RanvirChoudharySubmitted over 1 year ago
I Think I got the solution pretty right but i can't figure out what font is used in the original design. Can anyone tell?
@arogersreneePosted over 1 year agoIt's at the bottom of the style-guide:
- Family: Outfit
- Weights: 400, 700
2