All comments

Uzochukwu Cecilia Oloh• 50
@Nsebo
Submitted 3 months ago
Hello Everyone, The challenges I faced building this preview card was the media query and width of the container.

All feedbacks are welcome. Thank you!
Blog preview card built using simple HTML and CSS
4
Abdul• 8,560
@Samadeen
Posted 3 months ago
Hello Nsebo

Great work on completing this challenge. Cheers!! 🎊🎊

Some adjustments are needed to place your container in the middle properly.

display: grid; place-content: center; min-height: 100vh;

I hope to see more solutions from you.
1
👾 Ekaterine Mitagvaria 👾• 7,640
@catherineisonline
Submitted about 2 years ago
Hello, Frontend Mentor community! This is my solution to the REST Countries API with a color theme switcher.

I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.

I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!

Thanks
REST Countries API with color theme switcher
#react
13
Abdul• 8,560
@Samadeen
Posted over 1 year ago
Hello Catherine... You did beautifully well on this project, can you kindly recommend resources to learn React
0
Woodrow Martyr• 120
@wmartyr
Submitted almost 2 years ago
Hi everyone. I spent some time to get the hover effects right. I'm sure there's a better way to do the things better than what I've done here. Feedback is most welcome. Thanks.
Used HTML, CSS, and Flexbox.
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey Woodrow!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <div class="card">.

Your footer should be <footer class="attribution"> instead of <div =attribution>

Images must have alternate text - Its hard for screen readers to pick up messages from images without alt text.. Its always advisable to include alt text to aid screen reader

This should fix most of your accessibility issues.

For your design here is a tip to center your container both vertically and horizontally display: grid; place-content: center; min-height: 100vh;

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
0
Adejokun Ibukunoluwa• 20
@IAdejokun
Submitted almost 2 years ago
Responsive QR Code Component
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey Omo Iya mi!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="content"> instead of <div class="content">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h5 id="top">Improve your front-end skills by building projects</h5> should be <h1 id="top">Improve your front-end skills by building projects</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
0
James Kofi Myers• 660
@kinjames
Submitted almost 2 years ago
nft-preview-card-component
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <section class="card">.

Your footer should be <footer class="attribution"> instead of <div =attribution>

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h1 class="big-text"> Equilibrium #3429 </p> should be <p class="big-text"> Equilibrium #3429 </h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
0
MohammedC4r• 10
@MohammedC4r
Submitted almost 2 years ago
NFT Card - Using SASS, BEM
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <div class="card">.

Your footer should be <footer class="attribution"> instead of <div =attribution>

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h2 class="card__heading">Equilibrium #3429</h2> should be <h21class="card__heading">Equilibrium #3429</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

Images must have alternate text - Its hard for screen readers to pick up messages from images without alt text.. Its always advisable to include alt text to aid screen reader

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
1
Max• 120
@Kypac-Max
Submitted almost 2 years ago
Responsive Order Summary by Max
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

I noticed your container is not aligned vertically and horizontally.. i.e is not at the center of your webpage.. That can be corrected by setting display:flex; align-items:center; justify-content:center;

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
1
Yunus Yusuf• 20
@Yunishello
Submitted almost 2 years ago
Html for the makeup, css for custom styling, Bootstrap, and JavaScript
#bootstrap
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="row"> instead of <div class="row">.

Your footer should be <footer class="attribution"> instead of <div class="attribution">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <p class="qoute"> "Please click the button below to get an advice." </p> should be <h1 class="qoute"> "Please click the button below to get an advice." </h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
0
Chaitali• 10
@chaitalikarmakar
Submitted almost 2 years ago
Hello,

I am new to front end development and practicing to get better. This is one of the first challenges I took from frontend mentor. Please review and let me know how I can do better.

Thank you.
HTML5, CSS, Flexbox
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="background-layout"> instead of <div class="background-layout">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h3>Improve your front-end skills by building projects</h3> should be <h1>Improve your front-end skills by building projects</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
0
Surajit Shaw• 10
@SURAJITSHAW
Submitted almost 2 years ago
Hey everyone I'm very new to these challenges, so open to any kind of suggestions to make my HTML & CSS skills more polished.
qr code component
#itcss
2
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <div class="card">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h3>Improve your front-end skills by building projects</h3> should be <h1>Improve your front-end skills by building projects</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
1
Edward Rangel• 20
@ledxs
Submitted almost 2 years ago
flexbox pseudoelements
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="container"> instead of <div class="container">.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
0
Gustavo Rivera• 10
@SebRivmor
Submitted almost 2 years ago
Card_QR
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
** ¡Hey! ** Saludos 🥂 Al completar este desafío ...

Primero trabajemos en sus problemas de accesibilidad.

El documento debe tener en el punto de referencia principal" Básicamente significa que su HTML debe estructurarse de manera más semántica y el formato correcto debe ser su <Header> ... ... ... </main> y, por último, su <footer> .... </footer> , por lo tanto, debe usar <main class = "contenedor"> en lugar de <div class = "contenedor"> . -La página debe contener un encabezado de nivel uno 'básicamente significa que su html debería tener una navegación de ayuda h1 de ayuda, por lo tanto<h2> mejorar sus habilidades front-end construyendo proyectos </h2>debería ser<h1 > Mejore sus habilidades de front-end creando proyectos </h1>y también debe bajar ordenado cuando esté utilizando los encabezados h1 hasta h2 hasta h3, y así sucesivamente.

Esto debería solucionar la mayoría de sus problemas de accesibilidad.

. Independientemente de que lo hicieras increíble ... ** Espero que encuentres esto útil ** ... ¡feliz codificación!
0
Payal Sasmal• 20
@PayalSasmal10
Submitted almost 2 years ago
Please provide feedback. It will help me to improve my skills.
Nothing
3
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="img-qr"> instead of <div class="img-qr">.

Your footer should be <footer class="attribution"> instead of <div =attribution>

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <p class="bold-para">Improve your front-end skills by building projects</p> should be <h1 class="bold-para">Improve your front-end skills by building projects</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

Images must have alternate text - Its hard for screen readers to pick up messages from images without alt text.. Its always advisable to include alt text to aid screen reader

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
0
Pedro• 120
@pedrommb7
Submitted almost 2 years ago
What do you think about this solution ? What could be enhanced ?
Single price grid component
#sass/scss
2
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="grid"> instead of <div class="grid">.

You should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
0
Khadija Hashmi• 200
@khadijahashmi2
Submitted almost 2 years ago
any feedback will be much loved! and i'll give you a cookie 🍪
attempting to use css grid :D
2
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="container"> instead of <div class="container">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <p>Join our Community </p> should be <h1>Join our community</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

You can use flex or grid to center your container horizontally and vertically.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
0
Momoh Abdulrahim Remi• 30
@Brodaremi
Submitted almost 2 years ago
Responsive landing page using css
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main id="container"> instead of <div id="container">.

Your footer will be <footer class="attribution"> instead of div class="attribution">.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
0
Anthony Guilherme• 190
@oAnthonyG
Submitted almost 2 years ago
Feedback welcome. I still think there are things to improve and I'm not really sure if it's working perfectly on all platforms
landing page used html and css only
2
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="container-card"> instead of <div class="container-card">.

And your footer should be <footer class="attribution"> instead of <div class="attribution">.

This should fix most of your accessibility issues.

-You can use flex or grid to center your container horizontally and vertically.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
1
Ivan Aguilar• 30
@Ivan96318
Submitted almost 2 years ago
Responsive landing page using css
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="row"> instead of <div class="row">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h2> Order Summary</h2> should be <h1 >Order Summary</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
0
Adil Rafiq• 120
@Adil-Rafiq
Submitted almost 2 years ago
Hello People! So this was my first challenge project from this website. Even though the project was quite easy but as a beginner, I find it some how difficult. The most tiring part of this project was alignment of elements. And there is a part where I have to align clock icon with its text but neither the margin nor the padding option was working. I would be glad if someone can guide me through this.\

Thank you.
Responsive NFT card preview.
#foundation
3
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="container"> instead of <div class="container">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <p >Out Equilibrium collection promotes balance and calm </p> should be <h1>Out Equilibrium collection promotes balance and calm</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

You can maybe increase the font size of your a tag and pad out some of your items.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
0
Rikelly• 10
@rikellyh
Submitted almost 2 years ago
QR-code solution by Rikelly
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
¡Oye! Saludos 🥂 por completar este desafío.. .

En primer lugar, trabajemos en sus problemas de accesibilidad.

El documento debe tener un hito principal básicamente significa que su html debe estar estructurado más semánticamente y el formato correcto debe ser su <header>......</header> seguido de su <main>... ...</main> y, por último, su <footer>....</footer>, por lo tanto, debe usar <main class="container"> en lugar de <div class="container"> .

La página debe contener un encabezado de nivel uno básicamente significa que su html debe tener un h1 que ayude a la navegación, por lo tanto, <div>Mejore sus habilidades de front-end mediante la creación de proyectos</div> debe ser <h1 >Mejore sus habilidades de front-end mediante la creación de proyectos</h1> y también debe ir hacia abajo en orden cuando utilice los encabezados h1 hasta h2 hasta h3 y así sucesivamente.

Esto debería solucionar la mayoría de sus problemas de accesibilidad.

También debes cambiar el "color de fondo" de tu cuerpo a un azul más claro.

. Independientemente de lo que hiciste increíble... Espero que encuentres esto útil... ¡¡¡Feliz codificación!!!
0
infinty• 10
@INFINTY1999
Submitted almost 2 years ago
HTML5 - CSS - Flexbox
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <section class="card">.

Your footer should be <footer class="attribution"> instead of <div class="attribution">.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
0
Ibukun Ekunwe• 100
@drvnprgrmr
Submitted almost 2 years ago
I would like to know the best practice for centering block level elements vertically.

element { margin: auto; }

doesn't seem to work.
QR Code Component with basic styling
2
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h3>Improve your front-end skills by building projects</h3> should be <h1>Improve your front-end skills by building projects</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

You can use flexbox or grid to center your element horizontally and vertically.. set display: flex; align-item: center; justify-content: center;

. Regardless you did amazing... hope you find this helpful... Happy coding!!!

NAIJA TO THE WORLD!!!
Marked as helpful
1
PRECIOUS ORITSEDERE• 120
@PreciousOritsedere
Submitted almost 2 years ago
NFT Preview Card component
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="container"> instead of <div class="container">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <p>Our Equilibrium collection promotes<br>balance and calm</p> should be <h1>Our Equilibrium collection promotes<br>balance and calm</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

Images must have alternate text Its hard for screen readers to pick up messages from images without alt text.. Its always advisable to include alt text to aid screen reader

This should fix most of your accessibility issues.

You can use flexbox or grid to center your container both horizontally and vertically, Hence your container is at the middle of the webpage.

You can also add box-shadow to your container.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!
Marked as helpful
1
PRECIOUS ORITSEDERE• 120
@PreciousOritsedere
Submitted almost 2 years ago
QR-code-Project
1
Abdul• 8,560
@Samadeen
Posted almost 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .

Lets firstly work on your accessibility issues.

Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="container"> instead of <div class="container">.

Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h2>Improve your front-end <br> skills by building projects</h2> should be <h1>Improve your front-end<br> skills by building projects</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

Images must have alternate text - Its hard for screen readers to pick up messages from images without alt text.. Its always advisable to include alt text to aid screen reader

This should fix most of your accessibility issues.

You should increase your border-radius to make it more curvy.

You should also use rem em % instead of px when measuring.. It improves responsiveness

. Regardless you did amazing... hope you find this helpful... Happy coding!!!

NAIJA TO THE WORLD!!!
Marked as helpful
0

Abdul

All comments

Blog preview card built using simple HTML and CSS

REST Countries API with color theme switcher

Used HTML, CSS, and Flexbox.

Responsive QR Code Component

nft-preview-card-component

NFT Card - Using SASS, BEM

Responsive Order Summary by Max

Html for the makeup, css for custom styling, Bootstrap, and JavaScript

HTML5, CSS, Flexbox

qr code component

flexbox pseudoelements

Card_QR

Nothing

Single price grid component

attempting to use css grid :D

Responsive landing page using css

landing page used html and css only

Responsive landing page using css

Responsive NFT card preview.

QR-code solution by Rikelly

HTML5 - CSS - Flexbox

QR Code Component with basic styling

NFT Preview Card component

QR-code-Project