@romariojs94Submitted over 3 years ago
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
- @stevexeroPosted 8 months ago
I wasn't able to find the code repo. Do you have a link?
1 - @ShaunPourSubmitted over 2 years agoWhat 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.
@stevexeroPosted 8 months agoHave you thought about revisiting this project and implementing what you've learned since?
0 - @Mirjax2000Submitted 8 months agoWhat 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.
@stevexeroPosted 8 months agoWoah! 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!
0 - @stevexeroSubmitted 8 months agoWhat 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?
@stevexeroPosted 8 months agoHey! 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?
0 - @aminbd90Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
- @KunturwariSubmitted 8 months ago@stevexeroPosted 8 months ago
Your solution is very elegant! I love it! Your code is minimal and nothing is overused. Great job!
0 - @Arunraj003Submitted 8 months ago@stevexeroPosted 8 months ago
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!
0 - @mohammedbahniniSubmitted 9 months ago
I just finished this challenge , using SASS ( like I do most of the time ) , trying to use BEM naming convention this time , any feedback would be appreciated .
@stevexeroPosted 8 months agoSpot 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!
0 - @gfunk77Submitted 9 months ago
My approach for the curved lines in the purple and pink sections was to make separate svgs and attach them to the bottom of the sections.
If there is an easier approach, please comment. I would love to learn an easier and cleaner way.
I ran into problems bundling with parcel. On local, the svgs were fine but in production they weren't spanning the entire width of the viewport. To solve this, I removed the width and height attributes from the svgs and added inline styles. With these changes the build was successful.
Feedback is appreciated, thanks!!
@stevexeroPosted 8 months agoI 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!
1 - @tloxiuSubmitted 9 months ago
Feedback welcome!
- I had a problem with doing a "wave" thingy under the purplish background.
- I don't know why the founder article in the screenshot isn't centered, because in the link there is no problem.
@stevexeroPosted 8 months agoLook into the CSS property 'clip-path' for the curves. It's definitely a challenging project but fun! Keep it up!
0 - @gab-holikSubmitted 8 months ago
I found this project quite challanging so my solution is not the most elegant. Thank you for any feedback. 🐾
@stevexeroPosted 8 months agoAlmost pixel-perfect! Did you use clip-path for the curves?
Marked as helpful1 - @halildemrSubmitted 8 months ago
This project challenged me a lot. After two days of work, I was able to produce a working solution. It was very difficult to use topics such as clip-path, position, flex in a way that was compatible with each other.
It is extremely important that you report any errors in the project to me. Therefore, I am waiting for your feedback. Good work everyone.
