All comments

• 

  Neil• 140

  @neildeo

  Submitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  This was a great project to get comfortable with grid, both using the grid-column settings and grid-template-areas. However, the two aspects which I learned the most about were background images and box shadows.

  What challenges did you encounter, and how did you overcome them?

  Finding a suitable breakpoint to snap from the mobile column layout to the grid was tricky. In the end I set a rather small max-width on the cards so that the layout stays in one column until very large screens. It would probably have been better to design and implement an intermediate grid layout which is less wide, suitable for screens of about 800-1200px.

  What specific areas of your project would you like help with?

  I am keen to understand sizing differences between browsers. When I view my page on Chrome, it fits comfortably on the screen with plenty of whitespace around it. But in Safari, there is a vertical scrollbar. If anyone knows why this occurs and how to manage it, I would be open to learning!

  

  Testimonials grid

  1

  40

  

  Divadovitch• 190

  @Divadovitch

  Posted 4 months ago

  Hi Neil,

  For the differences between browsers, I'm not sure but maybe this has to do with user-agent stylesheet. Each browser has is own stylesheet. Using a reset css like this one I'm using on this project can help.

  About the transition from the mobile version to the desktop on, this code helped me a lot grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));, you can read more about it on this article.

  Last thing about the <span> you used on the name and title of the cards, as I understand it's better to use <p> because it has a semantic meaning and <span> dont. Link to more infos.

  Hop this help

  Hope this help

  0
• 

  P

  yoyov51234• 240

  @yoyov51234

  Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  1, I finished this project after 3 days.... I didn't give up. 2, I have a deeper understanding of the rank of the classes

  What challenges did you encounter, and how did you overcome them?

  In the end , I made the 1440 view using a grid, but the grid-gap is fixed, but when the screen goes larger, the vertical gaps between the divs are no longer the same.

  What specific areas of your project would you like help with?

  For the minimal size, how to define it's minimal enough and the cards shouldn't shrink anymore?

  

  Four card feature section flex, grid, sass

  1

  30

  

  Divadovitch• 190

  @Divadovitch

  Posted 5 months ago

  Hi yoyov51234,

  Congratulations on this project.

  For the minimal size I think you can use minmax like minmax(350px, 1fr) so 350px in this case is the minimal size and 1fr is the maximal size, in this way the size of the cards will not shrink past 350px.

  For the minmax and the use of auto-fill in use with css grid, you can read this article.

  This minimum size will be determined based on the content and the readability of the card. It's more of a design choice.

  Hope this help

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  OlsanX• 150

  @olsanx

  Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  I did my research and i used experience from past works, it paid off.

  What challenges did you encounter, and how did you overcome them?

  Building the last section was tricky, but I got insights from others who have passed the stage, and I thank them for their help.

  What specific areas of your project would you like help with?

  None, thank you.

  

  Recipe Page

  1

  30

  

  Divadovitch• 190

  @Divadovitch

  Posted 5 months ago

  Hi, Congratulations on this challenge, I previewed your solution and learned a lot from your code. The way to resolve the padding problem during the media query between the card and the details is very well seen. the same goes rfor the image.

  0
• 

  Arthur Confessor• 10

  @ArthConf

  Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  I'm proud to have used flexbox to center the panel and other flex items. Next time, I want to use GRID.

  What challenges did you encounter, and how did you overcome them?

  I had difficulty reducing the image, without losing so much quality and maintaining the proportion. Furthermore, I had to learn how to use flexbox better

  What specific areas of your project would you like help with?

  I would like help with tips on aligning items, centering faster, moving elements.

  

  I used flexbox and padding.

  1

  30

  

  Divadovitch• 190

  @Divadovitch

  Posted 5 months ago

  Hello Arthur, Congratulation on your work.

  Your HTML is very readable, as I understand it is better to use <a> than <button> (they are more Form elements), you can read this article on CSS Tricks.

  In your CSS your can place almost all of the font properties in the body or in your main. You can get ride of almost all align-item: center; by adding text-align:center; in the body or in your main.

  Hope this helps.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  grace1999-pixel• 190

  @grace1999-pixel

  Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  Was able to bring it close to the desired goal design.

  What challenges did you encounter, and how did you overcome them?

  I found dealing with flex boxes difficult.

  What specific areas of your project would you like help with?

  Flex boxes

  

  first project with CSS & HTML

  1

  30

  

  Divadovitch• 190

  @Divadovitch

  Posted 5 months ago

  Hello, checking in your HTML, I think you can use one less div, I don't think the inner-container is necessary, you can put all the css of the inner-container on the card. On your CSS you can place the font-family on the body so all text hace the same font at once. If you use colors more than once, don't hesitate to create a variable ex: --background-color: hsl(47, 88%, 63%); than you can refere to it with var (--background-color). For the <p> in the button-like you can use display:inline-block; to better control the width and height and with it you dont have to use flex-start I think. There is an article about flexbox on css-tricks that your can read if you like.

  Nice job

  Marked as helpful

  0
• 

  Pedro Silva• 140

  @pmcsilva90

  Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  I did it by myself.

  What challenges did you encounter, and how did you overcome them?

  Trying to center the card vertically. I thought I could use only "margin: auto auto;" but ended ut using flex with justify-content and align-items.

  What specific areas of your project would you like help with?

  Possibly the text isn't aligned with the QR image as it shows on the design images.

  

  QR code component

  2

  50

  

  Divadovitch• 190

  @Divadovitch

  Posted 5 months ago

  nice work. Indeed if the title in h1 was just a little bigger and there was less padding on the left and right of the texts the result would be identical. A small remark regarding the border-radius, as they are in "%" when the card becomes smaller the corners are deformed, it seems to me that using the "rem" allows you to avoid this deformation. congratulations for the work accomplished

  Marked as helpful

  1