Looking to hire developers?
@Pawel-Gnat
What are you most proud of, and what would you do differently next time?
I was happy to be playing around with offset of the large circles.
What challenges did you encounter, and how did you overcome them?
using the relative and absolute positioning. was good practice.
What specific areas of your project would you like help with?
Still unsure of the HTML semantics for a card. If anyone can provide a proper HTML semantic layout for a card that would be great.
@Pawel-Gnat
Posted
Hi mate :)
JFYI, if you are working with images that are decorative only (like an avatar of current user) you should use proper alts and aria labels for screen readers and A11Y requirements.
Example: <img src="./images/image-victor.jpg" alt=""> <img src="./images/bg-pattern-card.svg" aria-hidden="true">
now screen readers won't read them :)
But if you want to use alt for SEO or A11Y purpose, remember to make them as descriptive as possible :)
GL!
Marked as helpful
@coding-stock
Submitted
No way this is a newbie challange ... they should label it junior or higher ... i could'nt create the codes to check what number a user used ... can someone tell me how to do it .. thanks
@Pawel-Gnat
Posted
Hey :)
You almost got it! You just have to store the value (use e.g. .textContent) while selecting the button. Then you should dynamically display the value on next page.
@correlucas
Submitted
👾 Hello, Frontend Mentor coding community. This is my solution for the Testimonials Grid Section.
Feel free to leave any feedback and help me improve my solution or make the code clean!
🤩 I had a lots of fun building this challenge! Mainly because I understood how to apply a focus effect on the card hovered with only CSS and I've also created my own design changes and personal improvements to the challenge elements.
SPECIAL THANKS to @elaineleung that show me how to add different animation stats for the cards in the intro.
I added some features:
I'll be happy to hear any feedback and advice!
@Pawel-Gnat
Posted
I'm still learning how to use semantic html5 tags, so I would like to ask about your html structure.
Why did you use section to code each of your cards? I would rather think that all components here are embedded inside a one section, but cards are just a divs. Also, you have used h1 for each of your cards (I think, thats because you have used many sections here), but don't you think they should be simply paragraphs? I find them only as components, not fully website.
Edit: Forgot to add - I love your designs and eastereggs. :D really inspiring!
Marked as helpful
@CodingwithHeather
Submitted
I really like this challenge.. I still had to do a lot of research which I am sure is normal.. Feeling more comfortable with flex-box but still working on rem/em/px.. etc.
@Pawel-Gnat
Posted
Great job :) As you have said -> work with your rem em units. Don't mix them with px :)
Remember to implement in your css sheet this line of code below:
html {
font-size: 62.5%;
}
It will make your fonts 10px as a basic. It's a way easier to use your rem/em later. Good luck :)
Marked as helpful
@Psyche-dotcom
Submitted
@Pawel-Gnat
Posted
Hi, good job with your challenge!
Here are my few suggestions.
Good luck with your further challenges :)
@mahmood-mohie
Submitted
Do you have any questions about best practices?
@Pawel-Gnat
Posted
Your code is really clean and easy to read, I like it :)
eg.:
<div class="Info">
@prakhar3062
Submitted
@Pawel-Gnat
Posted
Good job with your challenge! :)
I found just 2 elements to improve :)
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
Marked as helpful
@evertzner
Submitted
Hi everybody, any suggestion on Look & Feel will be good received.
Thanks!!
@Pawel-Gnat
Posted
Hello Esteban!
Good job with your challenge. I suggest you working with mobile first workflow. Your "@media max 375px" card is bigger than "@media min 375px". Check it with your dev tools.
Changing it will be helpful with your future harder projects. :)
Good luck!
Marked as helpful
@emtiazahmed27
Submitted
Any suggestions would be appreciated. Thank you.
@Pawel-Gnat
Posted
Hi, you forgot to add some thing to your challenge.
@EngineerHamziey
Submitted
Hello Everyone, All feedback/review/correction/suggestions are welcome.
I've finished this project since few days back but I just keep looking for errors to correct and that make makes me loop through an infinite loop of correction. But I guess it can't be perfect.
here are my question:
a:focus-visible {
border: dotted 0.3rem var(--Soft-Pink);
padding: 0.3rem;
}
I used positive and negative border to make the boxes slightly away from each other, is there a better way ?
does the markup below work that much for SEO ? and what other <meta> would you recommend ?
<meta name="description" content="This is Engineer Hamziey's solution to FrontendMentor challenge(social proof section master)">
<meta name="Keywords" content="Web developer,Engineer Hamziey, Frontend developer">
@media (min-width: 1024px) for the desktop, the design doesn't look satisfactory on screens lesser than 1024px in my opinion, any comment on that? what's your opinion?@Pawel-Gnat
Posted
Hi mate. I've checked your code and my only advice is - try to code with a repeatable method.
Let me give you an example.
Your code:
.rating {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.each-rating {
color: var(--Very-Dark-Magenta);
font-weight: 700;
padding: 1rem 0;
margin-bottom: 1rem;
width: 100%;
background: var(--Light-Grayish-Magenta);
border-radius: 0.3rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Corrected code:
.rating {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.each-rating {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
color: var(--Very-Dark-Magenta);
font-weight: 700;
padding: 1rem 0;
margin-bottom: 1rem;
background: var(--Light-Grayish-Magenta);
border-radius: 0.3rem;
text-align: center;
}
See the difference? It's easier to work in a group if your code have some kind of styling order.
Marked as helpful
@Johna-123
Submitted
I'm not sure if the way I made it responsive is the best way to do it? How would you do it?
@Pawel-Gnat
Posted
Hi, you forgot to add google fonts in your html and try not to use <br> to wrap your text, but set some width and height to your div and nest it there. Add some margin-bottom to your gray text also. Btw. add <main> content to repair access issues and please don't use inline styling if you have css sheet to do this.
Good luck!
Marked as helpful
