@yukilun
Submitted
Hi there!👋 It was the first project that I incorporated the drag-and-drop feature.🎉
⚙️Built With:
🛠️Vue.js | 🗂️Pinia | 🎨Tailwind CSS | ✋Vue Draggable
Welcome and appreciate any feedback! 🤗
Looking to hire developers?
@vanzasetia
@yukilun
Submitted
Hi there!👋 It was the first project that I incorporated the drag-and-drop feature.🎉
⚙️Built With:
🛠️Vue.js | 🗂️Pinia | 🎨Tailwind CSS | ✋Vue Draggable
Welcome and appreciate any feedback! 🤗
@vanzasetia
Posted
Hi, Yuki! 👋
I found your solution in Frontend Mentor's newsletter. Nice solution! 👏
It is great that you allow people to drag and drop to order todo items. Amazing! 👍
It will be better if you add a focus indicator to any interactive elements. Right now, I can only see the focus indicator on the theme-switcher button and the "Clear Completed" button.
Great solution! I hope this helps. 😄
Marked as helpful
@JohanXTheKing
Submitted
@vanzasetia
Posted
Hi, JohanXTheKing! 👋
Congratulations on completing this challenge! 🎉
Also, good job on spending some time to write a README. 👍
Here are some suggestions:
<br>
element to move any text to the next line. Screen readers may announce <br>
as "break" which creates unnecessary noise. Learn more: <br>
: The Line Break element - HTML: HyperText Markup Language | MDNI hope this helps. Happy coding! 🙌
@giobooo
Submitted
I was unable to make the slider work by swiping on the phone/touch devices (only by tapping the buttons). any suggestions?
@vanzasetia
Posted
Hi, Giovanni Brienza! 👋
I do not know how to make the slider works with touch screen.
I built the slider for this challenge using a third-party library, A11Y Slider - Library for simple and accessible sliders. By using that, I was able to make the slider responds to swipe gesture.
Here are some suggestions:
<span>
and <div>
alone.title
attribute is not enough to label the buttons: I recommend having an alternative text on the arrow image that says, "Previous" or "Next". Or you can use an aria-label
attribute to lable each button for the slider.I hope this helps. Happy coding! 😄
@IamAbhiDev
Submitted
This is the second solution I am submitting for this challenge! Instead of specifying margin and padding for every element, I used CSS Grid to improve the layout and make it more responsive. It was a little challenging for me while making the responsive layout of the site as I am not used to making such layouts using CSS Grid but I tried my best. I would love to hear your feedback on this and help me improve my code as much as possible. Thank you for your time!
Note - I had to darken the light text due to accessibility issues (contrast error)
@vanzasetia
Posted
Hi, Abhinav! 👋
Here are a few suggestions for improvements:
section__card__content
is BEE (Block Element Element). I recommend creating a new block (card
) and then having an element for the new block (card__content
).Great job on fixing the contrast issues! That is a good initiative.
Nice work on the CSS. You are using clamp()
for fluid typography and rem
unit for font sizes. The grid layout works well too.
I hope this helps. Happy coding! 😄
Marked as helpful
@Viti-Martins
Submitted
What could be refactored in this could to make it looks even better ? Accepting any kind of feedback.
@vanzasetia
Posted
Hi, Vitor! 👋
A couple of suggestions:
<h1>
must not be a child element of <a>
. You can use Caninclude to check whether an element can be inside another element.target="_blank"
to every link. Only use it if the users will lose something if the links do not open in a new tab. For example, the links that are required to open when the users fill in a form.<div>
for the NFT card. You can use the <main>
element instead. It is possible by making the <body>
element as the flex container of the card instead of using the <main>
element.rem
or em
instead of px
for font sizes. Never use px
unit. Relative units such as rem
and em
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS and Why font-size must NEVER be in pixelsline-height
: Always use unitless numbers for line-height
values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDNI hope my suggestions help you. Have fun coding! 😄
Marked as helpful
@Dribbz
Submitted
Hi there 👋🏼, I’m Dribbz and this is my solution for this challenge. 🚀
🛠️ Built With:
⚡️HTML5 ⚡️Vanilla CSS
Any Suggestions On how to improve my code is Welcomed 🙌🏼
Thank you !✌️
@vanzasetia
Posted
Hi, Dribbz! 👋
A couple of suggestions:
<div>
element—<div class="grid-container">
—to wrap all the card sections. You can use the <body>
element as the grid container of the card or the <main>
element. Then, use the <main>
element as the .grid-container
.<p>
elements will have font-size: 1rem
. You can remove font-size: 1rem
from the .description
styling.I hope my suggestions help you. Have fun coding! 😄
Marked as helpful
@iJoel23
Submitted
Hey everyone 🐣!
I found difficult the hover over the first image. If there's a better way to do it, would be very helpful to know.
@vanzasetia
Posted
Hi, Joel Leon! 👋
Before taking care of the hover effect, I recommend getting the HTML right first by wrapping the Equilibrium image with an anchor tag. It has interactivity, so it should be wrapped by an interactive element.
Now for the hover effect, I recommend using a pseudo-element and background properties. So, there is no HTML markup for the overlay and the eye icon.
You can start by creating the pseudo-element from the anchor tag. Then, use the pseudo-element to show eye icon by using background-image
and background-position
. For the background color, use rgba
or hsla
to control the opacity of the color.
For your reference, you can see @IlnaraAckermann's solution.
Frontend Mentor | Css3, HTML5, flexbox, pseudo-class and pseudo-elements coding challenge solution
I hope this helps. Happy coding!
@RVilums
Submitted
This is my solution for the QR Code Component challenge from Frontend Mentor. The challenge was to create a QR code component that displays a QR code image along with a title and description. The component needed to be responsive and match the provided design preview.
I built the QR code component using HTML, CSS, and Flexbox.
I thoroughly enjoyed working on this challenge as it allowed me to apply my HTML and CSS skills to create a practical and visually appealing component. I found the experience valuable in terms of improving my frontend development abilities.
I would greatly appreciate any feedback or suggestions for improvement. Thank you for taking the time to review my solution!
@vanzasetia
Posted
Hi, Dumpling! 👋
Here are some suggestions:
<header>
. A page without a header element is fine. The only landmark that a page must have is the <main>
landmark.<div>
elements. Then, style all the elements directly to the elements.<html>
or the :root
font size: It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.I hope this helps. Happy coding!
Marked as helpful
Is it good for you not to use media queries? Does it still feels like a good design? Since it's a simple application I preferred to use rem as unit of measurement, and to have the html font-size attribute linked by a calc() with de vw, so, as the screen widens, all of the rem attached attributes are being modified as well.
@vanzasetia
Posted
Hi, Rodriguez Facundo Gabriel! 👋
Here are some suggestions for improvements:
<h1>
. Heading levels must always be in order to give structure to a page.<html>
or the :root
font size: It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.<div class="component">
. You can use the <body>
element as the flex container of the card. Then, use the <main>
element as the card component. Also, you do not need <div class="attribution">
. You can just use the <footer>
.padding
on the card to push the element toward inside the card. For the image, you can remove the margin: 6% 6% 0 6%;
and set the width to 100%. The same goes for the <div class="textContainer">
, remove the margin
and the div element itself.I hope this helps. Happy coding! 👍
This one looked easy but wasn't :D These two bubbles was a hard battle. Finally after 2 days I've managed to finish it.
Also I encourage you to leave any comments regarding my code as it is win-win.
You practice code-review and I get feedback!
My process is described in my repo on GH. Check it if you are intrested how I've done it
Cheers!
@vanzasetia
Posted
Hi, C4rlos! 👋
One suggestion is to remove the "Picture of" phrases from the alternative text. Alternative text for images should not contain any words related to "image" (such as picture, photo, logo, icon, graphic, avatar). It is already an image element (<img>
) so the screen reader will pronounce it as an image.
Everything else on the HTML looks good to me. Great job!
Marked as helpful
@eatsNotMe
Submitted
This was my first time making a responsive website and using a grid layout and media queries. This website still has several flaws. Please view this website from a mobile phone perspective so that you can see the problem. If you know how to fix this issue, I will be very glad.
@vanzasetia
Posted
Hi, Karan Niroula! 👋
Could you please describe the problem? At what screen size does the problem happen?
I recommend using a code-formatter. This way, your code base will have a consistent format, which makes it easier to read the code. I suggest using Prettier as your code-formatter.
Prettier · Opinionated Code Formatter
Here are a few suggestions for improvements:
<footer>
. The rest of the content should be inside the <main>
landmark.<img>
must have alt
attribute: Each of <img>
element must have alt
attribute.alt
value of “Huddle”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text<b>
element. Also, <b>
should be avoided whenever possible.<h1>
: The <h1>
element is used to define the main heading of a page. The "Build The Community Your Fans Will Love" should be wrapped by a <h1>
.You need to make sure the HTML is right first. I know that you are learning CSS Grid. But, you should get the HTML right because the HTML impacts the way users of assistive technologies interact with the page. Also, if the CSS fails to load the page will still make sense because of the correct user agent stylesheet.
I hope this helps. Happy coding! 👍
Marked as helpful
@MikeBeloborodov
Submitted
What would be the best way to create that background with 2 images (top and bottom circles)?
@vanzasetia
Posted
Hi, Mikhail! 👋
For the circles, I recommend showing them with pseudo-elements. You can see Grace's solution for your reference. Her solution does not require a media query to position the circles.
Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution
Here are a few suggestions for improvements:
<header class="card__header"></header>
. Then, use the <img>
to show the background pattern of the card.<h1>
: The <h1>
element is used to define the main heading of a page. In this case, replace <p class="card__content-name">Victor Crest</p>
with <h1>
.rem
or em
instead of px
for font sizes. Never use px
unit. Relative units such as rem
and em
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSSI hope this helps. Happy coding! 👍
Marked as helpful
@kevinx9000
Submitted
My feedback and difficulties mostly came from responsive design adjustments with Grid and rem units. Here's where I need feedback:
Otherwise, I welcome feedback about any other observations. Thank you!
@vanzasetia
Posted
Hi, Kevin! 👋
My feedback for the two mentioned points:
grid-template-rows: auto;
on the .container
. That is already the default behavior. After that, you do not need to define the grid-column: span 1;
on the second and third grid items. Try removing them and see if there is any difference.People with large screen sizes will zoom in or increase the zoom level. So you do not need to worry about making adjustments for large screen sizes such as those above 1440px.
Here are a few suggestions for improvements:
<main>
element as the .container
instead of having another <div>
element.max-width
: You only need to specify one max-width
for the .container
. You should put the max-width
as the base styling of the .container
.rem
or em
instead of px
for font sizes. Never use px
unit. Relative units such as rem
and em
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS<html>
or the :root
font size: It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.font-size: 1rem
from the <body>
styling. It is already the default styling.I hope this helps. Happy coding! 👍
Marked as helpful
@AlanGabales
Submitted
All feedback is welcome, it takes time but I learn lot
@vanzasetia
Posted
Hi, Alan C. Gabales! 👋
Here are a few ways you can do to improve this solution:
<body>
should be landmark elements; <main>
for the card, <footer>
for the attribution (if you want to have an attribution).<span>
and <div>
alone.rem
or em
instead of px
for font sizes. Never use px
unit. Relative units such as rem
and em
can adapt when the users change the browser's font size setting (as @Sachin0000000 mentioned earlier). Learn more — Why you should never use px to set font-size in CSS<picture>
element. Then, you can use the mix-blend-mode
property to create the purple overlay.I hope this helps. Happy coding! 👍
@emanuelcba94
Submitted
Feedback welcome. Thank you! Emanuel bonardo.
@vanzasetia
Posted
Hi, Emanuel Bonardo! 👋
Here are some suggestions for improvements:
<div>
elements: Remove all the <div>
elements. The styling of the .container
and the .card__container
can be merged and put on the <main>
element. You do not need to wrap each element with a <div>
element.* + *
). For example, you can have .card > * + * { margin-top: 1em }
.<img>
element tells assistive technologies to pronounce it as an image. So, you should describe what is the image and the purpose of the QR code.I hope this helps. Happy coding! 👍
Marked as helpful
@romzcastro
Submitted
I can't properly apply the background and make it fluid, they're moving around. feedback and suggestions are greatly appreciated!
@vanzasetia
Posted
Hi, jcastro! 👋
For the fluid position of those circles, I recommend showing them as pseudo-elements. You can see Grace's solution for your reference.
Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution
I have some suggestions to improve your solution.
<div>
: Do not use <article>
or <section>
for all content. Use <article>
for an article such as blog post content. It is okay to use <div>
to separate content for styling purposes. Also, those two elements have no meaning if they are not labeled properly using the ARIA attribute—WebAIM: HTML Semantics and Accessibility Cheat Sheet.<ul>
for the statistic. Also, the number should not be a heading.<main>
element as the wrapper instead of using <section class="wrapper">
.width: 100%
from the <body>
styling. It is already the default styling.I hope this helps. Happy coding! 👍
@MeghaS4831
Submitted
Hi!
This is my second challenge and I'm super excited to explore further :D In this challenge, I have aimed to use semantic elements wherever I felt it was needed. Hope it is correct.
I also wanted to understand if there is a way to change the svg images background using CSS? For instance, I used an svg file as <body> background but I wanted the colors to be different than ones currently in use.
Feel free to share your best practices to enhance the code efficiency! :)
@vanzasetia
Posted
Hi, MeghaS4831! 👋
For those circles, I recommend showing them as pseudo-elements. You can see Grace's solution for your reference.
Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution
This is another way to help you position those circles.
If you want to change the colors of those circles, you need to change the value of the fill
property in the SVG file. But, I think that can be tricky because the colors are gradient colors.
Some suggestions:
style="font-size: 18px; font-weight: 700"
. Separating the HTML and the CSS can make it easier to maintain the code.rem
or em
instead of px
for font sizes. Never use px
unit. Relative units such as rem
and em
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSSAvoid id
selectors: Do not use id
selectors for styling. There are two reasons for not using ID’s to style content:
I hope this helps. Happy coding! 👍
Marked as helpful
@Code-Beaker
Submitted
Hello, I have a doubt on centering the .wrapper
on the screen for that, I used
The .container
is the parent of .wrapper
<div class="container">
<div class="wrapper">
</div>
</div>
.container {
position: relative;
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
position: absolute;
inset: 0;
margin: auto;
}
@vanzasetia
Posted
Hi, CodeBeaker! 👋
Before getting into the styling to put the cards in the middle of the page, I recommend fixing the HTML markup first.
<div>
which is to wrap all the cards. You can remove the <div class="container">
. You can use the <body>
element instead.<div class="wrapper">
with <main>
. Users of assistive technology can navigate through landmark elements. This will help them quickly navigate a website or application.<h1>
with <h2>
: There should not be more than one h1
on a page. Many <h1>
elements mean many titles which can confuse the users, especially the screen reader users.Then, to put all the card in the middle of the page, you can make the body element a flex or grid container of the element that wraps all the cards—<main>
.
Another suggestion for styling, you do not need to use absolute positioning on the wrapper.
I hope this helps. Happy coding!
Marked as helpful
@akajfes
Submitted
I tried to use Sass for this and will try to use NPM instead of VSCode extensions build and watch the code. I added a thank you message after the validation too. I'm wondering if there's a way to condense my Javascript code.
@vanzasetia
Posted
Hi, Ana! 👋
Here are some suggestions for improvements.
<span>
and <div>
alone.novalidate
attribute to the <form>
through JavaScript. Then, add required
attribute to all <input>
elements. This way, if the JavaScript fails to load or the users disable JavaScript, the native form validation will be running.<button type="submit">
instead of <input type="submit">
. Submit input is legacy.@import
: You only need to write @import
once on the stylesheet. As a side note, using <link>
tags are recommended for better performance.rem
or em
instead of px
for font sizes. Never use px
unit. Relative units such as rem
and em
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS.gitignore
: This can prevent your repository from getting filled with .DS_Store
files.I hope this helps. Happy coding! 👍
@marciabel
Submitted
Hello everyone! This was my very first time applying grid by myself (no tutorial projects), and it was a bit tricky. I'm not sure it was the cleanest, but it worked! Do you have any suggestions on how could I improve this?
@vanzasetia
Posted
Hi, Marcia! 👋
Congratulations on finishing this challenge! It is great that you do this project by yourself. 👍
I have one suggestion:
No <br>
elements: Do not use <br>
element to break text. You should make the <span>
as a block element. Learn more about accessibility issues that can happen when using <br>
— <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns
I hope this helps. Happy coding!
Marked as helpful
Hi Front-end Mentor community. Here is my solution for Social-proof-section.
I used grid
to display the website in the desktop version.
But I have some question about it. Should I use the rem
measures for margin, padding, etc, or I'd better use measure like %
or vw
instead.
What is the best to use with grid?
Can you give me some tips about it. Thank you all;
@vanzasetia
Posted
Hi, Lo-Deck! 👋
For margin
and padding
, I recommend using rem
. Most of the time, it is better to have a consistent space.
You can use fluid space by using viewport units and clamp()
function. You need to make sure the minimum and the maximum value using rem
unit. If you use a viewport or percentage unit, the space will keep changing.
This tool can help you generate fluid space — Fluid Responsive Design | Utopia
In this case, I think it is better to use grid-template-areas
. You can divide it into three areas. The first area is the "10,000+ of our users love our products" and the below paragraph. The second area is the ratings. The third area is the testimonials.
Also, you may only need four columns instead of 12 columns. For the desktop layout, two columns for the first area and the second area. The testimonials take all four columns.
Here are some suggestions for improvements:
2rem
instead of 2.0rem
.line-height
: Always use unitless numbers for line-height
values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDNI hope this helps. Happy coding! 😄
Marked as helpful
@fortune-i-o
Submitted
Hello, Frontend Mentor Community! 👋
I'm thrilled to announce that I've successfully completed another challenge! 🎉💻
Please check out my solution and provide your valuable feedback.
Thank you for your continued support and encouragement.
@vanzasetia
Posted
Hi, Fortune O. Iyoha! 👋
Congratulations on finishing this challenge! 🎉
I have a few suggestions for improving your solution:
<figure>
when you need to include a <figcaption>
: <figure>
does not need to wrap the <picture>
element.alt
attribute if you already give an aria-hidden="true"
attribute.<h2>
for the statistic numbers. The statistic number and the statistic category should be wrapped by a <span>
or <p>
. The idea is they only make sense if they are read together. For example, "314 templates" does make sense instead of "314" and then "templates".I hope this helps. Happy coding! 😄
P.S. I just came from LinkedIn and saw your solution on my homepage.
Marked as helpful
@Rabbituz
Submitted
Someone who can review my code and can give me some tips on how I can improve, I will appreciate it, in the footer section the facebook image changes color, when I try to do it the whole box changes color, can someone tell me how to do it thanks
@vanzasetia
Posted
Hi, Rabbituz! 👋
As @markuslewin suggested, you should use inline SVG instead of <img>
to change the color of the icons.
My recommendation is to make the <svg>
element inherits the color of the parent element.
svg {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
svg path {
fill: currentColor;
}
This way, you can change the color of the social media icons by using the a:hover
selector with color
property.
I recommend having one CSS file for the website. This will simplify the URL path to the assets because everything will have the same prefix for the file path. I recommend moving all the styling to the style.css
.
Then, you can do: ./assets/[NAME_OF_THE_FILE]
to show background images.
One more suggestion is to keep the CSS specificity as low as possible. You do not need to keep appending the body
element selector.
For example, you can just do .container-text
instead of body main .container-text
.
I hope this helps. Happy coding! 🙂
@vjaimes
Submitted
any feedback on code is appreciated!!
@vanzasetia
Posted
Hi, vjaimes! 👋
I have some feedback on improving your solution:
<html>
or the :root
font size: It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.prefers-reduced-motion
to turn off the animations for users that prefer not to see them.<img>
element tells assistive technologies to pronounce it as an image.I hope this helps. Happy coding! 🙂
Marked as helpful