harpreet-singh-147ā¢ 240
@harpreet-singh-147
Submitted
Feedback would be greatly appreciated. Enjoy the process - have fun building.
Hussein Samy
@HusseinSamy
All comments
- Hussein Samyā¢ 340
@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
1 - RODOLFO RODRIGUEZā¢ 60
@rodjoker
Submitted
Hussein Samyā¢ 340@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
0 - Kevin Padillaā¢ 310
@KevinPadi
Submitted
Hi! š This solution was developed with React, Tailwind and React Wouter for pagination. Any feedback is welcome! šš
Hussein Samyā¢ 340@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
1 - Ahlamā¢ 300
@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!
Hussein Samyā¢ 340@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
0 - Manish Patelā¢ 730
@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.
Hussein Samyā¢ 340@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
1 -
- Abhay Kumarā¢ 450
@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. šāļø
Hussein Samyā¢ 340@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:
- Use this syntax to link your screenshot in the README file:
- Don't write your tailwind code inline with the HTML code ā instead use BEM to name your classes and use the
@applydirective 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
1 -
- PJordan Herrera Veraā¢ 490
@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.
Hussein Samyā¢ 340@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:
- Define types for your variables:
let password: HTMLSpanElement = document.querySelector('.password-txt') as HTMLSpanElement- Wrap this code inside it's own function and just call it when needed (clean code)
form?.addEventListener('submit', generatePassword) range?.addEventListener('input', updateTxt) copyButton?.addEventListener('click', copyEvent)- Add type to the
checkboxCharsconstant
type 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
1 - Shyfterā¢ 30
@Shyfter
Submitted
Hussein Samyā¢ 340@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! š
0 - archeanaā¢ 10
@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.
Hussein Samyā¢ 340@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
0 - Kirsten āØā¢ 460
@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
Hussein Samyā¢ 340@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:
- 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">-
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
0 - M'I'Eā¢ 10
@MIE-CODE
Submitted
The project was built base on basic html and css code , with that alone you can build it.
Hussein Samyā¢ 340@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
0 - Chrisā¢ 100
@DeveloperChrisP
Submitted
I struggled centering my eye icon. I eventually remembered that the container needs to have position: relative, to house the absolute icon.
Hussein Samyā¢ 340@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:
Hope you find it useful!š
Keep up the fantastic work, and happy coding! š
Marked as helpful
0
