All comments

Sivaprasath• 2,520
@sivaprasath2004
Submitted about 1 month ago
Result Summary Componenet
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 month ago
Nice man good job ✨
0
grgrnkoo• 300
@grgrnkoo
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?

Open it! It has animations!

My 22/22 of free HTML/CSS challenges here. This project how my skills grew, completing each of these challenges. Glad to have it done and feeling confident to start learning JS. Hope to come back for another batch of JS challenges in a month or two
Chat App Solution Animated no Figma
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted 2 months ago
grgrnkoo your chat app css illustration animations is very amazing ✨
1
stautuan• 140
@stautuan
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?

My first JavaScript project! I am extremely proud of completing this project. There were many challenges in this one, such as naming classes and variables, getting the tip buttons and custom tip to work the way I wanted them to.. In the end, this simple statement made my entire logic work:

let selectedTip = 0;

While there's room for improvement in my code, the sheer satisfaction of seeing it work brings me so much joy and relief. This was a fun one. Feedback is also welcomed! 😁
Tip Calculator with JavaScript (Responsive)
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted 2 months ago
@stautuan your tip calculator is very super and responsive also ✨
0
Louis Marie Atoluko Ayariga• 170
@almamarie
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?

none

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

Many of the fields were missing in some countries data e.g, some countries did not have borders, capital, currencies, etc. This caused errors when running the application. I had to randomly click on countries to try and fce the errors so I know where to model the application to catch those errors.

The Documentation on the rest-countries API website does not contain much information. Response objects and fields are not explained

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

I would love to know how to add dark mode theme to the application when using :root in my css modules.

Responsive Countries Rest API Website With React.js and CSS Modules
#react
2
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted 2 months ago
Your projects is so nice 👍
0
Muhammad Abdullah 🎯• 2,650
@0xabdul
Submitted 3 months ago
This is newbie challenge Social Links Profile sucessfully completed

tools Are Used⚙️

Html 📂

Css 🎨 🖌️

visual code editor ⌨️

google browser 🔖

Soical Links Profile Using [ Html & CSS ] 🚀
#accessibility
2
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted 2 months ago
thank you rajab marza ✨

And your Projects also very nice
0
Luis Gustavo• 20
@Gustakitos
Submitted 9 months ago
I've been await from html, css and javascript for a while so basic stuff like importing the fonts took me some time to remember, also i forgot the best practices for the selectors and i feel like there was a better way to solve this.
Flexbox
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted 9 months ago
Hi Luis Gustavo well congratulation completing on qr code component ✨

I noticed that the qr code component is currently not center-aligned. Center-aligning this component could provide a more balanced and visually pleasing layout, making it easier for users to focus on the content without any distractions.

which can greatly improve the overall look and feel of the interface. Users are naturally drawn to centered content, as it helps maintain a consistent visual hierarchy and enhances readability. i give solution for center aligning the component

Solution ✅

In Css 🎨 :

body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }

I Hope its usefull for you ! ✨
Marked as helpful
1
Zsuzsa Lukacs• 10
@ZsuzsaMano
Submitted 9 months ago
Refresh my CSS skills
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted 9 months ago
Hi Zsuzsa Lukacs well congratulation completing on result summary component ✨

I noticed that the result summary card component is currently not center-aligned. Center-aligning this component could provide a more balanced and visually pleasing layout, making it easier for users to focus on the content without any distractions.

which can greatly improve the overall look and feel of the interface. Users are naturally drawn to centered content, as it helps maintain a consistent visual hierarchy and enhances readability. i give solution for center aligning the component

Solution ✅

In Css 🎨 :

body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }

I Hope its usefull for you ! ✨
0
JorgGou• 50
@jorgegouv
Submitted about 1 year ago
HTML and CSS
3
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi JorgGou well congratulations on completing the NFT preview card component

A Few Feedback for improve your code and clear the Accessibility issue

IN HTML 📂 :

L A N D M A R K 🛠️

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

HEADINGS ⚙️

The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully one level heading📚 Click here

I Hope it's useful comment for you and Happy Coding Developer 😊
1
Benjamin B.• 240
@benjaminbilgehan
Submitted about 1 year ago
Stats preview card component solution.
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Benjamin B. you finished the Stats preview card component in this project is Awesome but some Accessibility issue A Few recommendation for improve your code and clear the Accessibility issue

IN HTML 📃 :

L A N D M A R K 🔺

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

HEADINGS ⚙️

The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully one level heading📚 Click here

I Hope it's useful comment for you and Happy Coding😊
0
Cletus Samuel• 590
@CletsyMedia
Submitted about 1 year ago
I have completed this challenge. Pls, feedbacks are necessary
Responsive Insure Landing Page
2
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Cletus Samuel front end mentor member well congratulations on completing the Insure landing page

A Little bit suggestions for improve your code and clear the all Accessibility issue

IN HTML 📂 :

HEADING ⚠️

the heading level increase by one

the html documents must be contained level of headings 🚀

We Do ✓

Ex :

<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4>

We use the headings line by line or sequence

Don't Do !

Ex :

<h2> </h2> <h3> </h3> <h4> </h4> <h3> </h3>

LIST🖇️

the <li> tag must be included in the <ul> or <ol>

We Do🙇

Ex :

<ul> <li> </li> <li> </li> <li> </li> </ul> (Or) <ol> <li> </li> <li> </li> <li> </li> </ol>

Don do 🙅

Ex :

<li> </li> <li> </li> <li> </li> <li> </li> <li> </li>

Now we learn about how to use the Order list and unordered list and solve the problem ✓

I Hope it's useful comment for you and Happy Coding 😊
0
pedro• 290
@xyrlan
Submitted about 1 year ago
basic html and css coding

but I had some issues in responsive for mobile.
Html / css challenge - product preview
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi pedro well congratulations on completing the Product preview card component

A Little bit suggestions for improve your code and clear the Accessibility issue

IN HTML 📂 :

HEADINGS ⚙️

The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully about one level heading📚 Click here

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

I Hope it's useful for you and Happy Coding 🤩
Marked as helpful
0
jakubochmanek• 60
@jakubochmanek
Submitted about 1 year ago
This is my first project here. All feedback is welcome
QR-code-component
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hello jakubochmanek well congratulations on completing the QR code component

A Some suggestions for improve your code and clear the Accessibility issue

IN HTML 📃 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

I Hope it's useful for you and Happy Coding 🤩
0
Saif Mohammed• 70
@Saif-Mohammed1
Submitted about 1 year ago
Hello there I build this website using react,styled-component, CSS grid,flex-box

if there is any suggestion to optimize this code I will be grateful for any notes
Manage landing page using react
#jss#react#styled-components
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Saif Mohammed well congratulations on completing the Manage landing page

A Few Feedback for improve your code and clear the all Accessibility reports

IN HTML 📃 :

L I N K S 🖇️

link must have text format and link used in proper way Ex :

We use :

<a href="taxhike.html" aria-label="Read more about Seminole tax hike"> [Read more...]</a>

Don't skip that !

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

I Hope it's useful for you and Happy Coding 🤩
0
ABNmmd• 40
@ABNmmd
Submitted about 1 year ago

What did you find difficult while building the project?

Which areas of your code are you unsure of?

Do you have any questions about best practices?

nft preview card component main using only HTML & CSS
2
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi ABNmmd | dev | well congratulations on completing the NFT preview card component 🤩 some suggestions for improve your code and clear the Accessibility reports

IN HTML 📂 :

HEADINGS ⚙️

The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully about one level heading📚 Click here

I Hope it's useful comment for you and Happy Coding 🤩
Marked as helpful
1
Salami Matthew• 60
@STK64-bit
Submitted about 1 year ago
Results summary component using css flexbox
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hello Salami Matthew well congratulations on completing the Results summary component you doing very well but some Accessibility reports occurred when ? Landmarks

A Some suggestions for improve your code and clear the issue

IN HTML 📂 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

IN CSS 🎨 :

Your results summary component is not center aligning it shows top of the Web page 📃

Example :

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

🔻Happy Coding 😊🔺
Marked as helpful
0
Sholafunmi Adewara• 110
@Sholafunmi
Submitted about 1 year ago
NFT preview card component using html & css
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Sholafunmi Adewara | dev | we'll congratulations on completing the NFT preview card component you doing very well 🤩 , but some Accessibility reports occurred when ? Landmarks !

A Few line Feedback for improve your code and clear the issue

IN HTML 📃 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

HEADINGS ⚙️

The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully one level heading📚 Click here

I Hope it's useful comment for you and Happy Coding 🤩
Marked as helpful
0
Md Sahebuddin Ansari• 20
@Saheb142003
Submitted about 1 year ago
Testimonials grid section
2
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Md Sahebuddin Ansari | Dev | well congratulations on completing the Testimonials grid section you doing very well but some Accessibility reports occurred when ? Landmarks

A Little bit suggestions for improve your code and clear the issue

IN HTML 📃 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

HEADINGS ⚙️

The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully one level heading📚 Click here

IN CSS 🎨 :

your Testimonials grid section is not center aligning it shows right of the Web page 📄 so fix that issue

Good Example :

body { display:grid; place-items: center; margin:0; Height:100vh; }

Now center aligning 🎯

I Hope it's useful comment for you and Happy Coding 😊
0
Ashni Croospulle• 50
@acroospulle
Submitted about 1 year ago
Rock, Paper, Scissors Game
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Ashni Croospulle Developer well congratulations on completing the Rock, Paper, Scissors game , you doing very well But some Accessibility reports occurred why ? Because landmarks !

Solution 📌

IN HTML 📃 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

I Hope it's useful for you and Happy Coding 🤩
0
Felipe Thomé• 910
@felipetn1989
Submitted about 1 year ago
For this project, I used a display:flex on the html element in the CSS stylesheet, so that the site wouldn't break when stretching across multiple monitors for example. Feedback is welcome!
Easybank landing page
#tailwind-css
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Felipe Thomé | Dev | we'll congratulations on completing the Easybank landing page in this project is Awesome 👍 but one Accessibility reports occurred when? Landmarks ✅

Solution 📌

IN HTML 📂 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

I Hope it's useful comment for you and Happy Coding 😊
Marked as helpful
1
daniel• 80
@retailescapeartist
Submitted about 1 year ago
I was unsure about how to size the items better. I got around most of it, but it was messy. I'm sure I'll get better with time
QR code using CSS
3
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi daniel | Dev | we'll congratulations on completing the QR code component this project you doing very well but some Accessibility reports occurred A Few Feedback for improve your code and clear the issue

Solution 📌

IN HTML 📂 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

HEADINGS ⚙️

The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully one level heading📚 Click here

IN CSS 🎨 :

Your QR card is not center aligning it shows top of the Web page 📃 so fix that

Example :

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

I Hope it's useful for you and Happy Coding 🤩
0
Salami Matthew• 60
@STK64-bit
Submitted about 1 year ago
NFT preview card component using css flexbox
2
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Salami Matthew | Developer | we'll congratulations on completing the NFT preview card component In This project doing very well 😊 but some Accessibility reports occurred

Solution 📌

IN HTML 📂 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

IN CSS 🎨 :

your NFt card is not center aligning it shows top of the Web page 📄 so fix that

Example :

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

I Hope it's useful comment for you and Happy Coding 😊
0
Salami Matthew• 60
@STK64-bit
Submitted about 1 year ago
Social proof section using css flexbox
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Salami Matthew | Dev | we'll congratulations on completing the Social proof section A Some suggestions for improve your code 📝

IN HTML 📂 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

I Hope it's useful comment for you and Happy Coding | Dev |😊
Marked as helpful
0
Felipe Leite• 50
@felbart
Submitted about 1 year ago
NFT Preview Card
#accessibility
1
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Felipe Leite | Dev | well congratulations on Completing the NFT preview card component A Few Feedback for improve your code

IN HTML 📂 :

I M A G E S 📸

whenever using the img tag put the alt attribute

Ensure all informative <img> elements have short, descriptive alternate text and all decorative <img> elements have empty alt attributes (e.g. alt="").

There are three main ways to add alternate text to an image: Using an alt attribute i.e. <img alt="drawing of a cat" src="..."> Using an aria-label i.e. <img aria-label="drawing of a cat" src="..."> Using an aria-labelledby attribute i.e. <img arialabelledby="someID" src="...">

Or

Alt Must be included in IMG TAG

<img src="icon.png" alt="icon"></img>

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

HEADINGS ⚙️

The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page so reason Accessibility reports occurred Ex : <h1> must </h1> I Recommend you Know fully one level heading📚 Click here

I Hope it's useful comment for you and Happy Coding Developer 😊
Marked as helpful
0
pabarcag• 210
@pabarcag
Submitted about 1 year ago
Hello, any advice on how to improve is welcome! Especially when it comes to error handling
Advice generator - solution
2
Muhammad Abdullah 🎯• 2,650
@0xabdul
Posted about 1 year ago
Hi Patosinsuerte we'll congratulations on completing the Advice generator app it's so nice 🙂 but some Accessibility reports occurred A Few Feedback for improve your code and clear the issue

IN HTML 📂 :

L A N D M A R K 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

I Hope it's useful comment for you and Happy Coding 🤩
Marked as helpful
0

Muhammad Abdullah 🎯

All comments

Result Summary Componenet

Chat App Solution Animated no Figma

Tip Calculator with JavaScript (Responsive)

Responsive Countries Rest API Website With React.js and CSS Modules

Soical Links Profile Using [ Html & CSS ] 🚀

Flexbox

Refresh my CSS skills

HTML and CSS

Stats preview card component solution.

Responsive Insure Landing Page

Html / css challenge - product preview

QR-code-component

Manage landing page using react

nft preview card component main using only HTML & CSS

Results summary component using css flexbox

NFT preview card component using html & css

Testimonials grid section

Rock, Paper, Scissors Game

Easybank landing page

QR code using CSS

NFT preview card component using css flexbox

Social proof section using css flexbox

NFT Preview Card

Advice generator - solution