Finishing the project
What challenges did you encounter, and how did you overcome them?Faded background color in footer, used absolute positioning
What specific areas of your project would you like help with?N/A
Hi @vcollins1, great job by solving this challenge 💪 I want to bring to your attention a few things you might want to fix.
alt text;background-image;padding;Let me know if I may help you to improve this solution, I hope you find it useful 🤞
Ciao ✌️
Keep Learning 📖 Keep Coding 💻
I am proud that I was able to solve the cards grid layout and I also made it responsive.
Well done man 🥳 I reviewed your code and I found some bugs to fix:
I think that setting max-width on the body tag is not the best solution, maybe you can put it on the main tag or your .testimonials;
Another thing is to change the font-size unit from px to rem is better for accessibility purposes;
You need to fix the layout on large screens, at the moment over 1440px the layout sits on the left of the screen;
That's it, I like how you keep your html and css well organised, and I like how you set the style on the grid items with :nth-of-type(), I'll keep it in mind for future challenges 😜
Well done again man 😎 Cheers ✌️
Keep Learning 📖 Keep Coding 💻
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Hi Kamran, well done to solve this challenge. I'm here to give you some suggestions.
for HTML
h1 and h2, you can simply wrap this part " Powered by Technology " in a b tag,section for the cards, instead you can opt for article or div;main tag should be used to wrap all the content, except for the footer of course;for CSS
calc doesn't cause any problems with performance? I ask you because I never seen something like that before;Hoping you find this useful
Cheers ✌️
Keep Learning 📖 Keep Coding 💻
Hi Dhia, great work to solve this challenge, I looked to your code because I need to solve a problem that I encountered and I found something where I can give you some tips.
To render proper images based on display size you need to use a <picture> tag instead of two <img> tags with display: none set on it;
Here is a useful article for getting started with picture element
Use relative units instead of px, for example for padding and media queries you can use em while for margin, border-radius or font-size you can use rem;
Here an article to getting started with relative units
Try to make your alt text more descriptive and avoid the word image because the screen readers start with ' image of ', in your case this will sound like ' image of product image '. Try with something like this ' A bottle of Chanel Gabrielle Parfum ' this is still poor alt text but it describes better the image to people with disabilities.
Hoping you find this useful ✌️
Keep Learning 📖 Keep Coding 💻
I really get an appreciation of how difficult it can be to get the correct spacing, colors etc without the design file.
What specific areas of your project would you like help with?I always appreciate any form of feedback.
Hey Dan, you are doing a great job of solving this challenge, your code is clear and easy to read.
I have just one suggestion, as you can see in the challenge folder we have two images, one for mobile and one for desktop, instead of using the image as a header background, check out this article to understand how to render images properly based on the device by using <picture>, with that the images are fully accessible and the browser upload just the right images with the right device.
Don't forget to add the alt text if you decide to use this approach.
Cheers✌️
📖Keep Learning 💻Keep coding
I'm proud of the fact that its finally starting to click. I'm also proud of the fact that I was able to use the feedback I got from my last project ( improving centering items with grid) right away. It took me a few times to get to this point but unless I did something wrong that I'm not aware of I wouldn't change it.
What challenges did you encounter, and how did you overcome them?I'm still a little confused on when to push things to git hub and what I should put for my commit messages. I usually do the initial commit and then not push again until I'm done with the project.
What specific areas of your project would you like help with?If possible some tips on git and git message like when to push updates and I think I'm still not centering my cards vertically correctly.
Hey there @mking0823,
About Git, before starting the learning path I had never used it, I used GitHub Desktop, but to push the updates I had to go into the application. So every time I created the repository and then I forgot to push the progress into the repository which I promptly did when I closed VS Code or even when I reopened GitHub.
I also brought this flaw into the first two challenges of the learning path, obviously, this thing takes away all the work utilities of Git or GitHub itself, but this is to tell you that you are not alone.
Now the advice:
reset initialized.
Do you write the first element of HTML? Push it. Example card structure madeSo summarize what you did and push every time to your repo so you're enable to scroll through the history and if you need you know the meaning of every step.
About centering the card vertically I think you need to change this code grid-template-rows: 94% 1fr; with this grid-template-rows: 1fr; or this grid-template-rows: 1fr auto;
I will suggest also using Relative Units as rem & em instead of px, Logical property as padding-inline-start instead of padding-left, wrapping all the card elements in an article tag and last but not least think Mobile-first when you start the next challenge, because the card isn't responsive on a mobile device.
Hoping you find this helpful ✌️
Keep learning 📖 Keep coding💻
using tables and design tools
What challenges did you encounter, and how did you overcome them?design and tables tag
What specific areas of your project would you like help with?solutions for designs varieties
Hi @MAIAN-HUNTER, I reviewed your repository and I have some suggestions for you:
html;css by using Logical properties example:
- margin-left = margin-inline-start;
- margin-bottom = margin-block-end;
- Check out this article about Logical properties;padding on your .container, you can add it by using @media or @container query, I used the second one, or maybe the fluid spacing;strong if your goal is only to highlight text, instead use the b or span to achieve that. Read this article to discover why;hr or a div with class .divider for example, the last one was my solution, instead of setting padding-top to the h2;padding from ul and ol, and to style the bullet points use the same trick that you use on the li for ol (they should be bold), and play with ::before pseudo-element, this is how I did all the marker for the list; hint: left: some remborder of the table you can use table {border-collapse: collapse;}, with this css the border looks like a single line;tr and td to make the table, maybe this doesn't matter, but you need to highlight the right column of the table, th has font-weight: bold; as default on it;footer tag and position, on mobile view it overlaps the layout and on large screen, it sits on the left of the card;Hoping you find this helpful ✌️
Keep learning 📖 Keep coding 💻
how do i round the edges of the image?
Hey there, to give the border-radius on the image, you need to set it not on .imagen but on the img tag or simply add this class to img tag instead of on the div.
Don't forget to also add an alt text, it's necessary for accessibility purposes.
I hope I was helpful, keep coding ✌️
Hi everyone! Overall happy with how this came out. I used the PerfectPixel extension for the first time and although it was a little bit of a learning curve, I am happy with the result. The area I'm not very happy with is that I used defined values for the width and height which I usually try to avoid, if anyone has any recommendations on how to avoid that with a card this size that would be greatly appreciated.
What challenges did you encounter, and how did you overcome them?Overall I didn't have any issues with this challenge, the only area that took some reworking was fixing the width, height, and padding for the mobile version vs the desktop version.
What specific areas of your project would you like help with?If anyone has any recommendations for any of my CSS I would love to hear it! I've been focusing mostly on React recently so my CSS is a little out of practice.
Hey there, personally I set just a max-width on the card, so it can be responsive from 320px I didn't use height I achieved that with the spacing between elements.
I like your solution on the links list with grid, I used flex for everything😅
My solution is not pixel-perfect but I'm not sure if isn't because I keep the footer.
Well done mate ✌️
PS. Add alt text on the image and set it a little bit smaller.
PPS. Is the list still accessible if we wrap it with a tag? I wrapped the a with li
I'm looking to enhance the dimensions of elements in my project. This aspect is proving to be a bit challenging for me, especially as I try to incorporate CSS variables. Any advice or tips you could offer would be greatly appreciated
Hello mate, I have some suggestions for you:
body with main tag and also .attribution in a footer keeping the last one outside the main tag;article could be a good solution;a link so you need to use the appropriate HTML tags;Anyway, you have done a good job of solving this challenge, with study and practice everything gets better. For anything else I'm here. Happy coding ✌️
I encountered a problem when i tried to change the color of image
I made the same mistake.
As suggested on the discord server for this challenge we don't need to use pseudo-element.
You can apply the bg on the .img-card and then on the .img-card > img the blend mode set on multiply with .75 opacity.
Use the accent color as bg.
See you man.
I see just now, use rem and em instead of the px, and for the next one start writing css with mobile first approach with media queries min-width in em
