@Hamidqasemi90Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
sorry the picture is not working.
Harsh Kumar Dwivedi
@Harsh-Kumar-DwivediAll comments
- @Harsh-Kumar-DwivediPosted 5 months ago
Hi @Hamidqasemi90,
You can replace
/images/image-qr-code.pngwithimages/image-qr-code.png.Hope it is helpful !
0 - @ivor-19Submitted 7 months ago@Harsh-Kumar-DwivediPosted 7 months ago
Hi @ivor-19,
Nice Work !
I would suggest following:-
1.Prefer replacing
<div class = "container">with<main>element.2.
<section class = "wrapper">is redundant as a container.3.Prefer replacing
<h3>with<h1>.These will enhance your code, improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Happy Coding !
0 - @hosssa185Submitted 7 months ago@Harsh-Kumar-DwivediPosted 7 months ago
Hi @hosssa185,
Nice Work !
I would suggest following:-
1.Prefer to have a single container for card elements and consider it to be
<main>element.2.Try using only one
<h1>element for the webpage.3.Try giving the card more width and a bit lesser height.
4.For cart icon, prefer changing
srcattribute toimages/icon-cart.svg.Hope these suggestions are helpful !
Happy Coding !
0 - @bhuvandev16Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
- I'm most proud of achieving a responsive design for the QR code component in just 20 minutes. It demonstrates my efficiency and understanding of HTML and CSS.
- Next time, I would focus on optimizing the code for better readability and maintainability. Additionally, I'd consider adding more features or enhancements to further improve the user experience.
- One challenge I encountered was ensuring cross-browser compatibility for the QR code component. To overcome this, I extensively tested the design on different browsers and adjusted the CSS accordingly to ensure consistent rendering.
- While I managed to create a responsive design quickly, I would appreciate assistance in enhancing the interactivity or functionality of the QR code component. Suggestions on improving accessibility or incorporating advanced CSS techniques would also be valuable for future iterations.
@Harsh-Kumar-DwivediPosted 7 months agoHi @bhuvandev16,
Nice Work !
I would suggest following:-
1.Prefer replacing
<div class="container">with<main>element.2.Prefer using
<h1>instead of<p>in the following and then adjust it's styling in CSS<p class="heading">Improve your front-end skills by building projects</p>3.Prefer replacing
<div class="Attribution">with<footer>element.These would improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Happy Coding !
Marked as helpful1 - @CristianoAAASubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I'm really proud that i could take on the challenges that i saw while coding and get the solution, one thing i would do it differently is being calmer when facing with a problem, because there's a solution and i just have to think for a little bit or seek for help that it will be all good.
What challenges did you encounter, and how did you overcome them?I had some problems with making the text placement perfect because i didn't know how to make them in the right place, i thought about using flexbox, creating divs for each one of them, but after thinking a little bit i remembered i could just use margins and it worked out well. To find out the right color i used a site called color picker. To make the right adjustments to the placement of the buttons and the card i used flexbox.
What specific areas of your project would you like help with?I would like to know if my using of flexbox in the project was optimal and if there's any adjustment i need to make.
@Harsh-Kumar-DwivediPosted 7 months agoHi @CristianoAAA,
I think there needs to be some adjustment done regarding the image visibility on the webpage, what you can do is, as you have defined image source as
<img src="assets/images/avatar-jessica.jpeg"/>, therefore, create a folder with the name asassets, inside that create another folder with the name asimages, inside that add the avatar Jessica image with the name asavatar-jessica.jpegand then drop theassetsfolder inside the github repository of this project.Nice Work !
Hope it is helpful !
Happy Coding !
0 - @CristianoAAASubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I'm really proud i figured out what i was going wrong in the preovious projects, but i would start from the top to bottom in the next projects.
What challenges did you encounter, and how did you overcome them?I encountered challenges with the text, but i figured going a little bit of the rules doesn't matter so I went of the style guide to make the text look the same as the image in the solution. I encountered some trouble with the margins, but with a little bit of patience it got resolved. Also at inserting the image i got an unknown error, but after some digging i discovered it was a mistype.
What specific areas of your project would you like help with?I would like some help at how to insert images that when i deploy the website with vercel, the image still apear on the site, and not just desapear .
@Harsh-Kumar-DwivediPosted 7 months agoHi @CristianoAAA,
I think as you have defined image source as
images/image-qr-code.pngin the HTML file, so, what you can do is, create a folder with name asimagesthen add the qr code image to the folder with the nameimage-qr-code.pngand then drop theimagesfolder into the github repository of this project. This should resolve the issue of image not showing.Nice Work !
Hope it is helpful !
Happy Coding !
0 - @LucasGitHubxSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I would like to receive feedback, so if you have any comment to do about my code, just do it :) thx
@Harsh-Kumar-DwivediPosted 7 months agoHi @LucasGitHubx,
Nice Solution !
I would suggest following:-
In comparison to the given design, active states effect is not present. I think you should add following code:-
main:hover { box-shadow: 20px 20px var(--Black); } main:hover h1 { color: var(--Yellow); }Hope it is helpful !
Happy Coding !
0 - @HansKevinSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
i need some feed back to improve my self. thanks!!!
@Harsh-Kumar-DwivediPosted 7 months agoHi @HansKevin,
Nice Work !
I would suggest following:-
1.Prefer replacing
<section>with<main>element and<div class="attribution">with<footer>element.2.Try giving classes more descriptive and meaningful names.
3.Understanding of flexbox would be highly useful.
4.Consider adjusting margin between the paragraph and the author.
5.Consider modifying following:-
Now:-
h1:hover { background-color: hsl(47, 88%, 63%); }After Change:-
.container:hover h1 { color: hsl(47, 88%, 63%); }6.Check font-face rules, They need to be corrected.
7.Box shadow of the card is not growing on the active states, try adding it too.
Hope these suggestions are helpful !
Happy Coding !
1 - @aaqibqadeerSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
completed the challenge
What challenges did you encounter, and how did you overcome them?design instruction didn't have width and height mentioned.
What specific areas of your project would you like help with?I want to know if I have followed the best practices and design is matching the mockup
@Harsh-Kumar-DwivediPosted 7 months agoHi @aaqibqadeer ,
Nice Work !
I would suggest following:-
1.Prefer replacing
<div class="card">with<main>element.2.Use
<h1>element for following instead of<div>:-Now:-
<div>Improve your front-end</div> <div>skills by building projects</div>After Change:-
<h1>Improve your front-end skills by building projects</h1>3.Use
<p>element instead of<div class="card-subtitle">.These will enhance your code, improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Happy Coding !
0 - @scamgiSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
the design was easy to do
What challenges did you encounter, and how did you overcome them?centering the div
What specific areas of your project would you like help with?idk
@Harsh-Kumar-DwivediPosted 7 months agoHi @scamgi,
Nice Work !
I think replacing
<h3>with<h1>element will improve accessibility.Utilizing flexbox for centering the card would be better.
Single container is sufficient for card elements.
Hope these suggestions are helpful !
Happy Coding !
Marked as helpful0 - @sonnuuuuSubmitted 7 months ago@Harsh-Kumar-DwivediPosted 7 months ago
Hi @sonnuuuu,
Nice Work !
I would suggest following:-
1.
<div class="container">is redundant.2.Prefer replacing
<div class="card">with<main>element.3.Prefer replacing
<h2>with<h1>element.These will improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Stay Happy & Well !
Happy Learning !
0 - @ParbaggaSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
This is my first challenge and I am happy that I was able to do it myself. .
What challenges did you encounter, and how did you overcome them?I learned about deploying and linking the project with Github repo within the same challenge.
What specific areas of your project would you like help with?I would appreciate the suggestions and advice by others. So that i can improve better.
@Harsh-Kumar-DwivediPosted 7 months agoHi @Parbagga,
Nice Work !
I would suggest following:-
1.Prefer replacing
<div class="card">with<main>element.2.Replace
<h3>with<h1>element.3.Understanding of the flexbox layout system will be useful in the long run.
These will enhance your code, improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Happy Coding !
Marked as helpful2
