@harpreet-singh-147
Submitted
Feedback would be greatly appreciated. Enjoy the process - have fun building.
@HusseinSamy
@harpreet-singh-147
Submitted
Feedback would be greatly appreciated. Enjoy the process - have fun building.
@HusseinSamy
Posted
Hello @harpreet-singh-147, šš»
Awesome job on taking the first steps towards your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. I like your design accuracy, but just one thing you may have overlooked, you used the bold font instead of the light weighted one. overall - everything looks perfect.
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@rodjoker
Submitted
@HusseinSamy
Posted
Hello @rodjoker, šš»
Awesome job on taking the first steps towards your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. I like your code organization. Though, I have some additions to make more clean:
1.Heading tags should increment accordingly for better web accessibility:
======= here should be the <h2>
<h3 class="product">PERFUME</h3>
======= and here the <h3>
<h2 class="gabrielle">Gabrielle Essence Eau De Parfum</h2>
*note: the main <h1> tag font-size could be smaller than the <h2> tag in some cases, but the order is crucial.
2.Use Bem for naming your styles.
3.Add meta tags:
<meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@KevinPadi
Submitted
Hi! š This solution was developed with React, Tailwind and React Wouter for pagination. Any feedback is welcome! šš
@HusseinSamy
Posted
Hello @KevinPadi, šš»
Awesome job on taking the first steps towards your dream!
** Actually, I like your solution more than the design š. I have some slight recommendations for you:**
1.Show an error message if the client failed to fetch the data:
const getCountries = () => {
useEffect(() => {
fetch('https://restcountries.com/v3.1/all?fields=name,flags,tld,currencies,capital,region,subregion,languages,borders,population')
.then(response => response.json())
.then(data => {
setData(data)
})
.catch(error => {
==== In the next line, you can use alert() instead of console.error() to let the user know what happened.
console.error('Hubo un error al obtener los datos:', error)
})
}, [])
}
2.I don't know what the user will see in case the countries didn't come back, but if you handled, great job! āØ
3.Add meta tags:
<meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@AhlamAb22
Submitted
I finished this challenge using HTML and CSS. I tried to pay attention to details and work in an organized way. I would love to receive your feedback!
@HusseinSamy
Posted
Hello @AhlamAb22, šš»
Awesome job on taking the first steps towards your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. good job on giving web accessibility a priority in your styles. Though, I have some additions to make more clean:
1.Add meta tags to your project:
<meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">
2.Use the clamp()
method to resize the text based on the viewport width.
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@savvystrider
Submitted
I avoided doing this project for a while, but I'm glad I finally tackled it. Had some trouble with the form validation and responsive styles.
@HusseinSamy
Posted
Hello @savvystrider, šš»
Awesome job on taking the first steps towards your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. I have a quick suggestion that would level up your submission:
Don't forget to add a README file for your project to let people know what you have did.
Use Bem for naming your styles.
Add meta tags and a favicon to your project:
<link rel="icon" type="image/x-icon" href="favicon.ico"> =====> Favicon path
<meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@abhay0480-eng
Submitted
Hi there š, Iām Abhay, and this is my solution for this challenge.Ā š š ļø Built With:
Reactjs āļø
TailwindCSS. šØ
ā Question: Any suggestions on how I can improve and reduce unnecessary code are welcome! Thank you. šāļø
@HusseinSamy
Posted
Hello @abhay0480-eng, šš»
Awesome job on taking the first steps towards your dream!
I really like your submission, great work! Though, I have some recommendations for you:
![](/your-screenshot-path)
@apply
directive in tailwind inside your css file, for example:.main-container {
@apply flex flex-col lg:justify-center h-screen;
}
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@jordanheve
Submitted
Hello everyone, this is my first time implementing TypeScript in a project, how did I do? I would be very grateful for any recommendations on my code.
@HusseinSamy
Posted
Hello @jordanheve, šš»
Awesome job on taking the first steps towards your dream!
I really like your submission and how you handled state of the strength meter through CSS (I didn't think in it that way when I was developing it). Though, I have some recommendations for you:
1.You can replace this code:
window.onload = () => {
range.value = '10';
checkBoxes.forEach(checkbox => checkbox.checked = false);
}
by setting the attributes directly in the html, they should look like this:
<input type="checkbox" name="uppercase" id="uppercase" checked />
2.Regarding some Typescript recommendations, you can do these:
let password: HTMLSpanElement = document.querySelector('.password-txt') as HTMLSpanElement
form?.addEventListener('submit', generatePassword)
range?.addEventListener('input', updateTxt)
copyButton?.addEventListener('click', copyEvent)
checkboxChars
constanttype CheckboxChars = {
uppercase: string;
lowercase: string;
numbers: string;
symbols: string;
};
const checkboxChars: CheckboxChars = {
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
lowercase: 'abcdefghijklmnopqrstuvwxyz',
numbers: '0123456789',
symbols: '!@#$%^&*()',
};
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@Shyfter
Submitted
@HusseinSamy
Posted
Hello @Shyfter, šš»
Awesome job on taking the first steps towards your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. Though, I have some suggestions for you:
1.Adding meta tags to enhance the SEO, such as:
<meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">
2.Using some CSS naming convention to properly name your CSS classes, BEM would be a great choice.
3.It's a better practice to put all your assets (images, icons, etc..) under a subdirectory called "assets".
4.Leaving some space and writing comments in your HTML can save you sometime when navigating your code, something like this:
< ========== >
< Left Section >
< ========== >
<section>
...
</section>
< =========== >
< Right Section >
< =========== >
<section>
...
</section>
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
@archeana
Submitted
I saw some tutorials and I did not know a lot of things. Such as the CSS variables make everything so easy. I only now know how to make them.
I have problems with the responsiveness and the idea of mobile first is very interesting. I hope to have some time to work on other projects.
I'm learning by myself and always wonder what the best practices are.
@HusseinSamy
Posted
Hello @archeana, šš»
Awesome job on taking the first steps towards your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. However, I have some quick suggestions for you:
1.Regarding commit messages, you can use some conventions, it will help you a lot in your future career when working in teams.
2.You can put all your project assets (icons, images, etc..) in a folder and call it "assets" for better code structure.
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@ofthewildfire
Submitted
Hi-yo, this is my solution for the Huddle landing page
I used Grid and Flexbox and I did my best to make it function as it is supposed to. I had issues with the background image for a bit as well as the hover states.
Any advice appreciated
@HusseinSamy
Posted
Hello @ofthewildfire, šš»
Awesome job on taking the first steps towards your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. However, I have some suggestions for you:
<meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">
Correct me if I am wrong, but I think that you are using the modifiers (in BEM naming convention) at the wrong place ā they should be used to changes the appearance of the block. Here is their docs
Leaving some space and writing comments in your HTML can save you sometime when navigating your code, something like this:
< ========== >
< Left Section >
< ========== >
<section>
<-- Left Image -->
<img>
<-- Attribution -->
<div>
</div>
</section>
< =========== >
< Right Section >
< =========== >
<section>
...
</section>
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
@MIE-CODE
Submitted
The project was built base on basic html and css code , with that alone you can build it.
@HusseinSamy
Posted
Greetings @M'I'E, šš»
Fantastic progress on embarking on the journey toward your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. However, I have a brief recommendation regarding your commit messages. Consider adopting some conventions such as this; it will prove beneficial in your future career, especially when collaborating with teams.
Hope you find this valuable! š
Keep up the outstanding work, and enjoy your coding journey! š
Marked as helpful
@DeveloperChrisP
Submitted
I struggled centering my eye icon. I eventually remembered that the container needs to have position: relative, to house the absolute icon.
@HusseinSamy
Posted
Hello @Chris, šš»
Awesome job on taking the first steps towards your dream!
I'm thrilled to see your engagement with this platform to enhance your design skills. I have a quick suggestion for a small improvement in your README file to showcase your screenshot more effectively. You can directly import it into the file for immediate visibility using the following syntax:
![](/your-screenshot-path)
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful