@Hamidqasemi90Submitted 10 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 10 months ago
Hi @Hamidqasemi90,
You can replace
/images/image-qr-code.pngwithimages/image-qr-code.png.Hope it is helpful !
0 - @ivor-19Submitted 12 months ago@Harsh-Kumar-DwivediPosted 12 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 12 months ago@Harsh-Kumar-DwivediPosted 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 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 12 months ago@Harsh-Kumar-DwivediPosted 12 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 12 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 12 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 - @mbattalogluSubmitted 12 months ago@Harsh-Kumar-DwivediPosted 12 months ago
Hi @mbattaloglu,
Nice Solution !
I would suggest following:-
1.Prefer replacing
<div class="root">with<main>element.2.
<div class="card">is redundant.3.Prefer replacing
<h2>with<h1>.These will enhance your code, improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Stay Happy & Healthy !
Happy Coding !
0 - @mucahitozturkesSubmitted 12 months ago@Harsh-Kumar-DwivediPosted 12 months ago
Hi @mucahitozturkes,
Nice Solution !
I would suggest following:-
1.Prefer replacing
<div class="wrapper">with<main>element.2.
<div class="img-container">,<div class="img">are redundant. Only 1 container would be sufficient.3.
<div class="wrapper-infos">,<div class="info-container">are redundant. Only 1 container would be sufficient.4.Prefer using heading tags in hierarchical order, not for the purpose of text size or weight or both.
These will improve your code, enhance accessibility and make your markup more structured.
Hope these suggestions are helpful !
Stay Happy and Healthy !
Happy Learning !
Marked as helpful0 - @Kaung-Khant-Ko-KoSubmitted 12 months ago@Harsh-Kumar-DwivediPosted 12 months ago
Hi @Kaung-Khant-Ko-Ko,
Nice Solution !
I would suggest following:-
1.Prefer replacing
<div id="container">with<main>element.2.Only 1 container is sufficient for the card.
3.In comparison to the required design, box-shadow of the card on active states is not growing and the card has no outer black border.
Hope these suggestions are helpful !
Stay Happy !
Happy Coding !
Marked as helpful0 - @ahemimed1Submitted 12 months ago@Harsh-Kumar-DwivediPosted 12 months ago
Hi @ahemimed1 ,
Nice Solution !
I would suggest following:-
1.Prefer replacing
<div class="countainer">with<main>element.2.Consider replacing
<h2>with<h1>.3.Replace
<h4>with<div>.4.Prefer using heading tags in hierarchical order.
These will improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Happy Coding !
0 - @anindyooSubmitted 12 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud that I can complete this very first challenge without encountering any meaningful obstacles. I would also like to use additional technologies for my future projects.
What challenges did you encounter, and how did you overcome them?Challenges I encountered was I had to convert px to rem manually because they changed developer mode on Figma to paid only so I couldn't do the conversion through Figma anymore. Thankfully, I could overcome it by learning that you could do math operation in CSS, and the rest is on my repo.
What specific areas of your project would you like help with?So far, I can still help myself with what I'm dealing, but I'm open for any help and advice for this project.
@Harsh-Kumar-DwivediPosted 12 months agoHi @anindyoo ,
Nice Solution !
I would suggest following:-
1.Prefer replacing
<div class="barcode-card">with<main>element.2.Consider replacing
<div class="attribution">with<footer>element.These will improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Happy Coding !
Marked as helpful1 - @HansKevinSubmitted 12 months agoWhat are you most proud of, and what would you do differently next time?
Give some feeback
@Harsh-Kumar-DwivediPosted 12 months agoHi @HansKevin,
Nice Solution !
I would suggest following:-
1.Prefer using
<main>element instead of<div class="container">.2.Consider replacing
<div class="attribution">with<footer>element.3.Providing fallback fonts are useful.
4.In this project, I think it is not useful to select
containerclass as a part of CSS rule selector every time.5.Understanding CSS rule selector specificity could be helpful.
These will enhance your code, improve accessibility and make your markup more semantic.
Hope these suggestions are helpful !
Stay Happy & Well !
Happy Learning !
Marked as helpful0
