@meantoes
@hameedmodibbo
Submitted
I have issues with the colors i dn't understand how the colors are used please someone enlighten me. on that why us card what background color is used there and also the join our community card please someone tell me
and for the layout i use grid-template-areas to do it and i add one media query for responsiveness
@meantoes
Posted
Hi, good job on completing this challenge🙌🏻
I see that you used the wrong color for some sections, if you want to match the design, you can try them one by one until it matches.
If you haven't, I suggest you use Live Server extension on VS Code to see how your code would look like, any browser works fine but I recommend you to use Firefox to live the code. It's my preference, I think it's more convenient, especially to inspect the page.
I hope you find this helpful, have a nice day and happy coding⭐
@ssuish
Submitted
I am a beginner in web development, and I had a difficulty understanding the behavior of CSS. Due to my lack of experience in CSS styling, do you have any recommended resources regarding best practices, tricks, and techniques?
@meantoes
Posted
Hi! congrats on completing your first challenge⭐
I have some recommendations for you
<main> tag, you can learn more about HTML semantic tags hererelative units for margin, padding, width, and height. learn more about it herefor resources, I recommend you to check Kevin Powell's YouTube Channel, he gives lots of tricks and tips about CSS. I also recommend Web Dev Simplified, this is my preference, I like the way he explained things.
oh and, check this video from the CEO of Scrimba, you might become more comfortable in web dev after knowing those checklists.
hope this helps, have a great day⭐ and happy coding🙌🏻
@FSKaura
Submitted
i most sincerely appreciate the host of the site. well where i find it difficult is the font size and background color. thanks.
@meantoes
Posted
hi! I see that GitHub can't read your code because of the way you name your file. Try to change your HTML file to index.html. I also recommend you rename your CSS file to style.css and reconnect it in your HTML file.
You can also check the style-guide file given for background-color. Lastly, try to match the font-size to the design
Don't forget to download this challenge's starter pack ⭐
hope this helps, have a good day and keep going🙌🏻⭐
@Mohamed8754
Submitted
@meantoes
Posted
hi! congrats on completing the challenge⭐ I have some suggestions that might interest you,
wrap the whole content in the <main> tag instead of the div .container
use alt attribute for the perfume image
for the css, use this trick to center the container
body element
body {
/* -- */
display: flex;
align-items: center;
min-height: 100vh
}
.container element, delete margin-top: 100pxem or rem for margin, padding, width, and height. here are some sources about CSS units, Relative and Absolute units in CSS and more complex sourcehope this helps
Marked as helpful
@aryandogra2003
Submitted
Open to feedback
@meantoes
Posted
hi! congrats on finishing this challenge!
I have some suggestions for the input type to match the design
be sure to check style-guide.md file, it be easier for u to match the design.
hope this helps🙌🏻 have a nice day⭐
@Xeotheosis
Submitted
Issues I can't figure out for the life of me:
If anyone can help me with this, I'd be forever in your debt. You can also send me an email by using the Contact section on the project :)
@meantoes
Posted
hi! congrats on finishing this project!
tbh, I have no idea how u write the code but if I can see the HTML file, I think u need more dividers for each section so u can set them with different sizes and displays.
here's how I'd do it:
.hero {
display: grid;
grid-template-column: 2fr 1fr
}
.skills {
display: flex;
flex-wrap: wrap;
}
/* add class skill for each item */
.skill {
width: calc(100% / 2 - 20px); /* adjust for each screen sizes */
}
.project-grid {
display: grid;
grid-template-column: 1fr 1fr; /* adjust for each screen sizes */
}
.contact {
display: flex;
flex-direction: row; /* adjust for each screen sizes */
justify-content: space-between;
}
dont forget to add margin for each divs. or in the main-container if u put them in a container.
hope this helps🙌🏻 have a great day⭐
Hi everyone,
I upgraded my solution based on good comments and other solutions. Thanks for that... It looks better now. However, there is no end to this work, right...
I'm not sure, can I use width and height values for my container elements like section-card? I'm still struggling with responsive design :(
And I don't know why my text area is shaking, I don't want it to appear this way but I couldn't fix it.
Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!
(Note: I separated style.css and media-queries.css for easy to read to code. I'll merge them later.)
@meantoes
Posted
Hi there, I'm currently trying to finish this challange but I can't find a way to make the header image moved from top to right :<
I only use flex but even with grid I still can't find a solution to do so, would you please help me or maybe give a trick to solve it? I'd appreciate it soo much⭐
I know this isn't feedback but I send this anyway🥲 oh and btw your solution looks 99% similar to the design, that's a great job and have a nice day⭐🙆🏻♀️
Marked as helpful
