sorry the picture is not working.
Latest solutions
- Submitted 12 months ago
NFT Preview Card Component Solution (HTML + CSS)
#accessibility- HTML
- CSS
I would love to know following:-
1.In general, any improvements or better methodologies I should prefer?
2.Any other approach of setting up the hover effect on the NFT image?
3.Is the background of the card similar to the given design?
Feedbacks are welcome ! Stay Happy & Healthy ! Thanks ! Happy Coding !
- Submitted 12 months ago
Responsive Order Summary Component Code (HTML + CSS)
#accessibility- HTML
- CSS
Would love to know following:-
1.What better approach could be used for designing the background?
2.Any suggestions in general or specifically regarding code optimizations, better approaches and production worthy practices.
Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Happy Coding ! Thanks 😀
- Submitted about 1 year ago
Responsive Product Preview Card Component Code
- HTML
- CSS
Would love to know solutions to following problem:-
How can I change
src
attribute value in `` element using only HTML & CSS for the purpose of displaying different images on different kinds of devices after giving it value once?Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Thanks !
- Submitted about 1 year ago
Mobile First Approach based code for Blog Preview Card (HTML + CSS)
- HTML
- CSS
Would like to know following:-
1.How to approach building frontends faster with lesser number of issues?
2.How to build design such that when user hovers over "HTML & CSS foundations" then its color changes to yellow and then only main's shadow increases?
Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Thanks
- Submitted about 1 year ago
Flexbox based Profile Card Component
- HTML
- CSS
I would like to know what could be the simplest approach to place background patterns in this project to achieve the required design?
Checkout my solution ! Feedbacks are welcome ! Thanks ! Stay Happy & Well !
Latest comments
- @Hamidqasemi90Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?@Harsh-Kumar-DwivediPosted 10 months ago
Hi @Hamidqasemi90,
You can replace
/images/image-qr-code.png
withimages/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
src
attribute 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.jpeg
and then drop theassets
folder 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.png
in the HTML file, so, what you can do is, create a folder with name asimages
then add the qr code image to the folder with the nameimage-qr-code.png
and then drop theimages
folder 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