That i finished finally
What challenges did you encounter, and how did you overcome them?I have a lot of problems with the lists, to leave the space between the marker and the text, and to indent the second line.
What specific areas of your project would you like help with?Clean unnecessary css
Hello there!
Congrats on completing the challenge! ✅
I think your solution is not live yet, I'm not able to view the site.
Hope that's helpful!
Keep up the great work!
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Validation in a form is tricky one, but I have overcome them after several trials and errors
What challenges did you encounter, and how did you overcome them?I can finally implement validation in form using vanilla Javascript
What specific areas of your project would you like help with?Any feedback about better approach on how to handle validation in HTML using Javascript (I know there's HTML attribute to handle them quickly) but with Javascript only you have to manipulate the DOM state etc.
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using form submission message that will trigger on button click.
Example:
<div class="msg">
<div class="inner">
<img src="./assets/images/icon-success-check.svg" alt="Success">
<p>Message Sent!</p>
</div>
<p>Thanks for completing the form. We'll be in touch soon!</p>
</div>
JavaScript:
const successMsg = document.querySelector(".msg");
myForm.addEventListener("submit", (e) => {
e.preventDefault();
allFields();
if(firsName.value.trim() == "" || lastName.value.trim() == "" || emailValidate(email.value) === false ||
message.value.trim() == "" || !generalParent.parentNode.classList.contains('active') || checkBox.style.display == false){
console.log('Required all fields')
}else{
console.log("all fields are filled")
successMsg.style.display = "block";
}
});
Hope that's helpful!
Keep up the great work!
Hello there!
Congrats on completing the challenge! ✅
Your project looks great!
I have a suggestion about your code that might interest you:
📌 You can use the <picture> tag when you have different versions of the same image.
Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.
Example:
<picture>
<source media="(min-width: 768px)" srcset="{desktop image path here}">
<img src="{mobile image path here}" alt="{alternative text here}">
</picture>
I hope this helps!
Other than that, excellent work!
iam happy
What challenges did you encounter, and how did you overcome them?no
What specific areas of your project would you like help with?no
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Following the BEM methodology.
What challenges did you encounter, and how did you overcome them?Using padding and margin to assign space between elements. But insted, I set the the card-main display to flex column so I could use gap to separate the childs.
What specific areas of your project would you like help with?I could use some help if someone can give me feedback on how I wrote my css. is it scalable and maintainable?
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
I'm really proud of widening my understanding on how react works. Although this is just a front-end page, it really solidified my knowledge on components and how to deploy a react in GitHub pages.
What challenges did you encounter, and how did you overcome them?Deploying react in GitHub pages was a nightmare. It turns out, I needed to properly reference the images' paths properly with consideration of deployment.
For a light problem, I had problems with sizing my elements based on the browser's screen resolution. I had to experiment using different measurements and style properties to achieve that. Though I'm not quite sure if my way of doing it is correct or efficient.
What specific areas of your project would you like help with?I'd like to get help with how I built my CSS styles. I'm not sure what measurement units to use on different scenarios. I tried searching for answers but I wasn't able to get a solid one as people use different types.
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
The fact that i could finish this within 30 mins was great
What challenges did you encounter, and how did you overcome them?I learned how to create a favicon and additional CSS functionalities.
What specific areas of your project would you like help with?I want to understand more about how to use fonts.
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
usage of flexbox
What challenges did you encounter, and how did you overcome them?positioning using flexbox, helped out by youtube and w3school
What specific areas of your project would you like help with?none
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
I am most proud of the responsive design I implemented for this challenge. Next time I would focus on minimizing the CSS file size by removing unused styles and exploring more advanced techniques.
What challenges did you encounter, and how did you overcome them?During this html & css challenge, one of the main challenges I encountered was use different images for desktop view and mobile view. I overcome this by set desktop image as element in html and hidden this image in mobile view using media queries and add mobile size image as background.
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
Being able to remember the complexities of CSS layouts.
What challenges did you encounter, and how did you overcome them?Media queries were a bit hard to remember, but after revisiting them and some revision, I was able to pull through.
What specific areas of your project would you like help with?If you have any ideas on a better approach, do leave them in the comments.
Hello there!
Congrats on completing the challenge! ✅
Your project looks great!
I have a suggestion about your code that might interest you:
📌 You can use pale blue color to your <body> and neutral white to <main>
Example:
body {
background-color: var(--Neutral-Pale-Blue);
padding-block: 10em;
}
main{
display: flex;
max-width: 38em;
column-gap: .4em;
margin-inline: auto;
padding: 1em;
background-color: var(--Neutral-White);
}
I hope this helps!
Other than that, excellent work!
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
I'm Happy that am progressing
What challenges did you encounter, and how did you overcome them?I encountered no problems
What specific areas of your project would you like help with?All
Hello there!
Congrats on completing the challenge! ✅
Your project looks great!
I have a suggestion about your code that might interest you:
📌 You can use the <picture> tag when you have different versions of the same image.
Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.
Example:
<picture>
<source media="(min-width: 768px)" srcset="{desktop image path here}">
<img src="{mobile image path here}" alt="{alternative text here}">
</picture>
I hope this helps!
Other than that, excellent work!
Please visit my CSS and tell me my bugs
Hi there! 👋
you can give width: 100% to your body to get full width of the viewport below the adjusted code.
you can use @media query for your card to be responsive on small screen.
body{
background-color: hsl(47, 88%, 63%);
font-family: Figtree-Medium;
font-size: 16px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
@media (max-width: 425px){
.card {
width: 90%;
}
}
Hope this was helpful 🙏
Good luck and happy coding! 🙌
This is my fourth challenge and i feel like the basic coding components are getting easier for me, also i'm spending less time to finish one challenge.
What challenges did you encounter, and how did you overcome them?Wasn't sure how to make the buttons work and there was a standard "shadow" thingy that i couldn't get rid of, turns out it was the border.
What specific areas of your project would you like help with?Would like to know how to get the exact width with only a jpg as reference. I had to guess and compare by eye each time and wonder if there is a more accurate way to do it.
Hello there!
Congrats on completing the challenge! ✅
Your solution is really impressive!
I've got a couple of ideas (about how to use HTML better) that could make it even stronger:
Think about using <main> to wrap your main content instead of <div>
Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.
These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
