i had a challenge with adjusting the of card in media query, the method I used isn't efficient since i only adjusted the height of the div containing the card, isn't there another way to adjust the height.
Hey, nice solution. Congratulations on completing it.
Few suggestions:
cursor: pointer; on button elements and also try to add some :hover effects on them.width: 100vw; on .container class use width: 100%; instead, this will fix horizontal scrollbar problem which appear on smaller screen sizes when there also is vertical scrollbar, and in general most of the times use percentages instead of vw unit for width values, if there is not some very special case.Good luck and have a nice day, hope this tips and suggestions will help you.
Feedbacks are highly recommended
Hi, nice solution, congratulations on completing it.
Visually everything look super good and nice good job on that.
But there are some html accessibility issues as you can also see in the report above. There are few things you can do in order to fix those issues:
<main> tag on your page, everything in this tag is considered as a main and primary content, in this case profile cards are main content. So for .container.grid element you can use main tag instead of div tag.main tag every page also need to have h1 tag, in this case there are no heading for which you will use h1 tag, but luckily there are special .sr-only tag which you can use, you can read more about sr-only tags from here, or even try to search about .sr-only class in google to find some good articles and read about it..sr-only h1 tag you should use h2 tags for heading for each profile-card component, not h3, so basically try not to jump on heading tags and try to use them in increasing/order without skipping any of them.I think this fixes will resolve all html accessibility issues (hopefully).
Good luck and have a nice day.
This is attempt for the huddle landing page using grid and flexbox. Making it responsive as well. Any feedback is highly appreciated. Thanks.
Hi, congratulations on completing this challenge.
Few Suggestions:
<br> tag in the h1 tag. This is a very little detail by I think it is important.li/a tag.Hope this suggestions will help you. Good luck and have a nice day.
I would love to hear your criticism. Go nuts!
No criticism whatsoever, You killed it.
One small thing - on small screen size .container element becomes smaller than screen size and background images does not take whole space on screen, so maybe moving those background images to body element might be better I think .
An application made with react. All feedback that you want to give about how i could improve this app would be awesome.
Thanks to all the community.
Hi, nice solution.
You need to fix some issues on react side:
If user filters countries by region or by name from search input and then clicks country in order to see its' individual stats on separate page there are same react errors , you can replicate this error or just check this image out. Looks like you are incorrectly reaching to date and getting undefined but I am not 100% sure.
When use navigates from individual country page from main/home page you are making new request for all the data every time. This is not very optimal try to save response data on the first response and then use it over and over again.
Hey guys,
I found this was an overall pretty easy challenge, I completed it in an hour or two. Most of this time I've spent on trying to figure out the background shadows (ended up using a mix of box-shadow and pseudo-element) and pondering what would be the best solution for the image overlay from an accessibility point of view. I went with having a link and an image side by side in a container (was wondering if it would be a better solution to wrap the image inside the link?) and used ::before for the overlay. I'm not sure if this is the prettiest solution, as I had to use fixed width&height to achieve what I wanted. If anyone can recommend something nicer, I'd really appreciate it!
If you have any feedback on other parts of my solution, I'd be very happy to hear that as well!
Have a great day everyone!
Hi, nice solution but why don't you just insert image element in to the <a></a> ?
It would be the easiest way I guess(if I understand correctly what you are trying to do), if user wants to click it, that activates hover effect anyways.
And also you can add :focus state on <a> tag and that will be same as hover state, in case someone only uses keyboard and not mouse/cursor.
How do I make the buttons correctly?
Hi, I suggest to move .button-area in to the .card__img div than make .button-area position to absolute and card__img position to relative that way buttons always be positioned and attached with image container div and it will be easy to position it as you wish.
Hi there,
This is my first Frontend Mentor challenge submission and the first project for escaping tutorial hell😅
I completed this challenge using HTML, CSS and SASS.
Any type of feedback is more than welcome!
HI, first of all congratulations for escaping tutorial hell xD. For the first time try this is extremely good solution - nicely done.
Few suggestions here:
button and a tags.annual-plan__text--change link tag change text color, it is more like purple color on design files than blue, and also lower font size on it..annual-plan__text--change class name is overly complicated long and even incorrectly set - semantically. Instead try to use something like .annual-plan__link for example this is shorter easy to understand and semantically correct.-- modifier syntax. For example in case of .summary__text, .summary__text--main and .summary__text--sub, summary__text is a div container which wraps all the card text including h1 and p, .summary__text--main is h1. your class name and its modifier --main implies that h1 is some kind of modification of div, which is not correct. So relationship between .summary__text, and .summary__text--main is not that one is modification of other, their relationship is more like one (h1) is child of other(div). So in your case I will use classnames like this: .summary__text for div .summary__text__heading for h1 and .summary__text__paragraph for p. Or you can even use .summary__heading and .summary__paragraph for h1 and p respectively.Hope this suggestions will be helpful.
Good Luck.
I can't get the buttons on the desktop version to stay aligned when the text accomodates to resolution, any advice?
Also in your .card-section element instead of using section tags use div tags you are using too many <section> tags in wrong places, semantic html elements are good but you need to use them at correct places...
I can't get the buttons on the desktop version to stay aligned when the text accomodates to resolution, any advice?
In order to make buttons stay aligned you can try this styles (as Robin Rowell already suggested):
.sedan-btn-container{ margin-top: auto; } .card-section { padding: 25px 35px; text-align: left; line-height: 1.5; display: flex; flex-direction: column; }
why my javascript code is not running :/
On line 72 and 73 instead of social you should use icon[0]. "social" - variable doesn't exists in your code instead you have icon variable which you call it getElementByClassName("social") - this thing which itself is HTMLCollection object which is almost like a array that is why you need [0] syntax to reach your real .social element.
Thank you for taking the time to view my code. This is my first time building a project with JavaScript. It was extremely difficult, but I managed to figure it out. I will appreciate any and all feedback.
Hey, nice solution but you have too many accessibility and html validation isses. In order to fix them:
.card element use <main></main> element instead of <div></div>h2 tag instead of h3 this will fix one issue.