@rvj1Submitted 9 months ago
Latest solutions
NFT preview card component using CSS Flexbox and :hover
Submitted 9 months agoIf there is help I would like with this project it would be to have a better understanding of the position attributes and if there is a better solution to achieve the same effect of creating the overlay over the NFT image because surrounding an entire div element with an element does not seem like the best solution.
Order summary component using CSS Flex
Submitted 9 months agoThe area I would like help with this challenge would be being able to have a container element control the size of an image so that they both would always be the same size.
I would of also like to know how to make the container and the child elements remain in a fixed position when the screen size is scaling up and down without having to set a hard size.
Testimonials grid section with CSS Flexbox and CSS Grid
Submitted 9 months agoIf there is one area I still would like help with each project is to know, when should I start limiting the size of objects for each project.
While I strive to match the mobile and desktop design pictures, I still struggle dealing with padding, margins and how to group HTML elements together and not take up the entire block. Sizing container elements so that it matches the challenge still elude me as I try to be a perfectionist.
Four card feature section with CSS Grid and Flexbox
Submitted 9 months agoThe area I would like help from with this project is understanding how to stop the text and images from being responsive using CSS.
I know I try and make an exact match of each challenge, but I can't stop the text from being responsive when the window size increases or decreases as seen in the mobile-design and desktop-design pictures.
I would also like help with figuring how to figure out how big or small containers should be for each challenge. Because either I make them responsive or set a specific size and I don't know what's the best practice.
Product preview card component using @media and flexbox
Submitted 9 months agoWhat I need help with this project is to understand how to make every element in the HTML framework responsive.
I still have trouble understanding what I should be doing to have the text or images inside an HTML element be responsive as the resolution of the webpage increases or decreases in resolution.
Using div elements as containers and then using flexbox for each div element can't be the only solution. Because I don't know how to set a maximum size and then have it and the elements shrink when the resolution gets smaller. My designs always takes up the entire webpage unless I set a specific width and height in pixels but that removes the ability of the design to be responsive.
Recipe Page using Flexbox and @media CSS rule
Submitted 10 months agoI would like help with knowing how to figure out how to use margin and padding so that the desktop design matches the design document while being responsive. I don't know how to make the width of the main element be an exact match to the design document.
The other issue I had with this project was the colors for the style guide. There were eight colors for this challenge, and I could only determine four colors. Even using a color picker did not match the hsl values as provided by the style guide.
Latest comments
- @Ryan-OHanlonPosted 9 months ago
This is an impressive use of only using CSS Flexbox and making breakpoints for both mobile and desktop. I would highly recommend taking the time to learn how to use CSS Grid as it can help you with placement of the container elements to be aligned.
Your code is structured well separating each testimony container in its own class but it can be improved as some testimonies are nested in each other in your HTML when they could be a child of the bigbox class and not the longbox class. Limiting yourself to just CSS Flexbox will only make placing complex elements like these more difficult in the future. Which I see with Kira's testimony being mis-shapen when I adjust the width of the browser that causes the margin and padding to fall when the display goes past 1000px.
Remember that when you need to place the entire body element in the center of the webpage to assign it the CSS attribute min-height with a value of 100vh.
You'll be using CSS Grid and Flexbox together for future projects to obtain that responsive web design. Here's a site that helped me out understand grid. https://gridbyexample.com/examples/ https://www.joshwcomeau.com/css/interactive-guide-to-grid/
Marked as helpful0 - @ShivangamSoniSubmitted about 2 years ago@Ryan-OHanlonPosted 9 months ago
Overall, very nice job on this challenge. You've made it responsive, and you utilized both CSS Grid and Flexbox.
I'm having a bit of trouble understanding your HTML and CSS though. While you did structure your CSS well and showed me ways to use CSS that I never knew about using the style attribute in the DIV element. You could improve the HTML structure to make it more understandable using other HTML elements such as header and section instead of nesting multiple DIV elements and having to assign each one a class. Probably could find a way to streamline or reduce the amount of CSS yet achieve the same result.
The one thing I'm really impressed by was how responsive you made every element that I could shrink the size of the page down to 70px and every element is responsive.
0 - @DKVyotuSubmitted 9 months ago@Ryan-OHanlonPosted 9 months ago
Excellent job making the product page preview. It's an exact match down to the margin and padding of the text and button element.
It's also impressive that you made CSS rules for the width of the page and set the absolute width of the desktop image by pixels. There's a lot I could learn from this to make my projects have better responsive design.
I think the only thing I was surprised on was the choice of having the breakpoint for your @media rule for mobile be 600px. I thought the breakpoint was supposed to be set at 320 or 375px based on the styleguide.md.
You certainly have a better grasp at using flexbox and writing your CSS rules having each class inherit the previous using &. Very well done.
1 - @cassiopeia001Submitted 10 months ago@Ryan-OHanlonPosted 10 months ago
A very strong match to the desktop design. While the code is well structured, it could do better with added comments to understand what each section of HTML or CSS is doing what.
The color of Simple Omelette Recipe does not have any color attribute added from the style guide.
While the site is responsive to the desktop design, the webpage does not change to match the mobile design. You need to make a second set of CSS rules for the desktop using the @media rules and apply a min-width. Then put all the desktop rules to adjust the margin and padding for inside the @media rule.
/*Desktop CSS rules when wider than 375px*/ @media (min-width: 376px) { body{ } }Also very good using the margin left attribute to create space for all listed elements and the table.
0 - @cassiopeia001Submitted 10 months agoWhat challenges did you encounter, and how did you overcome them?
i had a problem with the jessica avatar image not loading when i deploy on github pages, solved it by changing the path from /assets/images/avatar-jessica.jpeg to assets/images/avatar-jessica.jpeg.
@Ryan-OHanlonPosted 10 months agoOverall, well done matching the solution cassiopeia.
The dimensions are a bit off but that is a nitpick that I can't really offer proper feedback as I'm still learning how to match the overall size of the challenge to the solution.
Two things I did notice though with improving your CSS. You added a hover rule to turn the social links to green but you didn't add a rule to change the color of the text to black.
.social:hover{ background-color: hsl(75, 94%, 57%); color: black;This will change the text to a black font when a user hovers over the buttons. Also we both need to change the pointer to black with a white outline.
Also, don't forget to change the style of .attribution to a white font and assign the href to your website.
Good job and keep up the good work.
0 - @chrisk71Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?
This was a fun challenge! I incorporated CSS grid and flexbox in order to expand my skillset.
What challenges did you encounter, and how did you overcome them?I had a much easier time positioning elements in this challenge vs QR code challenge.
What specific areas of your project would you like help with?I'd like feedback on the HTML tags I used, as well as the CSS styling strings I used.
@Ryan-OHanlonPosted 10 months agoThis is a really nice solution that is an almost dead-on match with the design.
I wish I had some constructive feedback but it would only be nitpicks like how your solution is taller than the design. I couldn't even figure out how to match the font-weight of the text for "HTML & CSS foundations".
Solid solution and keep up the good work.
Marked as helpful0
