Looking to hire developers?
@hardy333
@Sikootiponepone
Submitted
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.
@hardy333
Posted
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.
Marked as helpful
@Alone-07
Submitted
Feedbacks are highly recommended
@hardy333
Posted
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.
@simplyJC
Submitted
This is attempt for the huddle landing page using grid and flexbox. Making it responsive as well. Any feedback is highly appreciated. Thanks.
@hardy333
Posted
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.
Marked as helpful
@nogyuuu
Submitted
I would love to hear your criticism. Go nuts!
@hardy333
Posted
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 .
Marked as helpful
@Sanchez9aa
Submitted
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.
@hardy333
Posted
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.
Marked as helpful
@FluffyKas
Submitted
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!
@hardy333
Posted
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.
Marked as helpful
@iliand1
Submitted
How do I make the buttons correctly?
@hardy333
Posted
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.
@bhornbhaya
Submitted
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!
@hardy333
Posted
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.
Marked as helpful
@salolevi
Submitted
I can't get the buttons on the desktop version to stay aligned when the text accomodates to resolution, any advice?
@hardy333
Posted
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...
Marked as helpful
@salolevi
Submitted
I can't get the buttons on the desktop version to stay aligned when the text accomodates to resolution, any advice?
@hardy333
Posted
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;
}
Marked as helpful
@mahnoork18
Submitted
why my javascript code is not running :/
@hardy333
Posted
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.
Marked as helpful
@WackLantern
Submitted
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.
@hardy333
Posted
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.@peter-abah
Submitted
I had some issues trying to replicate the box shadow. I would appreciate any advice in replicating box shadows
@hardy333
Posted
Few Suggestions:
:hover syntax on element in css.Also What do you mean by replacing box-shadows ?
Marked as helpful
@thetemurr
Submitted
This is my fourth challenge, but I couldn't color(not use overlay effect) them after I changed the pictures from sng to png. I also don't understand the styles that involve two fonts. I mean I can only use one. If you can help me, please comment.
@hardy333
Posted
Hey, nice solution good job.
About your issues:
h1 tag and another font-family styles are applied on paragraph and button. One thing I suggest is to use one font-family property on body element - this font-family will be the one which you use all the time - it will be your default font-family.Other suggestions:
button:hover { cursor: pointer; background-color:hsl(31, 77%, 52%); color: #fff; }overflow: hidden; from body it is not needed.Good Luck.
Marked as helpful
@Hikmahx
Submitted
I've known bootstrap for a while but this is my first officially deployed one using it. There were some styling that I had to add sass because I didn't customize or use npm for bootstrap. I did use a really short time for this project. Any feedback would be appreciated. Thanks.
@hardy333
Posted
Nice job bro.. keep it up.
@Danny-for
Submitted
Hey, guys !! this is my first developed challenge, i hope i managed to apply the correct concepts of HTML and CSS. Please, if I can improve anything, let me know!!! thankful .
@hardy333
Posted
Hi, this is great result for the first time - good job.
Few suggestion:
.container__plans.background-color is too gray, try to change it and add box-shadow also.Marked as helpful
@nntt1210
Submitted
Any suggestions on improving the code would be appreciated!
@hardy333
Posted
Hey, nice solutions - good job.
But try to make it responsive on small screen sizes;
also add border: 2px solid var(--light-gray); on buttons, not only :hover state but also default state it will fix content shifting problem while hovering buttons.
Marked as helpful
@rafo38kh
Submitted
Any feedback is appreciated 🙂
@hardy333
Posted
Nice solution, good to see that you don't have accessibility issues,
One thing I suggest is to implement hover effects on buttons.
@gchristofferson
Submitted
Is there a better way to blend a background color with an image? I blended a linear gradient with the background image. Is there a better way I could have done this using a simple background color and background image? Maybe with the single background shorthand property?
@hardy333
Posted
Your background needs to be full size of the body element
@CarlosDRA
Submitted
The layout of this challenge showed a bit tricky. This time I couldn't put as much time as I would like but am satisfied with the result. The best thing is that i learned some tricks that will show helpful in the future.
@hardy333
Posted
Hi, I suggest that for .profile__media element use button tag instead of div. That way it will be keyboard focusable...
@AhmedSaidi99
Submitted
Hi, My second project as a newbie. Any advice or suggestion Would be appreciated!
@hardy333
Posted
<main></main> element for .container not devMarked as helpful
@Mazou2K21
Submitted
Hi im down for suggestion.
@hardy333
Posted
hey, nice solution, on desktop screen size card looks very good, it's good to see that you don't have accessibility and html validation issues. But there are some problems on mobile screen sizes : Cards' content starts overflowing, card gets scrollbars and so on.
I think main problem for your css which is a reason for scrollbars and other problems as well is incorrect unit values: don't use vh unit all the time instead use percentages, if you want your component to have some fixed width use width property and after that use max-width: 100%; those to property on combination will give you flexibility and your components will never start overflowing from their parent containers/components...
Good luck.
Marked as helpful
@thealexgonzo
Submitted
Hi everyone,
Here is my first challenge. I really enjoyed working on it and would greatly appreciate as much feedback as possible.
The one component I struggled with the most was the background wave image, I wasn't sure how to introduce it and eventually settled on including it as a background-image in the CSS file. I did find it difficult to adjust it properly to the layout and I'm not entirely happy with how it turned out, I think it could have been done a lot better, I'm curious to know what your thoughts are on my solution for this particular element, and what you would have done differently -->
.bg-image { position: absolute; background-image: url(images/pattern-background-mobile.svg); background-repeat: no-repeat; background-size: 100%; z-index: -1; width: 100%; height: 100%; }
There's two problems I have with it so far:
How it looks on the desktop view: I don't think it matches the design perfectly nor does it on the mobile view to be fair.
How it looks on mobile devices: when I viewed the completed design on my iPhone 8, annoyingly I could move the screen up and down and this ruined the design as the card was static on the centre of the screen with blank space above or below as I moved it.
Please do let me know if anyone had the same problems or what your solution would be for this.
** I also viewed the finished design on a larger iPhone 11 and again it looked way off because the viewport was vertically a lot larger which left blank space on the top and bottom.
@hardy333
Posted
That is a very impressive solution for the first time, design look almost the same as the design files Good job.
For your wave background you did quite good job implementing it, one thing you can change is not to use additional element for background image just use background-image property on body element or container element. that way there is no need to position image container absolutely and thing like that.
background-size: 100%; is useful property and it is good you used it, but on mobile screen sizes background has problem it becomes very small on height, to fix that you could use background-size: 100% 50%;
Marked as helpful
@Aklog-1
Submitted
If you guys see some bushing around on my java script and know some clever ways, please share them to me. And, one another thing, what can I do to refresh the page/stop preventing the default/ and actually submit it to back end if there are no errors?
@hardy333
Posted
Hi, super nice solution everything is on point good job.
Here is Few thing that might be slightly different in design files compared to your implementation:
You can try to change those thing but this way as it is now is also Ok. Also validation works quite nice and was happy to see that website is fully responsive.
About form submit on backend: I am sure you know there is event.preventDefault() property in javascript which prevents page from refreshing after submit event is fired. In order to submit your for data first of all you need to have backend xD and use method="POST" attribute on form element and action attribute as well.
there are also ways to collect form data without writing backend your own, for example netlify has that feature and there are buch of services which provide that functionality for free.
Marked as helpful
