All comments

dolapobj• 60
@dolapobj
Submitted 14 days ago
What are you most proud of, and what would you do differently next time?

Most proud of completing it quickly within an hour and learning the proper way to format rounded corners, drop shadow, and align using CSS.

What challenges did you encounter, and how did you overcome them?

I eye-balled the dimensions of the qr code and the text size. I could do better to get the exact dimensions to understand how to replicate the design more closely.

What specific areas of your project would you like help with?

I would specifically like help on my CSS and if I structured my CSS in the most effective way. For example, in my styles.scss file, I set a variable for the distance between elements and made all distances on the page between elements a multiple of that initial value, which I think was a good practice. Are there other good practices like that that I should consider for future projects?
Qr Code Component Using HTML and SCSS
#sass/scss
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 14 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your needs that I believe will be of great interest to you.

CSS NAMING CONVENTION 🚫:

Looks like the naming conventions you used for css needs to be better, you can take a look at BEM Naming Convention.

BEM helps to create modular, reusable, and maintainable code. With BEM, you can easily identify which styles apply to which elements, making it easier to modify and update your CSS.

BEM naming conventions provide a clear structure and naming hierarchy for your CSS classes. This makes it easier to read and understand your code, even for other developers who are not familiar with your project.

BEM helps to avoid naming collisions and specificity issues. For example take a look at your current code where naming collisions can happen which could lead to specificity issues.

.card h1 { font-weight: 700; .... }

This can be refactored using BEM Method like this, (I changed h1 to heading because it's more verbose and readable).

.card__heading { font-weight: 700; .... }

BEM makes it easier to collaborate with other developers on larger projects. By using a shared naming convention and structure, you can ensure that everyone on the team is using a consistent approach to styling, which reduces confusion and errors.

This article on CSS-Tricks provides a beginner-friendly introduction to BEM and explains the key concepts and benefits of using BEM.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
P
yu kyoung kim• 70
@codingaring
Submitted 14 days ago
What challenges did you encounter, and how did you overcome them?

I thought if I give z-index : 5 to the "work-section" class and give "negative-margin", it might overlap, but it doesn't work the way I want it to. Please help me
Please tell me how to solve the z-index of footer
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 14 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your doubt that I believe will be of great interest to you.

PLACING "WORK-SECTION" AS PER DESIGN 💡:

" I thought if I give z-index : 5 to the "work-section" class and give "negative-margin", it might overlap, but it doesn't ", Don't worry we can easily place that for half of the bottom using position property.

Instead of trying z-index in static position, You can try to set position to relative and then you can able to move on the element for any direction you want (like top, bottom, right etc.)

Here's the snippet which might help you,

.work-section { position: relative; bottom: -29rem; }

Now you can able to see those changes, and another thing to note here is you need to remove margin-top from work-section so that extra white space will be purged.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
Kurt3z• 50
@Kurt3z
Submitted 18 days ago
What specific areas of your project would you like help with?

Hello everyone, I'm having a small problem in my solution.

By hovering over the "Continue" button, when the cursor leaves the element, it flashes white. On the .btn selector, I'm using the transition property to create a smooth effect, and that may be what is causing the issue. I wasn't able to find any fix that wasn't completely removing the transition property and the effect.

If anyone could be able to expend some of their time trying to help me understand why this issue occurs, I would be extremely grateful.

Thanks in advance.
Results Summary Component using HTML and CSS
4
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 18 days ago
Hello @Kurt3z 👋. Congratulations on successfully completing the challenge! 🎉

Actually you can easily fix that flashing behavior of button during hover by change the background property to background-image property.

Example:

.btn:hover, .btn:active { background-image: linear-gradient(to bottom, #7857ff, #2e2be9); }

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
2
P
Javier• 40
@suarez8924
Submitted 18 days ago
What are you most proud of, and what would you do differently next time?

Pretty quick component to do.

What challenges did you encounter, and how did you overcome them?

No challenges, it was pretty straightforward.

What specific areas of your project would you like help with?

Any feedback or recommendations are welcomed.
QR Code Component
#sass/scss
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 18 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

QR iMAGE ALT TEXT 📸:

The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

The alt with QR code is not even explaining for what the QR image need to be used.

So update the alt with meaningful text which explains like QR code to frontendmentor.io

Example: <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
0
Manikandan763• 10
@Manikandan763
Submitted 19 days ago
What challenges did you encounter, and how did you overcome them?

align is the most challenging part but i did that very well beacuse of my previous project experience

What specific areas of your project would you like help with?

it will help in supermarket,stores and where and all we need to scan the product
QR Scanner using flexbox
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hi நண்பா 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

QR iMAGE ALT TEXT 📸:

Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

The alt attribute should explain the purpose of the image.

E.g. alt="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!
2
Reno G• 50
@pamplito
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

I'm very happy to have felt more comfortable when I started and to have provided a solution that seems to work.

What challenges did you encounter, and how did you overcome them?

My challenge, which I failed, was to avoid using @media and to get a responsive fluid on container size and padding.

I didn't succeed, but it's still a success because the research was very beneficial, as it helped me discover other functions that will be useful on other projects.

What specific areas of your project would you like help with?

As I'm learning on my own, I welcome any advice.

More specifically, if anyone has a method for doing what I've tried to get a container fluid and padding fluid, I'd be very happy to have it explained to me or to be directed to the documentation.
Social links profil using Grid
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

BODY MEASUREMENTS 📐:

Using height: 100dvh for body can cause elements to be cut off during landscape mode on mobile devices. This is because the viewport height (vh) changes when the device is rotated, and setting height: 100dvh forces the element to match the new viewport height, potentially cutting off content that exceeds the new height.

For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.

But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

To avoid this issue, it is generally recommended to use min-height: 100vh or min-height: 100dvh instead of setting a fixed height. This way, the element will adjust its height based on the available content while still covering the viewport height as a minimum.

If you want to ensure that the element always covers the entire viewport without cutting off content, you can combine min-height: 100vh (or min-height: 100dvh).

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0
Cynthia Agu• 50
@cynthiachinenye
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

I am super proud of myself on how I can make use of CSS frameworks like bootstrap to do most of my styling

What challenges did you encounter, and how did you overcome them?

at first, I didn't know that, a row in the bootstrap grid is like d-flex and that you can still make use of justify-content and align-items in a row but the difference is that the row adjusts itself during a responsive pattern

What specific areas of your project would you like help with?

nothing much, to to understand how the bootstrap layout works to get a better responsive webpage
social-link-profile with bootstrap
#bootstrap
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. That's simply because of nesting the component with unwanted div elements.

<main id="main" class="min-vh-100"> <div class="container pt-5"> // Unwanted <div class="row justify-content-center "> // Unwanted <div class="col-md-4 col-lg-4 "> // Unwanted <div class="card text-center text-white h-100"> // Actual Component .... </div> </div> </div> </div> </main>

You are using Bootstrap for layout, so here's the updated html markup which might help you to center the component for both horizontally and vertically.

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚. For now were gonna stick with Flexbox.

<main id="main" class="min-vh-100 d-flex justify-content-center align-items-center"> <div class="card text-center text-white">  </div> </main>

We added d-flex which is used to make the main container a flex container, justify-content-center to horizontally center the child elements (in this case, the card) within the flex container and align-items-center for vertically centering the child elements within the flex container.

Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
P
Jesús Eduardo Ramírez Morales• 60
@Eddieramirez29
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

It takes more time than I guessed. However, it´s ready!

Let me know if you have any advise.

¡Saludos!
Basic calculator
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

CSS 🎨:

Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component

body { min-height: 100vh; display: grid; place-items: center; }

Now remove these styles, after removing you can able to see the changes

body { position: absolute; left: 450px; }

Now your component has been properly centered.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0
P
Heba Ahmad Saleh• 90
@hebaahmedsaleh
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

it is a simple html page using only html, css and js. next time I will use more different frameworks but I didnt use as the required is so simple and doesnt need to add any third party libraries.
Responsive social links simple web page.
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

HTML 🏷️:

This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

For example:

The <main> element should include all content directly related to the page's main idea, so there should only be one per page

The <footer> typically contains information about the author of the section, copyright data or links to related documents.

So resolve the issue by replacing the <div class="container"> element with the proper semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page

I see you have used role attribute for attribution with the value of contentinfo but if you wish to remove explicit roles you can change it's into footer element which is semantic one and don't need to explicitly declare attributes for it.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
1
Cropsi• 110
@Cropsii
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

Рад что я вообще это сделал ,но в следующий раз обошёлся бы без grid

What challenges did you encounter, and how did you overcome them?

Позиционирование элементов и так и не получилось сделать нормальный padding в мобильном просмотре

What specific areas of your project would you like help with?

В данном случае я хотел бы посмотреть на структуру здорового проекта
Если это работает , то лучше это не трогать
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

BODY MEASUREMENTS 📐:

Use min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens, such as mobile devices in landscape orientation

For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.

But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0
Holger Mueller• 290
@Holgermueller
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

I'm happy I figured out how to get the background image with the color overlay to just the right hues.

What challenges did you encounter, and how did you overcome them?

I had trouble getting the svgs sized correctly. I'm still not sure I got the demo image right.

What specific areas of your project would you like help with?

Any constructive criticism is welcomed.
Huddle Landing page HTML CSS
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

ANCHOR ELEMENT 🔴:

The social icons which are added by using <i> elements are not for decorative purposes.

Those elements are needed to be wrapped by <a> elements along with proper aria-label attribute which is way more important for social links in an <a> tag can help provide more context to users with visual impairments who use assistive technologies such as screen readers to access your website.

When a screen reader encounters an anchor tag with a social link, it may announce the link's text content, such as "Facebook" or "Twitter," by including an aria-label attribute that points to a nearby element containing a description of the link's purpose, you can provide more context and clarity to the user.

By providing this additional information, you can help users with visual impairments to better understand the purpose and value of social links, and encourage them to engage with your content. This can ultimately improve the user experience on your website, and make it more accessible and inclusive for all users.

Example:

<a href="#" aria-label="Facebook profile of Huddle"> <i class="fa-brands fa-facebook fa-2xl"></i> </a>

If you have any questions or need further clarification, you can always check out my submission for this challenge 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
0
P
fnpassong• 110
@fnpassong
Submitted 19 days ago
What specific areas of your project would you like help with?

Hi! Please your support, it seems to me that grid-areas could be improved, I would appreciate any advice, thank you very much!!
TypeMaster Solution
#react#sass/scss
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

IMPROPER USAGE OF HEADINGS ↗️:

There's a minor semantic issue which is way more crucial and needs to be fixed, that's the usage of h3 for button like elements "PRE ORDER".

Actually those elements needs to be a button or a, for this challenge a is more likely to be good (because when the user clicks "PRE ORDER" they must want to go to form where they can preorder the stuff with their credentials)

And additionally add cursor: pointer CSS property for a elements, it's important for action elements because it changes the cursor from the default arrow to a pointer when hovering over the element. This provides a visual cue to the user that the element is clickable and encourages interaction. It also helps to provide feedback to the user by indicating which elements are clickable and which are not.

So you want to change the h3 into a element as shown in below,

<a href="#" class="btn text-upper">pre-order now</h3>

Now your component's button has got the pointer & you learned about this property as well

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
AdrianZidan• 30
@Xenathra
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

im proud of finish this without googling

What challenges did you encounter, and how did you overcome them?

keep learning

What specific areas of your project would you like help with?

frontend
card with bootstrap
#bootstrap
2
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

CSS 🎨:

Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component

<body class="min-h-screen grid place-items-center">...</body>

Now remove these utility classes from div after removing you can able to see the changes

<div class="position-absolute top-50 start-50 translate-middle">...</div>

Now your component has been properly centered.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
1
Mahbub Hossen• 20
@mhbabu2002
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

I am most proud of doing the project.

What challenges did you encounter, and how did you overcome them?

I face a problem with Flexbox in CSS while doing the project. Then learn Flexbox through YouTube and complete the project.
Interactive-rating-component
#accessibility
3
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Salaam Alaikum 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

HTML 🏷️:

This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

For example:

The <main> element should include all content directly related to the page's main idea, so there should only be one per page

The <footer> typically contains information about the author of the section, copyright data or links to related documents.

So resolve the issue by wrapping the both component states (.rate-container & .thank-you) using the proper semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page

So the resulted markup would be like this,

<body> <main>  <div class="rate-container"></div>   <div class="thank-you"></div>  </main> <footer class="attribution"></footer> </body>

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
1
Si1entERA• 200
@Si1entERA
Submitted 19 days ago
What are you most proud of, and what would you do differently next time?

In the past I had struggled with flexbox and how the parent would affect the div placements when re-sized but now I think I got a handle on it, I could be wrong but that's the beauty of learning.

What challenges did you encounter, and how did you overcome them?

one of the challenges I've encountered was the spacing between text and one way I solved this adjust some of the texts margin-top and margin-bottom.

What specific areas of your project would you like help with?

All feedback is welcome regardless of if your new to frontend or a veteran.
SOCIAL-LINKS-PROFILE-MAIN
2
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 19 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

LACK OF ALTERNATE TEXT FOR AVATAR 📸:

The alt text is used to convey the content or purpose of the image, which is essential for accessibility and user experience.

An appropriate alt text could describe the specific content or function of the avatar, such as "Jessica's profile picture for social media" or "Avatar representing Jessica for social link." This would provide clearer information to users who rely on screen readers or encounter image loading issues.

The 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.

E.g. alt="Jessica"

<img src="./assets/images/avatar-jessica.jpeg" alt="Jessica">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
Raihan Shakeel Yousuf• 40
@RaihanShakeel
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?

I have improved very much, and for that, I am proud of myself. The next time I will see the challenge and do things accordingly

What challenges did you encounter, and how did you overcome them?

This project was not challenging. There is one thing I always want to know that is, sometimes display: flex; doesn't work I don't know why. If anyone knows why is it so please tell me.

What specific areas of your project would you like help with?

some tips for making the page responsive would be very helpful for me. please give your tips in comments
Blog Preview Card
2
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

FIXING INCOMPLETE TRANSITION

Currently the Hover effect which has been applied for the component (.container) has an issue in transition property, It's simply because you've been using it wrongly.

.container:hover { box-shadow: 10px 10px #000; transform: scale(1.02); transition: transform 500ms ease; }

Due to that whenever the user hovers the component it will smoothly animate but as soon as the user get out of hovering area the component itself will suddenly goes to it's initial state without smoothness as like it's starting state.

To fix this we need to declare the transition property on normal class, i mean the class where we not linked to any pseudostates like hover, active etc.

These are the fixed css rules,

.container { transition: transform 500ms ease; } .container:hover { box-shadow: 10px 10px #000; transform: scale(1.02); }

Now you will get a smooth-in-out transition effect without sudden drop during hover.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
LloydMendonca• 10
@LloydMendonca
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?

proud of my first ever ui design, would like to make it even better the next time

What challenges did you encounter, and how did you overcome them?

found it difficult to create pixel perfect , used images given as reference.

What specific areas of your project would you like help with?

would like to get some feedback and how to improve my work.
QR UI Using Figma 1st Attempt
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

DESIGNING USING PIXEL PERFECT 🖼️:

"found it difficult to create pixel perfect", Luckily it's not difficult let me tell you why..

You can use an extension called Pixel Perfect, It would help you to place the design images provided by FEM to place that on top your website where you can compare yours with design image.

You can see the results of using Pixel Perfect for my submission as an example of how it helps us to design much better looking websites.

If you have any questions or need further clarification feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
VISHWA• 250
@Vishwanathanselvamoorthy
Submitted 20 days ago
HTML,CSS,JAVASCRIPT
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Hello Bro 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

LABELS 🔖:

input elements wants a label associated with it

A <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 attribute

Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etc, is often apparent to sighted users

Even if the form 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

Example:

<input type="text" aria-label="First Name" class="" id="first-name" name="first-name" placeholder="First Name">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
SHARITHA2002• 20
@SHARITHA2002
Submitted 20 days ago
FrontEnd Mentor Challenges - Social links profile 👧🏻
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

HTML 🏷️:

This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

For example:

The <main> element should include all content directly related to the page's main idea, so there should only be one per page

The <footer> typically contains information about the author of the section, copyright data or links to related documents.

So resolve the issue by replacing the <div class="container"> element with the proper semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
1
Antonio• 40
@tonyiboy
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?

I manged to build this site in 15 min.There is probably alot of things that can be done much more better but I need to have more knowledge to be able to see what are things that I can improve on this challenge

What challenges did you encounter, and how did you overcome them?

I didn't understand how to set up page should I put specific width or height In the end I used dev tools to be able to see how it would be on big screens and how it looks on small screen and from design looks pretty correct.

What specific areas of your project would you like help with?

Any kind of comment how to do or improve is great I love to learn alot about coding!
Frontend QR navigator using HTML and CSS
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin.

We don't need to use margin to center the component both horizontally & vertically.

You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

body { justify-content-center; align-items: center; }

Now remove these styles, after removing you can able to see the changes

.card { margin: auto; }

Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
1
Evan Munnik• 160
@EJMK18
Submitted 20 days ago
QR code component using Semantic HTML and CSS flexbox
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

QR iMAGE ALT TEXT 📸:

The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

The alt with QR code is not even explaining for what the QR image need to be used.

So update the alt with meaningful text which explains like QR code to frontendmentor.io

Example: <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!
0
lstrbvry• 60
@lstrbvry
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?

I'll clean my css code

What challenges did you encounter, and how did you overcome them?

The desktop image does not occupy 100% of container's height, solved it using flex

What specific areas of your project would you like help with?

feedbacks are welcome
Product Preview Card
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

BODY MEASUREMENTS 📐:

Use min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens, such as mobile devices in landscape orientation

For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.

But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0
Evan Munnik• 160
@EJMK18
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?

I am proud of the steady improvement I have been making. I completed this challenge within 01h30m.

I would focus on creating reusable CSS custom variables for layouts to improve on my project completion time.

What specific areas of your project would you like help with?

All feedback is welcomed.
Semantic HTML and CSS responsive product preview card component
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

PiCTURE TAG 📸:

Looks like you're currently using media queries for swapping different version of image,

<img src="images/image-product-desktop.jpg" alt="Image of the Gabrielle Essence Eau De Parfum bottle" class="desktop-product-img"> <img src="images/image-product-mobile.jpg" alt="Image of the Gabrielle Essence Eau De Parfum bottle" class="mob-product-img">

So let me introduce the 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.

Example:

<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>

In this example, the <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.

Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user

If you have any questions or need further clarification, you can always check out 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
0
AlhassanMariam• 20
@AlhassanMariam
Submitted 20 days ago
QR-code design using html and css
1
Abdul Khalid• 69,100
@0xabdulkhalid
Posted 20 days ago
Assalamu Alaikum, Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component.

body { min-height: 100vh; display: grid; place-items: center; }

Now remove these styles, after removing you can able to see the changes

* { margin: auto; } body { padding-top: 7%; } .qr_code { margin: auto; padding: 3px; }

Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
1

Abdul Khalid

All comments

Qr Code Component Using HTML and SCSS

Please tell me how to solve the z-index of footer

Results Summary Component using HTML and CSS

QR Code Component

QR Scanner using flexbox

Social links profil using Grid

social-link-profile with bootstrap

Basic calculator

Responsive social links simple web page.

Если это работает , то лучше это не трогать

Huddle Landing page HTML CSS

TypeMaster Solution

card with bootstrap

Interactive-rating-component

SOCIAL-LINKS-PROFILE-MAIN

Blog Preview Card

QR UI Using Figma 1st Attempt

HTML,CSS,JAVASCRIPT

FrontEnd Mentor Challenges - Social links profile 👧🏻

Frontend QR navigator using HTML and CSS

QR code component using Semantic HTML and CSS flexbox

Product Preview Card

Semantic HTML and CSS responsive product preview card component

QR-code design using html and css