@romariojs94
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
P
Steve Xero
@stevexeroAll comments
- P@stevexero
I wasn't able to find the code repo. Do you have a link?
- @ShaunPourWhat are you most proud of, and what would you do differently next time?
Despite not being specifically designed for it, 99% of the design is functional for 1440p monitors and tablets. It would only need a few slight tweaks to be more visually consistent with the other devices it is designed for.
What challenges did you encounter, and how did you overcome them?The html had to be rewritten several times to allow the design to be made responsive enough to work on larger screen sizes.
What specific areas of your project would you like help with?In general, I feel like the core element is too large and would go back and shrink it down somewhat if I ever return to this project.
P@stevexeroHave you thought about revisiting this project and implementing what you've learned since?
- @Mirjax2000What are you most proud of, and what would you do differently next time?
In this challenge i made deep dive into "resolution switchnig" and "art direction". It is complex theme, but in the end you can speed up your pages and increase quality pictures on retina displays.
What challenges did you encounter, and how did you overcome them?on list the number of items has different color then text inside. A solved with pseudoelements and sass cyklus to make it faster with codding.
What specific areas of your project would you like help with?Still BEM. I dont know how to adress name of children which have two parents.
P@stevexeroWoah! I've never seen this before!
<div class="card__img"> <img sizes="(max-width:770px) calc(100vw - 80px), 736px" srcset=" ./assets/img/main_325-test.webp 325w, ./assets/img/main_650-test.webp 650w, ./assets/img/main_1300-test.webp 1300w, ./assets/img/main_2600-test.webp 2600w " src="./assets/img/main_1300-test.webp" width="1300" height="594" alt="Omelet from recipe" /> </div>I learned about why woff2 and ttf but didn't deep dive too much into where or how I can acquire the woff2. When I download and install from Google fonts or the Frontend Mentor files, it's been ttf. Can you give me insight on how you got the woff2?
@font-face { font-family: 'Young Serif'; src: url(../assets/webfonts/Font-face/YoungSerif-Regular.woff2) format('woff2'), url(../assets/webfonts/Font-face/YoungSerif-Regular.ttf) format('truetype'); font-weight: 400; }Haha thank you for the shoutout!! I am learning from you too! This has been one of my favorite parts about pursuing tech, we're all always learning from each other! I am in a labor job now, so it's a totally different setting, where the people have poor attitudes (because they are tired, I don't blame them) and there is a huge lack of forward momentum. This structure moreso benefits from their people staying in the same place as opposed to empowering them and helping them get ahead. I feel out of place and do my best to try and help them rediscover their passions.
Sorry for the rant, back to the code!
Your sass is unmatched! Well structured, and inspiring me to dig deeper in.
Is em(360, 16) particular to Sass? It is interesting
.container { max-width: em(375, 16); margin: 0 auto; background-color: $clr-bg-container ; }``` When I was working with BEM alongside Sass, I got confused about the BEM structure too. I am still researching it further, but here's what I understand. BEM is referencing the selector's role, Block, Element, Modifier. Our recipe page doesn't really have any modifiers (buttons, interactive elements, etc.), but there are plenty of Blocks and Elements. Blocks are like the parent, Elements are the children. So if we have a container (block) of some sort, say "main-block," then all of it's children would reference it by including "main-block" + "__element-name." Also, every element SHOULD have a class name. I know nesting is awesome in Sass and it's one of my favorite features, but BEM doesn't suggest more then 1 or 2 levels deep. So for Sass: ```scss .main-block { &__element-name { property: value; } }or CSS
.main-block { property: value; } .main-block__element-name { property: value; }I haven't experienced using modifiers with BEM yet, so I'll keep you posted on that.
Very clean code! And while browsing more, I now found the Sass functions and the answer to my above question, but I'm going to leave it there as maybe it will inspire someone else to look into it.
Cheers!
- P@stevexeroWhat are you most proud of, and what would you do differently next time?
I am most proud of the improvements I'm making towards semantically correct HTML, accessibility, and reusable CSS variables.
What challenges did you encounter, and how did you overcome them?I ran into a few minute problems, one being that an element I gave a display of inline-block to had some margin on it, even though I had all margins and paddings reset. It had to do with a vertical-align property that is automatically set to baseline. I was able to fix it by setting it to top.
What specific areas of your project would you like help with?The main focus of this project was to use relative units as opposed to fixed pixel sizes. I was trying to keep the solution as close to the design as possible, resulting in some crazy rem's, like 0.875rem. Is this ok?
P@stevexeroHey! Thanks so much for your feedback! Check my code now, I did my best to implement what you're talking about, checked with different scales by setting
html { font-size: 500%; /* 200%, 300%, 400%, etc. */ }I got a nice view of how to make things work for accessibility.
I'd like to point out a few things, if that's ok...
My a11y mentor Corina sent me this article about refraining from using relative units for margins, padding, and other spacing techniques as the focus is to modify the important content for the user to read or interact with. It's a great read!
I understand what you're saying about ems vs rems, and the best way I can make it make sense is by referring to inheritance. Every child element inherits it's parent's properties, so in the case of rem, it inherits from the root, while em inherits directly from it's parent.
I did use Figma, and did have my max-height set to 200px. I checked out your solution as well and kind of had the same question, as I see there's no border-radius on the pill tag.
I need to dig deeper into "little hint "resolution switching" and "Picture art" techniques, it will save bandwith and also wil show better quality imiges on retina displays."
Thank you again for your feedback! I am going to revisit my other challenges and apply what I'm learning, but I've also starting the second learning path and, funny enough, it's about responsive media.
How's the recipe page coming along?
- @aminbd90What are you most proud of, and what would you do differently next time?P@stevexero
Love how clean your code is!
- @KunturwariP@stevexero
Your solution is very elegant! I love it! Your code is minimal and nothing is overused. Great job!
- @Arunraj003P@stevexero
Hey! Nicely done! If I may offer some insights...
Have you dug into learning more about semantic HTML as opposed to falling back on divs?
It's something I'm getting more into myself, as well as accessibility in order to include as many users of our sites as possible, including those with any range of disabilities.
A mentor of mine recently explained to me how accessing web content is a human right. I found that quite profound!
Another phenomenon I've encountered while learning and implementing these techniques is that it really sets you apart from everyone else currently learning.
All the best to you on your journey, Arun!
- P@mohammedbahniniP@stevexero
Spot on! What browser are you using for development? I read before that FireFox is the best for these solutions, I'm really curious as to why.
My solution also tweaked the fonts in the solution/design slider, even though they were exactly as the design file showed.
Very good work!
- @gfunk77P@stevexero
I used the CSS propert 'clip-path' in the same selector as my background-color, like so: clip-path: ellipse(120% 100% at 50% 0%);
I had to adjust the horizontal radius <rx> for each media query.
While it was kind of a headache, it was fun to learn about this!
- @tloxiuP@stevexero
Look into the CSS property 'clip-path' for the curves. It's definitely a challenging project but fun! Keep it up!
- P@gab-holikP@stevexero
Almost pixel-perfect! Did you use clip-path for the curves?
Marked as helpful - @halildemrP@stevexero
Your curves are spot on!
- @nn-code80What challenges did you encounter, and how did you overcome them?
This was my first time using Figma, so understanding the program and how to asses dimensions was challenging. Also, the curves in the design were tricky. I didn't see any SVG files for the curves, so I made my own using Illustrator and attached them using the::after pseudoelement. Feedback is always appreciated. Thanks!
P@stevexeroVery nice! Did you use Chrome during your development? I read on here in the past that FireFox, for whatever reason, actually gets the site closer to the design and reflects in the above design/solution slider.
For the curves at the bottom of the sections, I used the clip-path CSS property. 'clip-path: ellipse(120% 100% at 50% 0%);'
I had to adjust only the horizontal radius <rx> (the first number) during the responsive development. It basically adjusts the width and will smooth out the curve depending on what you need.
It's definitely something (along with SVG design) that I'll be diving deeper into!
Cheers!
- @aLe3ouLaP@stevexero
Spot on and your code is so clean!! Bravo!
- @JB-DoffemontP@stevexero
Looks great! The margin between the card's header ('advice #') and the quoted text is perfect! I'd make the same margin between the bottom rule and the quoted text as well.
I would put the JavaScript file(s) in the root of the project or in a 'scripts' folder (also in the root), and not in the assets folder. Save those for media.
Great work!!
- @anas-cdP@stevexero
Fun! Great job on the letter-spacing! The margin between the card header and the quote data is perfect, I'd give the same margin between the bottom rule and the quote data.
Great work!
- @RyanFloresTTP@stevexero
Hey Ryan...looks great!! Do you have the pro version of Frontend Mentor by any chance? In the Figma file, you can get the letter-spacing and line-height values for all of the text, it's super helpful!
For scaling the font-size, I'd use a media query. And for positioning the button, I made the position absolute with a bottom at -32px (or half the size of the button) and made sure to set the parent element at position: relative.
Hope that helps!
