I am always looking to improve accessibility best practices.
For the success screen, I used JavaScript to toggle the display from none to flex, and the component from grid to none. I don't know if this is best practice for this type of component and if it meets accessibility standards. Any advice on this, or anything else would be greatly appreciated.
Besides what I mentioned above, accessibility standards. I don't think my focus is correct for the social media links. I'm not sure if focus should be trapped within this div when it is active. Of course, I am always open to all feedback and suggestions for improvement.
I would really like to know if my use of and tags is ok for this project. Especially this piece of code in the hero section:
and within the hero I have this ``:
Group Chat for Everyone
I used the and elements, and I'm wondering if how I used as the wrapper for the entire card is OK, or if the cards also need to be's in a `` for this challenge.
There were several decisions I made that I had doubts about being the best practice, so I will explain my thought process, and if you see how I can improve please let me know:
I used flexbox in the body, and grid only in the wrapper which contains the 4 cards. I needed just a one-directional vertical alignment to stack my and. Inside my element, I have an which contains my and. I didn't see any need to include those in and complicate the grid.
I do wonder if this is good use of the element. I thought since there is no navigation here, wouldn't be correct.
For the cards I used and for each card. Is this the right situation for use a list for cards, and if so, when is it correct to add the attribute role="list"?
Implementation of the grid itself. It was easy to get the layout here, but it could have been done also using `grid-template-areas'. I like using the shorthand:
.card-1 {
grid-area: 2 / 1 / 4 / 2;
}
But if this is not recommended then I want to correct my ways.
Thank you!
I'm most proud of how the design adapts to different sreen sizes. I used a combination of grid-areas and media queries to make it happen.
What challenges did you encounter, and how did you overcome them?It was hard to think how I wanted the tablet design to be, at the end, I think I made it look good.
What specific areas of your project would you like help with?For the moment, nothing.
Hello @joacomenda, nice job with your solution. It's nice and responsive, and I see you used the clamp function for fluid font sizes. It's working really well.
There seems to be an bug somewhere in your JS, because I am not getting the correct json data when clicking on your different tabs. If you open your console, you will see there is an issue with your for loop at line 21. I hope that helps put you in the right direction for debugging.
Asking user to enter the details and checking them correctly with the help javascript something which I can be proud of.
What challenges did you encounter, and how did you overcome them?Making it responsive and showing the successful page to the user Used third party website to overcome from that.
What specific areas of your project would you like help with?Handling event listener and showing successful page.
Hi, I came across a couple of functionality issues:
I also noticed you used pixels for font sizes in your CSS. It is best to use rem units for accessibility.
Your solution is looking good, I think you'll need to work on the functionality and definitely learn about rem units. Good luck!
Hi Nizi, your functionality isn't working for me. When I click the button, the menu does not open. I see you are using sass, which I have only just started learning - I wish I could be more help with that. Your html looks good. Visually your solution is spot on. I think you are very close to an excellent solution once you resolve the javascript functionality.
Getting it responsive was not fun, tried following some of Andy Bell's 'every layout' principles.
What challenges did you encounter, and how did you overcome them?Had to learn more about the CSS clamp function.
What specific areas of your project would you like help with?I just need to practice more.
Hi Achara, really nice solution. Good job using custom properties and the clamp function too. If I could suggest only a couple minor things, you could maybe add a little transition for your button hover. And you can use rem units for your media queries too. Great job.
Deploying the site in grid
What challenges did you encounter, and how did you overcome them?Using grid, having mainly designed in flexbox previously.
What specific areas of your project would you like help with?Any improvements on the grid layout
Hi Martin, super nice job! Good use of custom properties and semantic html. One minor UI difference I noticed is that on desktop, the "quote" mark background image in the violet card should be a little further than the right edge, compared to the mobile version. If you want to match this a little closer you can easily adjust the distance in your media query. I noticed you used rem's, but you can also play with percentage for this.
I'm proud that I actually understood how the Grid works - it took me so long to actually understand how that works and hopefully in the future this becomes easier and easier.
*I redid the project after I saw that while my mobile version was ok, Desktop version just not good - I didn't really paid attention to the desktop measurements that they gave and made all the divs way too big. Took me another 2 days to finish this again
What challenges did you encounter, and how did you overcome them?Working with media queries was probably the most challenging part - but practice makes perfect. Another issue I faced is actually creating more space in the main body of the page, while mobile wasn't really an issue I still don't know how to create more space horizontally without redoing the whole project again.
What specific areas of your project would you like help with?Hi Dan,
I'm getting horizontal scroll on mobile and the cards are and your text above the cards is not responsive. I'm wondering if having min-width:100vh on your container is causing that. Maybe try using a max-width on your container. I also don't think you need to set heights for the different components here (except for the icons). Sometimes that too causes issues. Desktop is looking great, I think I would recommend working on the responsiveness.
