GROWTH
What challenges did you encounter, and how did you overcome them?css Grid
What specific areas of your project would you like help with?Css Grid
The layout of the grid looks good, matching the overall feel of the design. The size of the columns is a little tall however, and should be more tightly centered to the page per the design. The HTML could benefit from more semantic elements being used, there is a nice article on W3 Schools highlighting these. https://www.w3schools.com/html/html5_semantic_elements.asp
The CSS classes should be a little more descriptive, it's difficult to follow what each class is doing with names like a1, az2 etc. This would make it easier for a team collaborating on a project to understand your code, and what they should expect it to do.
The borders on the image profile pictures do match the design. There should only be two of the images with a purple/violet border. There should also be box-shadows on the card. On the first card there should also be a background image of quote, which is an SVG provided in the starter files.
Overall the look feel of the challenge is good. With a few adjustments to match the design more closely, and some updates to the markup to improve it's readability and reusability.
Your solution to the challenge looks really good.
Overall very nice work!
Ill try to make it more responsive
What challenges did you encounter, and how did you overcome them?There are still more to learn about positions in css and also about media queries
What specific areas of your project would you like help with?Ill need help with media queries and positions
The layout for the card looks good. However the design calls for different colors and fonts in a few areas including the body background, as well as the fonts used for the card headings and card text, and prices. Another tip would be to use the picture tag along with srcset to update the image of the perfume between the mobile and desktop versions. Here is an article with more information:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
I was able to complete the challenge without much difficulties.
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
Your solution looks great. The HTML is semantic, and the CSS looks well organized. I don't see the CSS custom properties mentioned on the Github page. They would typically be added to the :root of the css file, however you can also have locally scoped properties too. Here is a link explaining what they are and how to use them: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
:)
What challenges did you encounter, and how did you overcome them?:)
What specific areas of your project would you like help with?:)
Overall the challenge looks great and closely matches the design. It does appear to be a little small in comparison, but the spacing. Some of the font-weights could be updated also to more closely aline with the design. Linking to an article with more information on font-weights:
https://www.w3schools.com/cssref/pr_font_weight.php
Overall the solution looks great!
Looking at the HTML there are some more semantic tags that could be used. Here is a link to W3 schools which has an overview of what is available to use https://www.w3schools.com/html/html5_semantic_elements.asp
The CSS looks concise and uses descriptive class names. It does look like there are some minimal differences in the spacing of some elements, and the profile image is slightly different in size from the design.
Today, I realized that I had to apply the flexbox to the body instead of the main so that the main becomes centered. I learned more about inheritance and its impace on children from parents.
Continued developmentbody { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: var(--light-gray); }
Unfortunately, I did not quite understand why setting the height of the body to 100vh centered the main content vertically. Logically, I thought as default, the height is always set to 100vh but now I guess there is smth to learn.
What challenges did you encounter, and how did you overcome them?Creating an item in the center was the difficult part but by learning from others, I managed to fix it!
What specific areas of your project would you like help with?I am not sure, maybe some advice on building responsive design would be great!
When using display: flex; it converts the container (in this case the body) into a flex container, allowing you to use flexbox properties. However the height of the container will then match the height of the content. Adding the height of 100vh ensures the full viewport is used.
