@sakthivel155
Submitted
@0xabdulkhaliq
@sakthivel155
Submitted
@0xabdulkhaliq
Posted
Hello Nanba 👋. Congratulations on successfully completing the challenge! 🎉
MAKING QR CODE ACCESSIBLE 📸:
alt
attribute which should explain the purpose of the image
.alt
with qr-code
is not even explaining for what the QR image need to be used.alt
with meaningful text which explains like QR code to frontendmentor.io
<img src="./images/image-qr-code.png" alt="QR code to frontendmentor.io" class="qr-code-img">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@FayeKs
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of completing my first project after a month of watching and reading tutorials.
What challenges did you encounter, and how did you overcome them?
The challenges i had while working on this project mostly had to do with CSS. I overcame them by using google, Chatgpt, and Youtube tutorials. Overall, i would say Kevin Powell's Youtube tutorials helped the most.
What specific areas of your project would you like help with?
Any constructive criticism on how i can better my html and css skills is welcome.
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
MAKING QR IMAGE ACCESSIBLE :
alt
attribute which should explain the purpose of the image
.alt
with qr
is not even explaining for what the QR image need to be used.alt
with meaningful text which explains like QR code to frontendmentor.io
<img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
I Gladly welcome you to the Frontend Mentor Community, Happy Coding!
@gmagnenat
Submitted
What are you most proud of, and what would you do differently next time?
I find my solution close to the design, so I'm quite happy about it. I learned more about the use of pixel vs rems and tried to apply this at the maximum in this solution.
What challenges did you encounter, and how did you overcome them?
It took me some time to figure out how to handle properly the different spacing and sizes. At first the challenge seems easy but there are many small details. With proper line-height and letter-spacing it helped get as close as possible to the design. I wrapped the card content in a form with a submit button, I will search more if there are specific markup to add to improve accessibility.
What specific areas of your project would you like help with?
I'd like suggestion on how to use more mixins to reduce the main.scss. If you can give me recommendation on accessibility markup I could add?
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
HTML 🏷️:
span
element for that with text-decoration: line-through
css property.span
there's actually a native semantic html element which comes handy in these situations. it is del
element<del>$169.99</del>
my submission
and/or feel free to reach out to me..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@asem-hasan
Submitted
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
CSS 🎨:
absolute
positioning.absolute
to center the component both horizontally & vertically. Because using absolute
will not dynamical centers our component at all statesFlexbox
or Grid
layout. You can read more about centering in CSS here 📚.Grid
to center the componentbody {
min-height: 100vh;
display: grid;
place-items: center;
}
.temple {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
What are you most proud of, and what would you do differently next time?
I'm glad I tried to apply what I learned about sass and bem notation. I'm sure I've still got a lot to learn, but this practical exercise has helped me to review the basics, which will help me to progress further.
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
It's my first attempt at using Sass and BEM notation. Any feedback on this is welcome, I'm not sure I'm using these tools correctly yet.
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
PREVENT LAYOUT SHIFTS 📉:
width
and height
attributes.img
which aren't explicitly declared with height and width attributes are usually re-sized using CSS (either on the image itself or the parent container). When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading the 'unsized images' and/or videos.img
element have no explicit width
and height
to prevent CLS,<img src="assets/assets/images/image-omelette.jpeg" alt="Omelette and salad" class="container__img">
<img src="assets/assets/images/image-omelette.jpeg" width="1312" height="600" alt="Omelette and salad" class="container__img">
height
and width
needs to have the actual measurements of that corresponding image. I shown mobile image as an example because Mobile devices can be easily affected by CLS than Desktop devices..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@mihainrs
Submitted
What are you most proud of, and what would you do differently next time?
I have focused more on the overall responsiveness this time around, ensuring it looks good on 1920, 1440, tablets and smaller mobile screens, and I have managed to get the CSS and HTML part out of the way fairly quickly.
What challenges did you encounter, and how did you overcome them?
Once again, given my inexperience with Javascript, I struggled quite a bit to get the code to work, and even in its current state, it's not exactly as it should be.
Still, I was able to get it all down myself which it's pretty nice. I clearly have to create many more projects to get used to and better at it haha
What specific areas of your project would you like help with?
Any feedback helps, as always!
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
CSS 🎨:
margin
or padding
.margin
and padding
to center the component both horizontally & vertically. Because using margin
or padding
will not dynamical centers our component at all statesFlexbox
for layout, but you didn't utilized it's full potential. Just add min-height: 100vh;
to properly center the component.#main-container {
margin-top: 5em;
}
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@arnoldagaba
Submitted
What are you most proud of, and what would you do differently next time?
I think I'm proud of being able to apply the skills I gained already so without using JavaScript. I think I should learn JavaScript to make my work easier next time.
What challenges did you encounter, and how did you overcome them?
I read somewhere that I'd need to use JavaScript to come up with the QR code. I later learned that I could use a Static image to ease my work as workaround of not using JavaScript.
What specific areas of your project would you like help with?
For this project specifically, I think I'm okay though I'd welcome any input on how I could have done things better.
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
QR iMAGE ALT TEXT 📸:
alt
attribute which should explain the purpose of the image
.alt
with QR Code
is not even explaining for what the QR image need to be used.alt
with meaningful text which explains like QR code to frontendmentor.io
<img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@mkhantk
Submitted
What are you most proud of, and what would you do differently next time?
It doesn't take much time like the last one. Sort of improvement.
What challenges did you encounter, and how did you overcome them?
It all went well. Another practical experience.
What specific areas of your project would you like help with?
Any suggestions? Thanks.
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
PiCTURE TAG 📸:
image
,<img src="images/image-product-desktop.jpg" alt="product-image-desktop" class="image1">
<img src="images/image-product-mobile.jpg" alt="product-image-mobile" class="image2">
.image1 {
width: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
min-width: 50%;
}
.image2 {
display: none;
}
@media (max-width: 600px) {
.image1 {
display: none;
}
.image2 {
display: block;
width: 100%;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
}
picture
element. It's commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.<picture>
<source media="(max-width: 768px)" srcset="small-image.jpg">
<source media="(min-width: 769px)" srcset="large-image.jpg">
<img src="fallback-image.jpg" alt="Example image">
</picture>
<picture>
tag contains three child elements: two <source>
elements and an <img>
element. The <source>
elements specifies different image sources and the conditions under which they should be used.my submission
and/or feel free to reach out to me..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@Viccyace
Submitted
What specific areas of your project would you like help with?
All feedbacks will be appreciated
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
LABELS 🔖:
input
elements wants a label
associated with it<label>
is used to create a caption for a form control. The <label>
can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attributelabels
are required to make forms accessible. The purpose of form
elements such as checkboxes
, radio
buttons, input
fields, etc, is often apparent to sighted usersform
element is not programmatically labeled. Screen readers users require useful form labels
to identify form
fields, So here using aria-label="{values}"
attributes for input
is enough to be accessible<input type="text" aria-label="First Name" placeholder="First Name" id="first-name" name="first-name">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@payalg22
Submitted
What are you most proud of, and what would you do differently next time?
I took relatively less time developing this one, in addition to proper usage of CSS properties. I'm now very comfortable using Flex.
What challenges did you encounter, and how did you overcome them?
It was a task to align elements vertically, majorly the buttons as close to the design. However, after moving things around, it turned out to be super easy.
What specific areas of your project would you like help with?
I did manage to get through it pretty easily, however, any suggestions would be great.
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
IMPROPER USAGE OF ALT 📸:
img
is somewhat vague and not descriptive enough.alt
attribute should explain the purpose of the image
, in our case the image is a portrait of Jessica. So alt with her name itself is enough.alt="Jessica"
<img src="./assets/images/avatar-jessica.jpeg" alt="Jessica" id="profile">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@seon318
Submitted
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
CSS 🎨:
margin
or padding
.margin
and padding
to center the component both horizontally & vertically. Because using margin
or padding
will not dynamical centers our component at all statesFlexbox
or Grid
layout. You can read more about centering in CSS here 📚.Grid
to center the component.body {
min-height: 100vh;
display: grid;
place-items: center;
}
section {
margin: 15vh auto;
}
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@polinagusakova
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
INCORRECT USAGE OF HEADINGS ⚠️:
<h1>
so it can cause severe accessibility errors due to incorrect usage of level-one headings <h1>
h1
element identifying and describing the main content of the page.h1
heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.<h1>
elements (Sedans, Suvs, Luxury
), you can preferably use <h2>
instead of <h1>
. Remember <h1>
provides an important navigation point for users of assistive technologies so we want to use it wiselysr-only
class to hide it from visual users (it will be useful for visually impaired users)<h1 class="sr-only">3-column preview card component</h1>
my submission
for this challenge where i used this technique and feel free to reach out to me..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful