All comments

P
Arcloan• 30
@Arcloan
Submitted 4 days ago
What are you most proud of, and what would you do differently next time?

The next time I would try to display the content of my page better.

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

The most difficult part was displaying the various element with the correct width and height. Also it is not so easy for a beginner who doesn't know any css framework to center the various elements.

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

I would like some feedback on how to correctly display elements. At the beginning I was trying to set the width and height of the image using css but it didn't work. So i had set the width and height of the image inside the container with attribute inside the img element. It would be very helpful if someone explain me how can I display elements without resorting to trial and error using various px measurement for the width and height of element. Next I don't know why if I use more padding for the img element the border on top become straight and the border-radius property doesn't seem to work. I should say that the practice is really different from the theory. Any help will be greatly appreciated. Thank you very much
QR-code challenge
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
Marked as helpful
0
ZmohseniHub• 70
@ZmohseniHub
Submitted 4 days ago
What are you most proud of, and what would you do differently next time?

Complete the project at the right time

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

no problem

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

nothing
media Query, hover
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

Here's and example on how you can refactor your code:

After Refactoring

<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>

By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

I hope you find this helpful!

Keep up the excellent work!
0
mohabelel• 60
@mohabelel
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

Making a simple responsive Qr Code Component

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

To control the width of paraghraph

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

None
Responsive QR code component Using Flexbox
3
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution is really impressive!

I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

📌 First: Think about using <main> to wrap your main content instead of <div>.

Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

📌 Second: Consider using <h1> for your main title instead of <h3>.

It's more than just text size — it's about structuring your content effectively:

The <h1> to <h6> tags are used to define HTML headings.

<h1> is for the most important heading.

<h6> is for the least important heading.

Stick to just one <h1> per page – it should be the main title for the whole page.

And don't skip heading levels – start with <h1>, then use <h2>, and so on.

These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!
Marked as helpful
0
Md Saiful• 10
@mdsaiful170
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

BETTER

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

NO

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

NOTHING
HTML, CSS, MEDIA QUERY
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution is really impressive!

I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

📌 First: Think about using <main> to wrap your main content instead of <section>.

The tag <section> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

📌 Second: Consider using <h1> for your main title instead of <h2>.

It's more than just text size — it's about structuring your content effectively:

The <h1> to <h6> tags are used to define HTML headings.

<h1> is for the most important heading.

<h6> is for the least important heading.

Stick to just one <h1> per page – it should be the main title for the whole page.

And don't skip heading levels – start with <h1>, then use <h2>, and so on.

These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!
0
P
Srijan Manandhar• 100
@srijanss
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

I got to learn about HTML elements like

I've use PostCSS and its different plugins

learned about how we can separate CSS into different files and import into the main CSS file. used mixins which helps us to reuse CSS without repeating in different places. used nested CSS And to build this postcss I've used 'Vite'. It is very helpful tool for development and also for deployment of production build to Github pages.

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

I followed mobile first layout and used flexbox to card component.

then for desktop view I changed the flex direction to row and used flex: 1 to both image and product__info component

this worked fine in Chrome and Edge, but firefox and Safari was giving issue

later I figured out that I have to give 50% width to element to take the half width of the card element, even though I have already set flex: 1 to img element

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

Any feedback is welcome

Responsive product preview card component using flexbox
#vite
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin and/or padding isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
Marked as helpful
1
Arun S• 10
@Arunsamuvel
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

no its good keep its going

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

nothing its very easy

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

html and css using flex is very useful to konws about these projects
QR code component basic level of HTML& CSS with mob&desk reposnsive
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks excellent!

I have just one suggestion:

Use <main> to wrap the main content instead of <main> and <section>.

📌 The tag <section> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

Unless you have a specific reason to use both, there's no need, considering that you can achieve the same result with only one. It also makes it easier positioning the elements inside.

This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!
0
JNeo77• 10
@JNeo77
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

I am most proud of the positioning and the sizing of the elements using CSS. What I would do differently next time is work through these decisions quicker since I needed to do a lot of tweaking to get things positioned correctly.

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

The main challenge I encountered was getting the paragraph text to wrap the way it does in the preview while keep it exactly aligned with the above text. I ended up making the decision that even though it doesn't look exactly like the mock up, it still looks centered with the right amount of right and left padding.

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

If would be great to get feedback on the accessibility of my HTML. Could I have made better decisions to make things more accessible?

I would also like feedback on the way I approached sizing and positioning in my CSS. Could I have used different units or done things in a more concise and efficient way?
QR Code Component with HTML and CSS
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
Marked as helpful
0
Akhlaq Ahmed Shaikh• 20
@AkhlaqShaikh1
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

Some styling

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

Card components

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

Responsiveness and flex boxes
Card
3
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
0
Ananda Babu• 50
@bob2build
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

was able build the layout without looking up CSS attributes

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

couldn't get the sizing correct the font sizes in style-guide. I had to use custom sizes and experiment multiple times to correct the aspect ratio

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

None so far. Still in early phases of building
Social Links Profile using HTML and CSS
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

Here's and example on how you can refactor your code:

After Refactoring

<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>

By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

I hope you find this helpful!

Keep up the excellent work!
0
Botan Cosar• 10
@Botan-Cosar
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

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

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

QR code component
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution is really impressive!

I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

📌 First: Think about using <main> to wrap your main content instead of <div>.

Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

📌 Second: Consider using <h1> for your main title instead of <h3>.

It's more than just text size — it's about structuring your content effectively:

The <h1> to <h6> tags are used to define HTML headings.

<h1> is for the most important heading.

<h6> is for the least important heading.

Stick to just one <h1> per page – it should be the main title for the whole page.

And don't skip heading levels – start with <h1>, then use <h2>, and so on.

These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!
0
P
sampath-karupakula• 30
@sampath-karupakula
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

working with flexbox.

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

aligning html elements properly.

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

layout design and implementation.
Responsive Social links
#bem
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

I have a suggestion for improvement:

📌 Think about using <main> to wrap your main content instead of <div>.

Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!
0
JPedro003• 10
@JPedro003
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

Finish this project.

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

When centering the div.

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

CSS flex.
QR code
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks excellent!

I have a suggestion that might interest you:

📌 If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

I hope it helps you in future projects! 😊

Other than that, great job!
0
Solo-Saad• 20
@Solo-Saad
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

I am moving on

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

To Put the div in the middle of the page

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

every thing
QR Code
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
0
Beau Elliott• 10
@belliott15
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

I really enjoyed doing this challenge because it showed me that I need to stop and plan before just jumping into the challenge. Halfway through building the component I realized I wanted to make it mobile first rather than desktop first. So I had to go back and change so much of my CSS to be mobile first. I am proud that I was able to recognize this error and pivot effectively.

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

I had to remember how to write javascript without a framework. I feel like i had forgotten how to write javascript effectively. Asking the right questions is very helpful when looking for specific solutions to an issue.

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

More effective CSS writing. I feel like i could cut down on my css by at least 30 to 40 lines.
Responsive Results Summary Component w/ Javascript randomizer
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution is really impressive!

I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

📌 First: Think about using <main> to wrap your main content instead of <section>.

The tag <section> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

📌 Second: Stick to just one <h1> per page – it should be the main title for the whole page.

It's more than just text size — it's about structuring your content effectively:

The <h1> to <h6> tags are used to define HTML headings.

<h1> is for the most important heading.

<h6> is for the least important heading.

And don't skip heading levels – start with <h1>, then use <h2>, and so on.

These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!
0
Akib Raza• 110
@akibraza91
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

It is a simple product preview card that I have built using CSS Flexbox for Mobile and Desktop.

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

It was very easy to design for mobile. I don't think there is challenge.

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

To boost my frontend skills.
Responsive Product card - Using CSS Flexbox
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project looks great!

I have a suggestion about your code that might interest you:

📌 You can use the <picture> tag when you have different versions of the same image.

Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

Example:

<picture> <source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture>

I hope this helps!

Other than that, excellent work!
Marked as helpful
0
Olga• 60
@cvtqx
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

I finished this challenge quickly

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

N/A

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

Correct use of h tags in an HTML document.
QR-code
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

I have a suggestion for improvement:

📌 Think about using <main> to wrap your main content instead of <div>.

Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!
Marked as helpful
0
Lorenzo• 20
@LorenzoOliveira7
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

Facil so a relução realmente sou portugues e não consigo achar resoluções nem corres sou novato mas consigo desenvolver bem o projeto

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

nenhum achei facil esse
div.container, display-flex
#angular#axios
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

Here's and example on how you can refactor your code:

After Refactoring

<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>

By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

I hope you find this helpful!

Keep up the excellent work!
0
Liberty• 10
@lsLannan
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

using flexbox to position items

using media queries to target smaller screens

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

how to approach proper practices for responsive development and mobile first

QR code component solution using flexbox
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

I have a suggestion for improvement:

📌 Think about using <main> to wrap your main content instead of <div>.

Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!
Marked as helpful
0
Sean• 70
@agoatnamedbear
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

Figuring out how to make the images display none at specific viewports

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

Figuring how to hide elements at different viewports. I overcame this by doing research on Google.

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

I would like to learn how to better format my HTML and CSS
Product Preview Card using flexbox
2
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project looks great!

I have a suggestion about your code that might interest you:

📌 You can use the <picture> tag when you have different versions of the same image.

Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

Example:

<picture> <source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture>

I hope this helps!

Other than that, excellent work!
0
Pedro Bernardo Campos Rodrigues• 60
@Battle150605
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

nothing.

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

find the colors for background and the box

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

social media
Mobile First CSS
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 3 days ago
Olá Pedro !

Parabéns por completar o desafio! ✅

Sua solução está ótima!

📌 É recomendado usar elementos HTML semânticos como <ul> e <li> para criar listas. Isso garante que seu código seja mais acessível, mais fácil de manter e semanticamente significativo.

Aqui está um exemplo de como você pode refatorar seu código:

Após a Refatoração

<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>

Ao usar <ul> e <li>, você transmite a estrutura do seu conteúdo de forma mais clara, facilitando para leitores de tela e mecanismos de busca entenderem. Além disso, isso está alinhado com as melhores práticas para semântica HTML.

Espero que você ache isso útil!

Continue com o excelente trabalho!
0
osenprema• 70
@osenprema
Submitted 9 days ago
What are you most proud of, and what would you do differently next time?

I improved my knowledge and skills in CSS.

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

Overlaying a transparent cap when hovering the image. I researched the issue and resolved the situation.

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

Any feedback is Welcome ;)
NFT Preview Card using HTML and CSS
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 8 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin and/or padding isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
0
kozmanashvili• 90
@kozmanashvili
Submitted 8 days ago
What are you most proud of, and what would you do differently next time?

freedback are welckomed
Product Preview Card Compoent
#accessibility
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 8 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
Marked as helpful
0
ghostofegypt• 40
@ghostofegypt
Submitted 8 days ago
What are you most proud of, and what would you do differently next time?

styling the box

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

The avatar image and the buttons,unfortunately I can't fix them

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

I need help with the buttons , i need to make it not to take the whole width I need help wth the avatar image ,I can't make it rounded
Social Links Profile Using Bootstrap
#bootstrap
3
Daniel 🛸• 38,250
@danielmrz-dev
Posted 8 days ago
Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
Marked as helpful
0
CaveCodes• 30
@CaveCodes
Submitted 8 days ago
What are you most proud of, and what would you do differently next time?

I am proud to have completed the project without outside help

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

I struggled centering the container on the page and had to look it up again from my previous project. solution was " display: flex; align-items: center; justify-content: center;" on body.

I thought it's :onhover but it was :hover in css.

I struggled to center the profile picture horizontally. I had to set margins to auto.

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

in style-guide it says i should set paragraph font to 14px but when i do it looks different from the design example.
Social links profile main
1
Daniel 🛸• 38,250
@danielmrz-dev
Posted 8 days ago
Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

Here's and example on how you can refactor your code:

After Refactoring

<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>

By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

I hope you find this helpful!

Keep up the excellent work!
Marked as helpful
0

Daniel 🛸

All comments

QR-code challenge

media Query, hover

Responsive QR code component Using Flexbox

HTML, CSS, MEDIA QUERY

Responsive product preview card component using flexbox

QR code component basic level of HTML& CSS with mob&desk reposnsive

QR Code Component with HTML and CSS

Card

Social Links Profile using HTML and CSS

QR code component

Responsive Social links

QR code

QR Code

Responsive Results Summary Component w/ Javascript randomizer

Responsive Product card - Using CSS Flexbox

QR-code

div.container, display-flex

QR code component solution using flexbox

Product Preview Card using flexbox

Mobile First CSS

NFT Preview Card using HTML and CSS

Product Preview Card Compoent

Social Links Profile Using Bootstrap

Social links profile main