@JasonPBurkeSubmitted 13 days ago
Gabe
@gabeiAll comments
- P@gabeiPosted 10 days ago
Nice job! I think the max-width of the grid could be a little larger on desktop, but otherwise looks great! I just thought of something that I'll share with you also because I found it interesting:
You used
nth-childproperty to style the different testimonial sections. If we were to add a variable amount of sections, but still wanted them to alternate colors, we could use thenth-child(an+b)operation to determine a set of colors to alternate through.I made a codepen to demonstrate. The syntax is
nth-child(4n+b), representing that we want to alternate through 4 colors.Anyway - I hope you also found this interesting. Happy coding!
Marked as helpful1 - P@amancalledkiddSubmitted 17 days agoWhat are you most proud of, and what would you do differently next time?
Using grid for the first time, I had previously mainly used flexbox. I will use it more often in the future, its a useful tool.
What challenges did you encounter, and how did you overcome them?I had recently been learning about cube-css after watching the link provided in a previous section. However I found it hard to use as I didn't have a full understanding. I have applied some of the best practices but I ahve a lot more to learn.
Also find it challenging to know the best practices of semantic HTML, overcame this through reading more and trial and error.
What specific areas of your project would you like help with?Best practices for naming classes?
Is my use of Scss nesting correct?
Any suggestions for improving this solution?
P@gabeiPosted 17 days agoHey nice job!
To answer your question about SCSS nesting:
Usually the benefit of nesting in SCSS is the ability to append class names under the parent element. This is especially apparent when using a CSS methodology like BEM.
For instance, if you had a paragraph tag with a
.card__textclass listed under your.cardelement, you might wright something like:.card { border: 1px solid black; &__text { padding: 2rem; } }This would output to:
.card { styles here } .card__text { styles here }This can allow you to sort your CSS into a module-like arrangement, where all associated code is bundled together under a
.cardelement at the top.Expanding on that idea is then quite easy:
&__text { padding: 2rem; &--bold { font-weight: 800; } }outputs to:
.card__text--bold { font-weight: 800 }And so on and so forth.
I hope this helps - happy coding!
Marked as helpful0 - @ana-suzanaSubmitted 18 days agoWhat challenges did you encounter, and how did you overcome them?
Using CSS grid was a challenge for me. I had never made a web page with CSS grid before, but once I learned how to use it, I found it very useful and easier to work with than I thought.
In addition, another obstacle I encountered during the process was using the different types of positioning of the elements.
At the end of the project, I realized that I learned a lot of new things. I am very proud of myself.
P@gabeiPosted 18 days agoHello!
A couple of things I notice right off the bat:
-
The tablet sizing of your site places the cards into a sort of stack that doesn't match the design.
-
Check the font colors! Yours appear more of a stark black in comparison to the design ( a more grey color) Definitely a little easier when you have access to the design file so no big deal.
-
Your header text is off-center when sized down to mobile.
I hope any of this helps! Happy coding!
Marked as helpful1 -
- @GCrane93Submitted 24 days agoP@gabeiPosted 24 days ago
Nice job - Looks pretty solid!
The semantics of your HTML can be improved without jeopardizing the style of the page. Check out this W3 schools article for a start.
You might also look into keeping a separate stylesheet to organize your code.
Happy coding!
Marked as helpful2 - @claudiojrdevSubmitted 28 days agoWhat specific areas of your project would you like help with?
I think the project's responsiveness is not very good. On larger screens, the buttons extend beyond the main container, but I don’t know what the issue is in the CSS.
I also think the way I use classes or HTML semantic markup might not follow common best practices
P@gabeiPosted 28 days agoHello!
In regards to your question about the buttons extending beyond the container: Check out the height property that you set on the
.containerclass. Look at the page in the inspector and try toggling that on and off. From my view, when I'm viewing your site on a mobile phone and I toggle that, I see quite a big change in the way the child items are arranged.BUT that is only when I really squash the page to be pretty small. Either way, the height of your container is already stretching to accommodate the space of the items inside of it. I'm not sure I'm seeing what you are on a big screen.
ALSO if you do change that, you'll notice that your buttons get pushed together. There are a few ways to approach that. In this instance I would take a look at the gap property for flexbox containers.
Happy coding!
Marked as helpful1 - @FernJBatistaSubmitted about 1 month agoP@gabeiPosted about 1 month ago
Hello - nice job!
There are a few things I wanted to mention about your solution:
-
On mobile devices the main container appears to be extending out of the bottom of the screen, which clips the
Add to cart. This happens on mobile devices with a screen height less than 700px. -
You probably already know this, but you have some CSS variables initialized on the
:rootselector. You also use some SASS variables further down in your stylesheet. For consistency those could all be SASS variables, and maybe even separated into a separate stylesheet. The same can be said about the reset properties at the beginning. It might be a little neater to navigate for you if they are all separated into several files.
Happy coding!
0 -
- @KuvashneeNaidooSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
While working on this task, I learned how to use SCSS to nest selectors, making the styles more structured and readable. SCSS also helped to support variables to store reusable values like colors and fonts. I will continue to focus on improving my SCSS skills by diving deeper into mixins to define styles that can be re-used throughout the stylesheet.
What challenges did you encounter, and how did you overcome them?At first, I found it a bit tricky to manage global styles such as font and colour variables. I then created a centralised approach which I defined in the :root and at the top of my SCSS file. This allowed me to easily reference the reusable values.
P@gabeiPosted about 1 month agoThis looks awesome! I love the color alterations and the slight hover animation for the buttons.
I don't have a lot to say, but I'll add the two things that I pretty much tell everybody since I think they're interesting:
-
When viewing your site on a device in landscape mode on a mobile device (quite an edge case), the container extends beyond the top of the screen. How might you prevent that from happening?
-
From a semantic HTML perspective, I tend to think of the social links as a list of sites to visit. This looks the same visibly, but changes how screen readers read off the content. Personally I think the difference is negligible for a site like this, but it's worth mentioning.
Nice work and happy coding!
Marked as helpful1 -
- @SaraMouraDevSubmitted about 1 month agoWhat specific areas of your project would you like help with?
I would appreciate help on how improve my code using clean code.
P@gabeiPosted about 1 month agoHello!
If I can add to what LittleSamm said:
Check out this article about semantic HTML. In short, it is helpful to have certain elements on the page labeled a certain way (
<main>, <h1>, <h2> (in order), etc. This is especially helpful for screen readers, but also helps you to style and organize your code in logical order.Something I wanted to add was to check up on the width of the recipe container. Currently it is centered using some margins, but I think you'll find that this starts to act a little odd when you view the page on a smaller device. Here's a classic article about centering divs.
Nice work and happy coding!
Marked as helpful1 - @fadymasSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
- I learned a great deal about image editing.
What challenges did you encounter, and how did you overcome them?img { width: 230px; clip-path: circle(26%); object-fit: cover; object-position: top; height: 100px; }"I use CSS properties like clip-path: circle(26%), object-fit: cover, and object-position: top to create and style circular profile photos, controlling the shape, image scaling, and cropping."
What specific areas of your project would you like help with?I don't have anything in particular I need help with right now, but I'd welcome any useful comments or suggestions. Thanks!
P@gabeiPosted about 1 month agoNice - it looks great and responsive! I'll try to nit pick something since you've covered most of it.
-
I always mention to people how their site looks when viewed in landscape mode on a mobile device. I used to struggle with this a lot when I used
100vh. How can we accommodate this? -
Maybe this is a matter of personal preference, or maybe somebody smarter than me can correct me: I tend to look at projects like this as a
listof links. Stylistically it looks the same, but the way it is read by a screen reader is a little different.
Nice job and happy coding!
Marked as helpful0 - @arthurquiqueSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I think I have a prettier code than on the last project where I used divs for everything.
What challenges did you encounter, and how did you overcome them?Getting started is always the most challenging to me but it becomes more and more easy with experience.
What specific areas of your project would you like help with?Tips for judging which type of display to use for each element.
P@gabeiPosted about 1 month agoNice job! A few things to mention, and hopefully an answer to your question.
-
As far as types of display go, I think you're fine. One thing I would consider is the type of elements you use for the social links on the card. They might be thought of as an unordered list, which is helpful to screen readers when announcing the content ahead. Styling the section as a grid works fine in your case, but I think beginning with a list of links here makes the overall styling a bit simpler in the long run.
-
Check out how
100vhon the body affects the card's visibility when you switch to landscape mode on a mobile device. This can actually be a quick fix (check out themin-heightproperty, for example).
Hope this helps. Happy coding!
Marked as helpful1 -
- @abigailjulieSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Next time I will incorporate more ADA, happy this was done quickly.
What challenges did you encounter, and how did you overcome them?I wasn't able to achieve the brightness on the eye icon. I'm not sure if it has to do with z-index, or filter.
What specific areas of your project would you like help with?the brightness on the eye icon and semantic HTML comments.
P@gabeiPosted about 1 month agoThe eyeball icon is being affected by the opacity of its container,
.card_image_overlay. Even if the opacity of the eye itself is set to1on hover, it will fall within the bounds of its parent's setting of0.4. It's a bit of a tricky fix, but I would start there.Happy coding!
0 - P@BastienWinantSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I made a small extension by allowing for multiple category tags and incorporating some accessibility elements (which I need to do more of).
What challenges did you encounter, and how did you overcome them?For accessibility reasons, I did not want to wrap the entire card content in <a> tags, which made it difficult to create the intended hover effect. In my solution, the hover effect (change in font color) when the mouse is directly on the title.
What specific areas of your project would you like help with?Any comment on the React approach would be appreciated. In this instance, I favored using props over creating a compound component.
I also need help with accessibility best practices.
P@gabeiPosted about 1 month agoThis looks awesome! I love the card component. It is more modular and is ready to accept variable amounts of props (like additional tags).
That card hover animation is tricky. After some research I ended up adding an empty
:afterpseudo element to my link so that I could make it span the whole card without actually wrapping the card in an<a>tag.Speaking of hovering: As of writing this, your card does not have the box-shadow change on hover.
Happy coding!
0 - @strikes7Submitted about 1 year agoP@gabeiPosted about 1 month ago
This looks awesome! I have very little to say. I had actually never seen the
clamp()function before, but after looking at this I want to learn more about it.My understanding of the
<article>tag is that it is meant for standalone content that can be understood on its own without other context. The examples that W3 Schools use are things like blog posts, news stories, etc.I would argue that all of the recipe's content makes sense as a whole together, but each part is basically its own piece — maybe even the whole recipe is an article itself. I don't have an answer for that now, but just wanted to mention it as food for thought.
Thanks for teaching me something!
0 - @Doctor-netizenSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm really excited to have complete the project in a very short while.
What challenges did you encounter, and how did you overcome them?I didn't encounter any challenge really because I have once tried to do this project.
What specific areas of your project would you like help with?On this project, so far there's no where I would like help with.
P@gabeiPosted about 1 month agoHello!
The solution that I am seeing here does not match the design. At present, the QR code is far off to the side and the container is spanning the whole width of the page.
The structure of the HTML is partially to blame here, but I think you should also take a look at some of the CSS properties you used to see how they should be applied.
Here is the W3 doc on justify-self, a property applied to a few elements on your page. Here is an article about horizontal and vertical centering.
I hope this helps - happy coding!
0 - @vargasnetoSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
melhorando...
What challenges did you encounter, and how did you overcome them?organizar os itens
What specific areas of your project would you like help with?...
P@gabeiPosted about 1 month agoHey this looks pretty good at all sizes! A couple of things:
-
If someone were to look at this page in portrait mode, your card would be going out of the top of the screen. How might you remedy that?
-
There are a lot of magic numbers in the styles. For instance, your avatar is centered by adding a left margin to push it into the middle of the card. If something in the width of the card design were to change by even one pixel, the image becomes out of center.
Just a couple of things to consider. Happy coding!
0 -
- @vasalmaSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm most proud that I could make the whole project, but I definitely need to be faster next time!
What challenges did you encounter, and how did you overcome them?Adjusting the flex properties and layout settings in general. I had to use some AI to improve and undestand what I needed to do.
What specific areas of your project would you like help with?Definitely, layout and design; but I'm open to receiving any recommendations necessary to improve in any aspect.
P@gabeiPosted about 1 month agoNice - looks great!
Quick note about the image: In this instance you can actually remove the div that is surrounding the QR code (currently wrapped in a div with class="QR"). Applying the same styles to the image without the wrapping div will result in the same output.
If you do this, you would have to update your CSS from ".QR img" to ".QR-box img". I tried it just now in the inspector and it still looks great!
Now here's the real kicker... Doing the same thing as above, but with the text :)
Marked as helpful1 - @ebrunGitSubmitted about 1 month agoWhat specific areas of your project would you like help with?
I appreciate any feedback on any html/css focused tool or methodology that would help make this task easier to achieve
P@gabeiPosted about 1 month agoNice job!
As far as HTML and CSS methodology are concerned, it is often best practice to keep a separate stylesheet which is then imported into the HTML file. This way there is a sort of separation of concerns.
This is a small project, so it fits nicely there in the header, but even a couple of extra elements added to the HTML will begin to expand that CSS to the point of looking quite bloated up there. Ina larger project, having access to global styles, etc. would be easier found in a separate file.
Marked as helpful0 - @maxxcruzSubmitted about 1 year agoP@gabeiPosted about 2 months ago
It looks great! I may be wrong about this, but there is an animation timing in the Figma file. Yours transitions instantly (which as a design I actually prefer).
0
