Any feedback is appreciated. Is there a way to change only the text color of the logo SVG, or is the dark mode logo missing? Also, is there a better way to fetch data, toggle states, and handle dark mode?
Hi there! You can change the fill color of the svg.
Hi jharshavardhan2003
Congratulations on completing this challenge!!! 🎉
HTML 📃:
<main> tag.<footer> tag for attribution.<div> with <main> for wrapping your content.CSS 🎨:
body{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
body{
display:grid;
place-content: center;
min-height: 100vh;
}
padding on the body and you can apply a max-width on your .container class so you don't have implement a media query.I hope you find this useful. Don't hesitate to reach out if you have any questions. Keep up the great work!!
Nothing to say! :)
What challenges did you encounter, and how did you overcome them?Well, it was the images in the body; I didn't know how to add them and position them, but in the end, I sort of managed to do it. I found two ways: one using background-image and the other with the <img> tag, but one is fully responsive from the start, and the other isn't.
Another thing was how to set the profile image as requested. In the end, I managed to do it, and I hope it's okay. :)
What specific areas of your project would you like help with?Any feedback! :)
Hi!
Congrats on completing the challenge! 🎉
HTML Tips:
<article> and <section> tags.<div> usage as it fails to clarify content.<ul>:<ul>
<li>
<strong>80k</strong>
<p>Followers>
</li>
<ul>
Using a <ul> (unordered list) tag is beneficial for structuring stats because:
In short, <ul> tags create well-structured, accessible, and consistent content presentation.
I hope you find these tips useful! If you need any clarification, I'm glad to help. Keep up the great work!
Clean, semantic HTML structure using appropriate elements for accessibility.
Responsive design implementation that works across different screen sizes.
Consistent visual styling matching the design requirements.
What challenges did you encounter, and how did you overcome them?Getting the equal-height columns to work properly across different content lengths.
Maintaining button positioning at the bottom of each card.
Ensuring the responsive layout breaks appropriately on mobile.
What specific areas of your project would you like help with?I’m happy to receive any feedback and suggestions for optimizing and improving the code! Always looking to learn and grow. 💡
Hi 👋🏼
Your project looks great! I have few tips to improve your solution.
Use Proper HTML Semantic Tags
<main> tag.
<main> tag because it identifies the primary content of the page.<footer> tag
<Footer> tag holds content like the copyright information, authorship information, and contact information just to name few examples.CSS 🎨:
*{
margin: 0;
padding: 0
}
To remove the scrollbar on desktop, you can adjust your CSS styles.
On the <body> I used flexbox to center the content the page. and used position: fixed on the attribution so content stays in one place.
body{
display: flex;
align-items: center;
min-block-size: 100vh;
flex-direction: column;
justify-content: center;
}
.container{
max-width: 960px;
margin: 0 auto;
}
.attribution{
position: fixed;
inset: auto auto 1rem 1rem;
}
Here is my solution to this challenge: 3-column preview component
I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!
I would appreciate feedback on if there is a way to have both the "button" text and the background JUST under that text be transparent while keeping the rest of the background as it is. Alternatively, is there a way to optimize my CSS so that I don't have to target each button individually: .category:nth-child(2) .button:hover {.
Hi there!
<a> tag in a <div> and its okay to add CSS styling to the <a> tag.aria-label="learn more about sedan cars" to the <a> tag to make link more the accessible for screen readers.<button> and <a> tag
a{
background-color: var(--Very-light-gray);
border: 2px solid var(--Very-light-gray);
transition all 350ms ease-in-out;
}
a:hover{
background-color: transparent;
color: var(--Very-light-gray);
}
In CSS you can add another CSS class like .button-sadans to change the button text color.
Here is my solution to this challenge: 3 Column preview card component
I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!
Hi @RahmaBahaa. Congratulations on completing this challenge!!!🎉
Your project looks good so far! I have a few suggestions to improve your solution.**
HTML 📃:
<main> tagExample:
<body>
<div class="container"><div>
<main class="container"></main>
</body>
The difference between the <div> and <main> tag is the <div> is non-semantic element that doesn't explain the content.
More info📚:
CSS 🎨:
Flexbox
padding because it is not needed..container{
display: flex;
align-items: center;
/*padding: 20px 100px; */
justify-content: center;
min-height: 100vh;
}
CSS Grid
.container{
display:grid;
place-content: center;
min-height: 100vh;
}
max-width instead of the width to .leftSection and .rightSection so the content will not stretch the page.width gives elements a fixed width that doesn't changeMore info📚:
Here is my solution to this challenge: Responsive Sign up form using HTML, CSS & JS
background-color is blue because the title and paragraph meets WCAG AAA accessible text for Color and Contrast fix.I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!
Hi @alaa-mekibes. Congratulations on completing this challenge!!!🎉
Your project look good and the only thing that concerns me is <div> for each section of the page.
You can fix that using the <section> or <article> tag
Example:
<section aria-labelledby="ingredients-title">
<h2 id="ingredients-title">Ingredients</h2>
</section>
<article>
<h2>Ingredients</h2>
</article>
More info📚:
Here is my solution to this challenge:Recipe Page
I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!
Hi @kisu-seo Congratulations on completing this challenge🎉!!
Your project looks amazing!
The only I notice is you are using multiple h1 on the page.
There should only be one h1 on the website.
You can use a h2 and h3 for the other titles.
Don’t use a certain heading level just because you don’t have style it in CSS.
I hope you find this useful. Having questions and need further guidance I’m happy to help.
I have tried to use correct semantic for my project and tried making it responsive as much as I can using SASS.
What specific areas of your project would you like help with?Any feedback is welcomed to make my project accessible and responsive.
Hi @hkaur108. Congratulations on completing this challenge!!!🎉
You are on the right track and need to focus on using semantic HTML tags.
HTML 📃:
<main> tag.<main> tag and attribution info in a <footer> tag.Example:
<img src="./images/image-qr-code.png" alt="Scan the qr code to visit frontendmentor.io website">
CSS 🎨:
styleguide.md file that give in the starter files provided from Frontend Mentor with the correct font-family.Max-width:100% and display:block; are great reset for images in CSS.Text-algin: auto; is a invalid CSS property. When building these projects be sure to use Developer Tools.
.text-container {
width: 100%;
text-align: auto;
}
.text-container {
width: 100%;
text-align: auto;
}
Here is my solution to this challenge: QR Code component
I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!
Well, I don't know. Maybe speed. Actually I am shown in Wall of fame this week with 110 points, so NOT BAD😎😎.
What challenges did you encounter, and how did you overcome them?I used to set the font-size for different pages in media queries, but I came accross an interesting function called clamp which made my work much easier😁😁.
GUYYYYYYYYYYS, I need to scroll to see the entire page while it shouldn't have been like this. Help me out!!!!!!
Hi @MarziaJalili. Congratulations on completing this challenge!!!🎉
Your project looks great so far!
On <body> you can remove the the default margin and padding.
.ping-container keep the padding-block:3rem on mobile devices and use a media query to remove the padding-block. The padding-block is the reason you see the scrollbar on desktop.
I hope that answers your question.
I liked this design overall, nothing currently that I would do differently.
What challenges did you encounter, and how did you overcome them?I didn't encounter any significant challenges.
What specific areas of your project would you like help with?I didn't need any help with this project in particular.
Hi @brandontaylor1. Congratulations on completing this challenge!!!🎉
Your project looks good so far!
HTML 📃:
Add alt text to images for screen readers:
<img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">
Wrap social media links in a ul tag:
<ul>
<li>
<a href="https://www.github.com">GitHub</a>
</li>
</ul>
target="_blank" to open links in a new tab.More info 📚:
CSS 🎨:
<body> and .container background color.body{
background-color: var(--gray-900)
}
.container{
background-color: var(--gray-800)
}
Here is my solution tho this challenge: Social Links Profile
I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!
I'd like to learn to put this on a mobile device so it looks good on 375px screen as well.
Hi @soniluvi. Congratulations on completing this challenge!!!🎉
Great job on your project! I wanted to share a few thought that might help you take it to the next level:
margin-inline:1rem; on the body that sets space on the left and right side.If you don't want to use Flexbox to center content on the page you can use CSS Grid as well.
CSS Grid in action below ⏬
.container {
display:grid;
place-content: center;
min-height: 100vh;
}
More info📚:
Alt Text for Images: Always include descriptive alt text for images. This ensures that screen readers and other assistive technologies can understand what the image represents, making your content more accessible.
Example:
<img src="images/image-avatar.webp" alt="headshot of Greg Hooper">
Heading tags in HTML are so important on webpage, guiding both users and SEO through the content.
Here's a quick breakdown:
<h1/>: Represents the main heading of the page. It's the most important heading and typically used once per page.
<h2>: Used for subheadings under <h1>.
<h3> to <h6>: Represent lower-level subheadings, each level down is less critical.
If you don't want to use the <h1> as the title use the <h2>
<h1> can have .sr-only for screen readers
Check out my solution here: Blog preview card
I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!
IT'S EASY , I LEARNED DISPLAY AND SAPN
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Hi @Kamalep. Congratulations on completing this challenge!!!🎉
Your project looks good. One thing I noticed is the absence of HTML semantic elements. Implementing these can greatly enhance your project in several ways:
<header>, <nav>, <main>, <article> , and <footer>, helps screen readers and assistive technologies understand content structure, making your site more accessible to users with disabilities.<main> tag and attribution in a <footer> tag<h1> on the page is HTML & CSS foundationsSEO: Search engines use semantic elements to comprehend the page content better, potentially improving your search engine rankings.
Code Readability: Using semantic HTML makes your code more readable and easier to maintain for you and other developers.
User Experience: A clear structure and meaning in your content enhance the overall user experience, making it easier for user to navigate and understand your site.
I hope you find this useful! Don’t hesitate to reach out if you have any questions. For more information on HTML headings, you can check out HTML Headings on W3Schools. Keep up the great work!
Im most proud of getting the challenge completed and having a free design credit from the leaderboard was necessary for this to look good.
I could make the scss and js code better and improve accessibility as well.
What challenges did you encounter, and how did you overcome them?Many challenges.
FileReader class to help manipulate the image easier.I would like to know ways I can improve my accessibily, scss code and my JS code.
Hi @dylan-dot-c. Congratulations on completing this challenge!!!🎉
To make your HTML more semantic when using <form> you can update your code with the example below
<form>
<fieldset>
<legend>Sign up to get Conference ticket</legend>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
</form>
You can put your <label> and <input> in each <fieldset>
More info📚:
I hope you find this useful and don't hesitate to reach out if you have any questions
Hi Dan. Congratulations on completing this challenge!!!🎉
I have a few tips to improve your solution.
HTML 📃:
The only title on the page is HTML & CSS foundation should be wrapped in a <h1>
Instead of using the <p> tag to wrap the publish date and make HTML more semantic use time tag.
Example:
<p>Published
<time datetime="2024-02-11">11 Feb 2024 </time>
</p>
Images must have alt text that screen readers can understand and improves accessibility.
<img src="./assets/images/image-avatar.webp" alt="headshot of Greg Cooper">
I hope you find this useful and don't hesitate to reach out if you have any questions
This is my first time integrating React and Vite into an existing codebase.
Hi @Estaire. Congratulations on completing this challenge!!!🎉
I have a few tips you might be interested in to improve your solution.
HTML 📃:
main tag!alt text for screen readers
<img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">To make your HTML more accessible
For the social media wrap them in ul tag
Adding aria-label="GitHub profile for Jessica Randall" on the <a> explains its purpose
Using aria-label for link purpose
<ul>
<li>
<a href="wwww.github.com" target="_blank"> Github</a>
</li>
</ul>
The code above is showing that a user can link on the Github link and go to the website.
Adding the target attribute on the <a> specifies where the document will open and in this case, users who click on link opens in a new tab.
More info📚:
CSS 🎨:
Here is my solution to this challenge: Social links profile
I hope you find this useful and don't hesitate to reach out if you have any questions.
I'd like help on how I could better set the dimension of the mobile screen size (375px - 425px).
Also any advice on the best rule of thumb to follow when setting vertical spacing. I find percentages with width dimension simple as it's usually just a percentage of the screen width or parent width, but height dimensions are a bit more tricky for me.
Hello @ DAJ350. Congratulations on completing this challenge!!!🎉
To fix the width issue, you can remove width: 64.444444444444444% its unnecessary.
You can add max-width on the .sign-up-form
The code blocks can be removed from your style.css file
.sign-up-form__text-content {
display: flex;
flex-flow: column nowrap;
row-gap: 2.5rem;
width: 42.727272727272727%;
height: 50.681818181818182%;
align-self: center;
}
@media only screen and (max-width: 48rem) and (min-width: 21.875rem) {
.sign-up-form__text-content {
width: 87.2%;
padding: 2.5rem; // you can add padding on all sides and remove the width and height
height: 100%;
}
Add cursor: pointer on the input
I used the <picture> tag this way in my solution
<picture>
<source media="(min-width: 60rem)" srcset="./assets/images/illustration-sign-up-desktop.svg">
<img src="./assets/images/illustration-sign-up-mobile.svg" width="375" height="284" aria-hidden="true" alt="">
</picture>
I hope you find this useful and don't hesitate to reach out if you have any questions
Hello @MatheusPolletti. Congratulations on completing this challenge!!!🎉
I have a few suggestions to improve your solution.
Update your code to this
body > .container {
/* margin-top: 10%; */
/*margin-bottom: 10%; */
background-color: hsl(0, 0%, 12%);
border-radius: 2%;
/* width: 30vw; */
padding: 1rem;
}
min-height: 100vh; on the body than the .container and padding: 1rem;/* This is a comment*/The media query below is unnecessary because on mobile devices your code is too small and social media links are outside the card.
To remove the scrollbar, add margin: 0; on the body
@media (max-width: 764px) {
body > .container {
margin-top: -50%;
width: 85vw;
height: 55vh;
}
}
I hope you find this useful and don't hesitate to reach out if you have any questions