All comments

Bruno Fiori•20
@BrunoSFioriSubmitted almost 2 years ago
Product-preview-card-component-solution
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge!

I have feedback on your code that could take it to the next level. 🚀

🔎 My suggestions for best practices for your code

Use classes and IDs: Use classes and IDs to define styles that can be applied to multiple elements. This way, you can avoid repeating styles for each element and instead define the style once and apply it to all relevant elements.

Use inheritance: Use inheritance to avoid repeating styles for child elements that inherit styles from their parent elements. This can help reduce the amount of CSS code needed to style a page.

Use variables: Use variables to store values that are used multiple times in your CSS code, such as colors or font sizes. This way, you can change the value in one place and have it applied throughout your CSS code.

Use preprocessors: CSS preprocessors like Sass or Less allow you to write more efficient CSS code

I hope you find it useful! 😄

Happy coding🤖
0
Bruno Fiori•20
@BrunoSFioriSubmitted almost 2 years ago
QR-code-component-solution
4
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
0
giorgi kitrtadze•30
@giorgikirtadzeSubmitted almost 2 years ago
display: flex;
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
0
aksteel08•10
@aksteel08Submitted almost 2 years ago
Qr code component using just html and css
4
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
Marked as helpful
0
Popoola Habeeb•10
@PopsjrSubmitted almost 2 years ago
responsiveness using media query.
3
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
Marked as helpful
0
João Victor•100
@joaovictor333Submitted almost 2 years ago
Responsive Website with pure CSS
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <footer> tag as semantic HTML in code

The <footer> tag is another semantic HTML element that is used to define the footer section of a web page.

The <footer> tag should be used to wrap the content that appears at the bottom of a web page, such as copyright notices, contact information, or links to other pages.

for example code:

<footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. ................................. </footer>

In the example above, the <footer> tag is used to wrap the copyright notice, which is the content that appears at the bottom of the web page. This tells both human readers and search engines that the content inside the <footer> tag is the footer section of the web page.

I hope you found this helpful!

Happy coding🤖
Marked as helpful
0
Bobby S•370
@bobbe86Submitted almost 2 years ago
Components summary main
3
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <footer> tag as semantic HTML in code

The <footer> tag is another semantic HTML element that is used to define the footer section of a web page.

The <footer> tag should be used to wrap the content that appears at the bottom of a web page, such as copyright notices, contact information, or links to other pages.

for example code:

<footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. ................................. </footer>

In the example above, the <footer> tag is used to wrap the copyright notice, which is the content that appears at the bottom of the web page. This tells both human readers and search engines that the content inside the <footer> tag is the footer section of the web page.

I hope you found this helpful!

Happy coding🤖
0
Micael Santiago•60
@micaelsantiagoSubmitted almost 2 years ago
Project Advice Generator App
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there👋!! Congratulations on completing this challange.

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Image element do not have alt attributes or you leave it blank

for example code

<img src="./images/icon-dice.svg" alt="">

In this code you should add alt in your code

<img src="./images/icon-dice.svg" alt="dice">

This alt attribute provides alternative text for images, which is important for accessibility purposes. Screen readers, use the alt attribute to read out loud what the image is about, allowing visually impaired users to understand the content of the page.

I hope you found this helpful! 😊

Happy coding🤖
0
ezranacianceno•70
@ezranaciancenoSubmitted almost 2 years ago
QR code component using HTML and CSS
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
0
Vitor Souza•240
@souza-vitorSubmitted almost 2 years ago
QR Code component with Bulma
#bulma
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
Marked as helpful
1
Efere Precious•580
@justEfereSubmitted almost 2 years ago
Responsive Social Proof Component
#styled-components
1
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there👋!! Congratulations on completing this challange.

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Image element do not have alt attributes or you leave it blank

for example code

<img src="images/image-colton.jpg" alt="">

In this code you should add alt in your code

<img src="images/image-colton.jpg" alt="colton">

This alt attribute provides alternative text for images, which is important for accessibility purposes. Screen readers, use the alt attribute to read out loud what the image is about, allowing visually impaired users to understand the content of the page.

I hope you found this helpful! 😊

Happy coding🤖
Marked as helpful
0
Dinesh Kumar T•100
@dineshjrSubmitted almost 2 years ago
Order Summary Component
#web-components
1
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
Marked as helpful
0
Kirill•10
@KirillHolomozykSubmitted almost 2 years ago
qr-code component
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
0
bianca_badescu•40
@b14labutoaneSubmitted almost 2 years ago
Product preview card component
1
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
0
Alaisah Abim•120
@AbimimbomSubmitted almost 2 years ago
Order summary component with HTML and CSS
#accessibility#contentful#sass/scss
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <footer> tag as semantic HTML in code

The <footer> tag is another semantic HTML element that is used to define the footer section of a web page.

The <footer> tag should be used to wrap the content that appears at the bottom of a web page, such as copyright notices, contact information, or links to other pages.

for example code:

<footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. ................................. </footer>

In the example above, the <footer> tag is used to wrap the copyright notice, which is the content that appears at the bottom of the web page. This tells both human readers and search engines that the content inside the <footer> tag is the footer section of the web page.

I hope you found this helpful!

Happy coding🤖
1
AMK•140
@ahmed322Submitted almost 2 years ago
Interactive-rating-component
1
Panji•2,090
@pperdanaPosted almost 2 years ago
Hi, Well done on completing the challenge! 👍

I have more suggestions regarding your code that I believe will be highly beneficial for you.

🔎 Center an element both horizontally and vertically

Using flexbox:

Set the display property of the parent element to "flex" and use the "justify-content" and "align-items" properties to center the child element both horizontally and vertically. For example:

.parent { display: flex; justify-content: center; align-items: center; } .child { /* other styles for the child element */ }

I hope this information was beneficial for you! 😊

Happy coding🤖
Marked as helpful
1
jfan•50
@jfan-devSubmitted almost 2 years ago
Nft preview card component main
1
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
Marked as helpful
1
Nadia•10
@ngawdrSubmitted almost 2 years ago
QR Code Component
2
Panji•2,090
@pperdanaPosted almost 2 years ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
Marked as helpful
0

Panji

All comments

Product-preview-card-component-solution

QR-code-component-solution

display: flex;

Qr code component using just html and css

responsiveness using media query.

Responsive Website with pure CSS

Components summary main

Project Advice Generator App

QR code component using HTML and CSS

QR Code component with Bulma

Responsive Social Proof Component

Order Summary Component

qr-code component

Product preview card component

Order summary component with HTML and CSS

Interactive-rating-component

Nft preview card component main

QR Code Component