Looking to hire developers?
@GrzywN
@leoikeh99
Submitted
This was my first time using bem css, wanted to start using this because I thought it made working with CSS cleaner and a little bit easier and it definitely was. Also tried to write better accessibility so please give me feedback on accessibility issues and also any feedback on CSS best practices.
@GrzywN
Posted
Great job!
I would suggest querying all the elements first and then passing them as function parameters. Then you can use the same elements and it is not necessary to query them again. This is generally considered a good practice.
It is also better to avoid complicated regular expressions, as they almost always do not work as intended. I would suggest using one of the popular npm libraries in this case.
Keep coding and have a nice day!
@Zubair1020
Submitted
Hello there everyone! I am trying to be good at this. I am trying my best. Fell free to pass on your valuable opinion and PLEASE correct me where you think I could do batter! :)
@GrzywN
Posted
Hey Kira!
Things worth considering:
Have a nice day and keep coding!
@darryncodes
Submitted
Hi everyone 👋
I had a lot of fun with this challenge!
The shopping cart functionality is the perfect use case to learn React's useContext hook. I also really appreciated Tailwind CSS helping to speed up the development process to focus on learning React.
A nice little addition was playing around with framer-motion & react-toastify.
Any feedback that could help me to improve would be very welcome.
Happy coding 🤙
@GrzywN
Posted
Great job @darryncodes!
I think you should consider changing '+' and '-' buttons, since they are really hard to click, especially on mobile. Try to focus them with the 'tab' key and you'll see.
Helpful materials for you:
Have a nice day and keep coding!
Marked as helpful
@abedfetrat
Submitted
@GrzywN
Posted
Add no-cache, when using fetch. It doesn't work properly on Firefox. For example:
const response = await fetch("https://api.adviceslip.com/advice", {
cache: "no-cache",
});
Have a nice day! 😄
Marked as helpful
@Bayoumi-dev
Submitted
Hi There! 👋 This is a solution to the Single-page developer portfolio challenge🎉... built with HTML5, CSS3, Bootstrap5, JS, and Webpack5
Additional features:
Any suggestions on how I can improve are welcome
Happy coding 😉
@GrzywN
Posted
I can't access your repo ;(. It's probably still private
@Bayoumi-dev
Submitted
Hi There! 👋 This is a solution to the Dine restaurant website challenge🎉... built with React js, React Router, TypeScript, and Tailwindcss.
Additional features:
Any suggestions on how I can improve are welcome
Happy coding 😉
@GrzywN
Posted
i love it, great job
@P4ZD4N
Submitted
Hi! 😅
Today I completed my probably most problematic challenge I have done. I don't know why, but It was really hard to me and I'm glad I finished It at all. 🤯
I'm aware that I've made many mistakes doing this challenge, but I'd like to find and correct them. 😎✔️
Any feedback is welcome! 🤠
@GrzywN
Posted
Siema @P4ZD4N
Staraj się używać remów zamiast px. Pixeli nie używa się ze względu na skalowanie treści, czyli jak ktoś ma w przeglądarce ustawionego zooma albo większy rozmiar czcionki to wtedy pixel jest pixelem i nie skaluje się w żaden sposób. Dlatego lepiej używać remów i emów, choć emów ja raczej nie używam. Remy odnoszą się do font-size nadanego w tagu html, a emy do odziedziczonego font-size z nadrzędnych elementów. Domyślnie 1 rem to 16px, więc można albo ręcznie to policzyć albo użyć wtyczki px to rem w VS Code i wtedy jednym skrótem zmieniasz px na remy i odwrotnie. Wszystkie deklaracje wielkości czcionki powinny być w rem, a nie w px ani em. Czasami używa się px dla jakiś małych wielkości typu border na 3px albo box-shadow. Poza tym większość designów jest tworzona w wielokrotnościach czwórki typu margin 32px, czyli 2 remy, co ułatwia prace na remach.
Zamiast clampa to polecam ci używanie max-width i width: 100% (jeśli potrzebne). Clamp nadaje min-width, a tego raczej nie powinno się używać ze względu na mniejsze ekrany. Jeśli bardzo chcesz używać nowoczesnych funkcji to możesz sobie dać coś takiego width: min(100%, 24rem). Wtedy masz to samo, ale bez tego min-width. Używanie max-width jest kozackie, bo możesz sobie wrzucić ile jakiś element może mieć i masz właściwość często uniwersalną dla mobile, tabletu i desktopa bez większego zastanawiania się jak to będzie wyglądać na danych szerokościach.
Raczej odradzam używania procentowych wartości dla paddingów, marginów, szerokości itp. Jak zmniejszysz sobie szerokość na twojej stronce to tekst zaczyna wchodzić na obraz, a raczej powinien stale być oddalony od obrazka o te np. 2 remy. Kiedyś używałem procentowych szerokości dla paragrafów i headingów, żeby tekst się tak samo zawijał jak w designie, ale teraz raczej zrobiłbym to za pomocą max-width. W tailwindzie często używam czegoś takiego jak max-w-prose czyli w CSSie max-width: 65ch; Generalnie jest to fajny sposób, żeby zmniejszyć szerokość tekstu niezależnie od wielkości jego czcionki dla np. paragrafów.
pracuj pracuj xd naura
Marked as helpful
@DannyLenk
Submitted
This was a BIG Project as the challenge says. So I am looking for a person with a BIG heart who might give me a piece of advice and thereby help me improve tremendously. Great thanks to all of you in advance!!
@GrzywN
Posted
Great job 🥳
I suggest using semantic <address> tag for address data and <a href="tel:+1 253-863-8967">+1 253-863-8967</a> for the phone number (it's good for mobile users, since they can click on it to get the number). You can do it multiple times across the page, since phone numbers and addresses are present in multiple components.
You might also add autocomplete properties to form inputs for example autocomplete="email", autocomplete="name" etc. More about it here
I would change favicon to the Designo logo. There is a great tool for it - favicon.io. You might need to convert the logo/image to the png, but you will get everything you need for different devices/sizes.
Hope this helps! Have a nice day and happy coding!
@leoikeh99
Submitted
Any feedback is appreciated.
@GrzywN
Posted
Great job @leoikeh99! 🥳
Everything looks and works great! Things you might consider to improve this project:
Have a nice day and keep coding ✌️
Marked as helpful
@P4ZD4N
Submitted
Hi! 💪😁🤙 Any feedback is welcome! 🔁🙏
@GrzywN
Posted
https://www.youtube.com/playlist?list=PLjHmWifVUNMLJqo4jyY5UKJefNmH3Vslu https://www.youtube.com/playlist?list=PLjHmWifVUNMKIGHmaGPVqSD-L6i1Zw-MH
tam masz fajne poradniki do bem i gita, jak chcesz zeby ci pisali komentarze to sobie daj do nazwy czego używałeś np. Four Card Feature Section | HTML, SCSS with BEM
Marked as helpful
@P4ZD4N
Submitted
Any feedback is welcome :>
@GrzywN
Posted
siea
tam jak masz przekreślone to sobie daj tag <s> zamiast spana, bo wtedy masz od razu przekreślone i jest lepiej semantycznie, bo czytniki i wyszukiwarki biorą to jako coś nieaktualnego
spróbuj sobie wyjebać te divy które mają tylko jeden element, bo w sumie są chyba zbyteczne, najwyżej daj sobie display: block w cssie na elementach inline czyli tych tekstowych (ale chyba to nie potrzebne)
wrzuć sobie cały komponent w diva jakby to był komponent który masz wrzucić na inną stronkę, na stronce może być tylko jeden main tag, często do takich kart sie używa figure i figcaption ale można to poprostu też wrzucić w diva
z tym bemem z nazewnictwem takim jakie miałeś to sobie możesz zrobić coś takiego
<div>
<img src="./images/image-product-desktop.jpg" class="component__left--img" alt="perfume" />
<section class="component__right">
<p class="component__header">Perfume</p>
<div class="component__title-wrapper">
<h1 class="component__title">Gabrielle Essence Eau De Parfum</h1>
</div>
<div class="component__description-wrapper">
<p class="component__description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
</p>
<span class="component__price">$149.99</span>
<s class="component__price component__price--line-through">$169.99</s>
</div>
<div>
<button type="button" class="component__button"><img src="./images/icon-cart.svg" alt="icon-cart" /> Add to Cart</button>
</div>
</section>
</div>
ja to se tak zrobiłem, akurat tutaj używałem dużych liter ale wiekszosc osob robi tak jak ty i jest gicik
<div class="ProductPreview">
<div class="ProductPreview__Card">
<div class="ProductPreview__ImageWrapper">
<img class="ProductPreview__Image" src="" alt="" />
</div>
<div class="ProductPreview__Body">
<h2 class="ProductPreview__Type"><slot name="type">Perfume</slot></h2>
<h3 class="ProductPreview__Name"><slot name="name">Gabrielle Essence Eau De Parfum</slot></h3>
<p class="ProductPreview__Description"
><slot name="description">A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</slot></p
>
<div class="ProductPreview__Prices">
<span class="ProductPreview__CurrentPrice"><slot name="current-price">$149.99</slot></span>
<s class="ProductPreview__OldPrice"><slot name="old-price">$169.99</slot></s>
</div>
<button class="ProductPreview__AddToCart" type="button">
<span class="ProductPreview__AddToCartWrapper">
<img class="ProductPreview__CartIcon" src="./assets/icon-cart.svg" alt="" />
<slot name="add-to-cart">Add to Cart</slot>
</span>
</button>
</div>
</div>
</div>
a ogólnie to maśniutko 🤙
@john-mirage
Submitted
@GrzywN
Posted
Well done 🙌!
You should name your component file names with the same casing (PascalCase) as component functions. e.g. CardGroup.tsx instead of card-group.tsx. It's fine for hooks, but it's a must for components. It's also worth considering to put each component into separate folder and add index.tsx file so it's possible to import all files from one folder with one import and omit file name.
Have a nice day! Keep up the great work! ✌️
Marked as helpful
@correlucas
Submitted
👾 Hello, Frontend Mentor coding community. This is my solution for the challenge Product Preview Card.
🎨This is an old old old solution and the first one that I've applied some customization. I did some improvement in the code but there are many things to improve, but I was just lazy to change the html structure to use the proper tags like the picture for the image, because I was afraid to have to write again the grayscale effect on it. 🤭
Feel free to leave any feedback about my design chances and help me improve my solution or make the code clean!
@GrzywN
Posted
Great job, everything looks good!
The only thing I would suggest is not to prioritize UI over UX. Because of transforms to the right it might be harder to select the product name if someone wants to copy it to look for the same product on other pages. Also, there is a point on the left side of the button where the button escapes the user. I did the same thing not too long ago, but now if I want to use some active state using the transform property, I just scale the button up a bit instead of moving it.
Have a great day and continue to inspire people!
Marked as helpful
@BohdanNikolaychuk
Submitted
Country Search in React with hooks and react router
@GrzywN
Posted
Awesome job 👏
I have some small suggestions which might help you:
I see that you are using folder component structure. I recommend making an index.jsx file in each component folder and import and export your component for example Container in it. In the result, if you wanna import something you can use path to the folder instead of the jsx/tsx file. For example ../components/Container instead of ../components/Container/Container. It can also provide some kind of encapsulation, because you can export components which should be available globally and don't import those which shouldn't be. You can also make use of normal export (not default) and export all the components from a folder with the regular export. All files are available in one import. Some people also like naming components index.jsx, but I think it makes files hard to work with (if every component file name is index.jsx)
The next small thing I could suggest is to use alt attribute (even empty, if image is not meaningful) on every <img /> tag, but in this case you could use something like alt={`${commonNameVariable} flag`} for example.
I will definitely look up to your solution since I'm doing this challenge myself.
Have a nice day and happy coding too ✌️
Marked as helpful
@thevolcanomanishere
Submitted
What did I find most difficult? Getting SVGs to work when deployed using Vite + Vercel is always a bit off. They work locally and then don't when you upload them. Figured it out by inlining the SVGs. This required updating the XML of the SVGs to be compliant with how React works. Sizing the SVGs can be confusing due to viewbox/styling but I figured it out in the end.
I decided to switch out the static background and added a similar animated SVG wave to the background 🌊
@GrzywN
Posted
Hey!
You can import images in your code like anything else in Vite. The imported thing returns an url for your imported image. You put it like this <img src={importedImage} alt="" /> (example in React.js) and Vite knows that it needs to import it in the build process. I had the same problem too, but I some how figured it out. If it's in your CSS / Tailwind CSS config, you can just use absolute paths like url(/assets/images/image.jpg), vite will import it as well.
Have a nice day and keep coding!
Marked as helpful
@Luis15Herr
Submitted
Hello, everybody! 👋
Let me know if my code could be better!😊 Feedback is welcome and appreciated! 😊
Happy coding! 😁
@GrzywN
Posted
Great job 👏
I suggest using rem/em units instead of px. Rems/ems are better if the user uses custom browser font size or somebody is using a device which handles px differently (for some devices 3px or 2px are 1px). It's generally a good practice to use them everywhere, even breakpoints. You can also download px to rem extension for VS Code.
Have a nice day and keep coding 😁
Marked as helpful
@fernandoLRibeiro
Submitted
Still needs (a lot of) CSS refactoring and styling seems a bit off.
@GrzywN
Posted
Great job 👌
I have some suggestions regarding your solution:
:hover selector / pseudoclass.<section> tag, make sure it contains headings. Generally <section> tag isn't really that semantic overall and sometimes it's not worth using it. You can watch a video on it hereheader, main, nav etc. It's easier for screen readers and crawlers to navigate on your webpage/app. Not using them causes validation issues, which can be easily solved by using these tags instead of divs. (it's kinda weird, because section is different than others, but yeah it's like that)Have a nice day and happy coding 😎
Marked as helpful
@i-am-ashwin
Submitted
Hello,
please give your feedback on how the width and image is managed(i used the picture tag since IE is dead anyway :P).
is this the way to manage the width or should i be setting explicit width for the right side as well?
@GrzywN
Posted
Great job 🙌!
You can setup a width for the whole container and setup grid with 2 columns using fr units. You can do the same thing with display:flex and flex: 1 properties on each column. These are 2 possible solutions for desktop and depending on what you've used you can use flex-direction: column or grid-template-columns: 1fr.
Have a nice day and keep coding 🤙
@Maikolrm
Submitted
Here is my last challenge... feedback and comments are welcome.
@GrzywN
Posted
Awesome job 🙌
It's great that you included a loader and a loading state in your app. What I can recommend is to change the favicon to the Frontend Mentor's logo and to add an <h1> heading with some text, for example name of the challenge with a class for screenreaders, so only screen readers and crawlers will see it.
Here is how you can do it.
Have a nice day and happy coding ✌️
Marked as helpful
@Fabzus
Submitted
Hello!
I'm curious to learn more about form validation and how I could avoid hard-coding as I just did. I'm thinking about the map method. Anyways it was fun and I enjoyed playing with animations
@GrzywN
Posted
Great job, I like the moving label/placeholder a lot! 👏
If you are starting with Sass/SCSS, make sure to try out Parcel. It's really easy to get started with this bundler. You basically just init a npm project, install the parcel dependency, start the dev server and then you can import your sass file directly in the HTML. More than that, if you modify code, the browser will auto refresh and there is no need for a extra extensions. At the end you can build your project and minify it for the deploy.
Some videos/articles which helped me and which might help you too:
To practice map, filter, reduce, sort, split, join JS methods and some more advanced features of SCSS like loops I recommend checking out the freeCodeCamp curriculum - mainly JavaScript Algorithms and Data Structures Certification and Front End Development Libraries Certification. You can practice them too on Codewars.com
Have a nice day and keep coding! 😁
Marked as helpful
@ApplePieGiraffe
Submitted
Hey, everybody! 👋
This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.
I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.
I'm quite happy with the result! 😊
Any feedback on both the design and code is welcome and appreciated! 😃
Happy coding! 😁
EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.
@GrzywN
Posted
Great as always 🥰
I prefer :target for CSS only approach, because it's easier to animate, but <summary> and <details> seems to work too.
Have a nice day 😁
Marked as helpful
@mathuran-a
Submitted
I have sorted the questions after importance (Most important first) in case you do not have time to answer all questions.
I am wondering how one would use grid, flexbox or other methods to easier space out the elements. I had to try and fail a lot with padding, margin, width since my understanding of block/inline elements is not optimal. My question is therefore if there is a like an order of what to do for the box model, or if the box model is outdated and there are other best practices?
Changing from desktop to mobile worked with the resources' method mentioned in the README, but it didn't go optimal for other devices (eg. iPad). In the resource (see below) it used flexbox and I am wondering if this is a common solution or if there are other?
Another question is if the HTML structure is a clean solution? I personally felt I should keep it simple, but could be I had trouble with the styling because of this.
@GrzywN
Posted
Hey, Mathuran Amirthalingam !
I want to suggest you not to use percentages like you do. It's better to make a screenshot or somehow measure the sizes differently, then if you have width of card and width of image you can substract widths and than divide this by 2, so you have padding sizes and then calculated paddings can be added directly to card component, so it will also work for heading and paragraph.
To size your card, so it keeps its size, but shrinks into smaller one with smaller screen sizes you can use combination of two properties width: 100%; max-width: 20rem or one width: min(100%, 20rem). If you use block element for example div, max-width property might be enough, because block elements have width set to 100%. It will make your card scale down only if a size of the screen is smaller than 20rem, but it won't scale up if it reaches this size.
Also I recommend changing all px units to rem, so your website can scale better for different browser font sizes. You can use VS Code extension.
If you want to learn more about Flexbox and CSS Grid (in this challenge the only thing which is helpful is centering card, by using display: flex;, justify-content: center;, align-items: center;) I recommend checking out these websites:
I recommend wrapping all of your content into <main> tag and adding hidden <h1> tag. to fix HTML validation issues. Article on how you can hide it here
Hope this helps! Have a nice day and happy coding too 😁!
Marked as helpful
@correlucas
Submitted
👾 Hello, coding community!
😎 This is my solution to the Single Price Grid Component. I had a lots of fun doing the challenge.
🎨 I added some personal design improvements and also the button to change the card component color.
I'll be happy to hear any feedback and advice!
@GrzywN
Posted
Great one 😆
Everything is well coded and looks great. What I can suggest to you for your future projects is to try making changes of website without refreshing the page. Probably the best way is to use JavaScript and change every text content or image source of targeted image, but I don't know how is your coding in JavaScript. It can also be done using :target CSS selector (I think I used it in my QR Code solution). You could also manipulate text using some pseudoclasses and content property.
I recommend learning some type of naming convention (BEM, Cube CSS). Personally I prefer BEM. It would help you in making your projects scale better. Using generic tags like h1 or ul might become hard in your future projects. And it's easy to pick up and start using it.
Once again great job! Have a nice day and happy coding 😎
Marked as helpful
@Biggboss7
Submitted
Hello Everyone, I've just completed this QR Code Challenge by Frontend Mentor. Please kindly give any feedbacks. Thankyou.
@GrzywN
Posted
Hey @Biggboss7, well done 🙌
The only thing which is not correct is a font color. Everything is almost pixel perfect 🥳
I can suggest using full names instead of shortcuts. For example margin-left or padding-bottom instead of margin and padding. You can also try using more modern CSS properties which set margins / paddings for respectively left and right or top and bottom (margin-inline, padding-inline or margin-block and padding-block). It's the best if your code is written in a way, that nobody needs to think about what it does.
Hope this helps! Have a nice day and keep coding!
