Looking to hire developers?
@zuolizhu
@ApplePieGiraffe
Submitted
Hey, everybody! 👋
This was a fun little challenge! I used Svelte again and it makes things so much easier—component-scoped styles are like the greatest invention since sliced bread! 😂
I added an intro animation (for the tablet/desktop layout of the site) with GSAP and the little attribution popup. I also just went with the browser form validation for this one. 😀
Feedback welcome and appreciated, of course! 😊
Happy coding! 😁
@zuolizhu
Posted
Hey APG! Yooooo dat loading screen 😯😯😯 is dope 🤩! It just brings your work to another level! And the way you managed the animations is so smart 🥳!
I'm glad to hear you still like Svelte 😆, Svelte also supports component-scoped scss 😏, just few steps and it will just work, check out this article. (This is the scss setup I found before, if there is a simpler way to do, please let me know😝)
keep coding and happy coding 🙌!
@CallmeMukty
Submitted
The full features of my designed website is not showing on my live site. Please I need to know how I can resolve this.
@zuolizhu
Posted
Hey Owolabi,
You didn't put your assets (css files and image files) into the folder, that's why you got 404 errors on the live site.
Try to change your
<link rel="stylesheet" href="css/styles.css">
to
<link rel="stylesheet" href="/styles.css">
Same for your images, remove ./images.
And checkout the result 😉.
Happy coding!
@buchi-1996
Submitted
please where can i learn prop drilling effectively and how to use context api in react.
@zuolizhu
Posted
Hey @buchi,
Nice job on this challenge 🙌! prop drilling itself is not effective at all 😂, that's why people created state management tools for handling passing props crossing components.
However, if you want to stick with props and not introducing extra complex, you can do state lifting, 👉 official doc you can check it out. In your example, instead of fetching all the countries in your Country.jsx, you can fetching it in the upper components, which is your App.js component, and then passing down to other components.
Another tool you can try (and I highly recommended) is Zustand for global statement management, super easy to setup and works just fine 👌.
You can also use some tools like React Query or SWR, those tools have built in cache you can use, so instead of save the fetched data into state, save it as cache and use it in your components.
Hope my answer helps and happy coding 😆!
@ApplePieGiraffe
Submitted
Hey, everybody! 👋
This was an awesome challenge that I enjoyed and in which I learned a lot! I used Svelte.js for the first time and it was pretty amazing. Svelte's features made it a lot easier to create a todo app like this and it was a lot of fun to learn! 👍
I added some transitions to make the actions smoother and a Christmas theme 🎄 (because it's drawing near to that special time of year) and used local storage to store the state of the to-do list and the most recently used theme. 😊
There are a few quirks that I'm aware of—the order of the items in the to-do list isn't saved in local storage if they are changed via drag-and-drop and there is no transition for the "Clear Completed" action because of the way I passed data around in my Svelte files. I almost wish I could redo this challenge and do a few things differently (such as make my code less ugly), but... IDK. 😅
Feedback is welcome and appreciated (I really hope everything works okay)! 😀
Happy coding (and happy holidays, too 🎅)! 😁
@zuolizhu
Posted
Hey APG!
Finally someone tried the Svelte and I told you it is an amazing framework (well, actually it is a compiler LOL) right ? 😝 @mattstuddert I bet £1 you will fall in love with Svelte 😏. It is a good starting point for anyone just learned HTML, CSS, basic javascript and wants to try out some frameworks.
I was about to asking how you did the drag and drop list, and then I just found you used sortablejs, nice package 🤩! I think you need to add the event listener called onEnd: function (event) {} for the Sortable object, within that function, you can grab the new ordered list and save into the local storage.
I love the Christmas theme 🎄 you designed, so cuuuuute!!
I don't think you need to redo this challenge, it is already perfect! Just keep it in there as a footprint, maybe few years latter you can watch back and see how you improved 🤪.
Happy coding and happy holiday 🙌!
@ApplePieGiraffe
Submitted
Hello, everybody! 👋
This was such a beautiful challenge and I learned so much from making it! I actually wanted to do more, but I felt like it was taking a while and I simply needed to submit my solution. 😅
I tried to focus a little more on making this solution accessible with styled outlines, WAI-ARIA, and dynamic alt text for the changing of the tab images. I was also happy that I got to code more JS in this challenge and think carefully about making my JS DRY. 😀
Some extra touches I added were a Material Design-inspired click effect to the buttons, some simple content animations and transitions (using Animate.css again), and a little popup attribution complete with some sound effects! 🎉
Feedback is welcome and appreciated, of course (it's very helpful)! 😊
And, as always—keep coding (and happy coding, too)! 😁
EDIT: I'm aware that a small quirk in my design is that the attribution popup gets in the way of the social media icons in the footer of the page on certain screen widths—but unfortunately, I'm a little lazy at the moment! 😜
@zuolizhu
Posted
Hey APG! Happy Friday 😆🍻!
I saw your outlines of the elements for :focus, nice improvement 🙌!
The shaking animation of the two buttons on the hero are so cute 🤩!! The animation just changed the whole feeling when using the website. Love it so much!
Personally I would hide the tab border when :focus, then show the tab border when out of focus. Because from design perspective, both outline and border are served for the same purpose (to indicate focused or not). 🤔 So why would use two effects on one element at the same time. But this is just my personal opinion, hope it doesn't bother you 🤣.
I am also a big fan of the material design, although it has too many rules to follow 🤯 ( for example, by default Material uses capitalized button text, and avoid using two contained buttons next to one another etc.) For me those rules violate "happing coding", so I just won't use it in my code 🤣. But I'm happy to see your creativity on it 👍!
I noticed the new attribution you did and the sound effect to it! That's so cute hahahaha! Everyone should try it!
I was surprised how fast you've improved your skills through out building these amazing solutions, keep doing it 💪! Most importantly, happy coding 🙌!
@ApplePieGiraffe
Submitted
Hey, everybody! 👋
I've given a lot of feedback on this particular challenge, and now it's my turn to give it a go! I hope I did okay! 😅
I ended up coding a lot more Sass and JS than I initially expected, but I learned a lot. I decided to put the slider images in my HTML so that I could use the <picture> element for responsive images but stored the text in my JS (feedback on my JS would be appreciated).
I added some cool transitions to the mobile menu and navigation and created an intro animation (using GSAP) after stumbling upon this YouTube video and remembering Connor Z did the exact same thing (and blew me away when I saw it) when he completed this challenge! 😆
More importantly, I tried to ensure that the design scales up and down nicely (which gave me quite a headache because of this behavior of flexbox), but I think I managed to do it okay in the end.
Of course, feedback is welcome and appreciated! 😊
Happy coding, everyone! 😁
@zuolizhu
Posted
Coming from your comment on my solution 😏 I really love your design on the scales up and down, it just looks amazing 👏! One little detail you can try next time, when using tab navigating on those buttons, you can add
:focus {
outline: rgb(104, 190, 205) dotted 3px;
}
(This is how frontendmentor.io did on their buttons and input box 🤓)
I think your skills of HTML CSS and JavaScript are solid enough, you could try some frameworks (I highly recommend Svelte since it's not that different from no-framework) to help you manage your code, e.g. for this project, you can split the index.html into header, carousel, about etc components, and makes it a lot much easier to maintain when you keep adding details latter on 😎.
As always, keep coding 💪 and happy coding 🙌!!
@ApplePieGiraffe
Submitted
Hey, everybody! 👋
This was a fun challenge which I actually quite enjoyed! 😀
I was able to match the desktop and mobile designs rather closely and only had to use one media query to make the page responsive (and managed to keep my code from turning into a mess), so I was quite happy with that! 😄
I decided to go with CSS-only form validation again, and this time, I let the browser handle the actual error messages and just focused on the validation icons (I added an extra green checkmark to make things look nice).
And, of course, I added some CSS animations from Animate.css to finish things off! 😉
Once again, feedback on both my design and code is welcome and appreciated! 😊
Happy coding! 😁
@zuolizhu
Posted
I understood these days people build out projects using JS frameworks such as React, and they relied on those JavaScript-code-generated-Virtual DOMs and don't really care about the "ancient" HTML anymore (I saw a situation where using JavaScript to check if the input field is empty 🤣). "Anti-JavaScript" and diving deeply with the pure HTML and CSS is absolutely worth it!
I love how tiny your project is (comparing 2x size if using react) and the animations just make the user experience feels nice and smooth🤩.
You don't have to use node-sass in your package, you can just use a vscode extension called Live Sass.
You can also break your main.scss into small pieces and import to main.scss which can make it easier to organize. And some simple scss architecture might also help for your big project 😎.
Looking forward your next project!
Happy coding! 😁
@ApplePieGiraffe
Submitted
Hey, everybody! 👋
I have to admit, this was a much trickier challenge than I thought! 🤔
I originally tried to layout this site using flexbox, but eventually switched to CSS grid (which I found to be easier).
I also decided not to try out any JS for the form validation but use CSS pseudo-classes and combinators to make the error elements appear when the email input is invalid.
I really wasn't sure about how to make this challenge responsive. 😥 Other than follow the designs for the desktop and mobile layouts of the site (which look nice when the screen is exactly 1440x800 or 375x800) I think there's a lot of blank space on other screen sizes and I wasn't sure if I should allow the images to scale a whole lot (because then they might not look so clear).
Any help or feedback on this would be greatly appreciated! 😌
Happy coding, everyone! 😁
@zuolizhu
Posted
Hey @ApplePieGiraffe, your solution is almost pixel-perfect as well 😁!
I think doing form validation without JS is actually a big improvement of accessibility (some situations such as JS just won't load or browser just not support).
I think there is a background pattern coming in the starter kit, the background is not just a simple gradient 😝. Also, you could put the background in main-wrapper to make the background responsive.
Since the page is a coming soon page (supposed no other content down below), so I think it make sense to stretch the picture on the right side to fit the height. Here is a shameless plug to my work 😎 I hope it helped!
Happy coding 🙌!
@luisdevworks
Submitted
Hello,
Any feedback is welcome! Thank you.
@zuolizhu
Posted
Hey Luis,
Nice job on this challenge👍!
I think you can put the attribution inside the <main></main>, otherwise you will see there is a big gap between the attribution and the main. Also, margin-top: 80rem; of the .attribution seems too big after screen size 768 px.
The comments you added make your code much easier to read! However, if you try to make attribution as a footer, then instead of div, using footer to improve the semantic structure. You can check out this article for more 👉**semantic html**
I'm looking forward to your next project😜 Happy coding 🙌!
@iKnowMagic
Submitted
I'd appreciate any feedback. Many thanks!
@zuolizhu
Posted
Hi @Ilan,
Another amazing almost-pixel-perfect work 👏!
I think you missed the hover effect for the header navigation 🤓. Also, on the contact page, I think the label should be replaced by the input text (I would use placeholder to show the filed name and hide the label for accessibility).
Adding extra transitions to those changes would also polish the final result.
Thanks for sharing this nice project and happy coding 🙌!
@DannyShien
Submitted
Can I get some feedback on my CSS of how I set up the staggered star ratings and also for the user reviews? In the CSS file, lines 87-100 and lines 133-148. I'm wondering if there is a cleaner way of setting these up?
@zuolizhu
Posted
Hey Stanley,
Nice try on this challenge! Both desktop and mobile views look good 👍!
The stars are stretched in height when the screen size is below 1440px 🧐.
One way you can fixed this is to remove the height: 30%; for the .ratingStars img {}. There is no need to change the height or width of the star. At the same time, change the width of . ratingStars to 117px (This is the actual width from the sketch file).
.ratingStars {
align-items: center;
display: flex;
justify-content: space-between;
margin-left: 32px;
margin-right: 32px;
width: 117px;
min-width: 117px;
}
.ratingStars img {
/* height: 30%; */
}
I think this can give you a good result of the stars.
By the way, you can open the .svg file in your text editor, and copy the code into the HTML file, something like this:
// Instead of using <img> tag
🙅♂️<img src="./images/icon-star.svg" alt="star rating">🙅♂️
// Using svg code directly
🙆♂️<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16"><path ... /></svg>🙆♂️
The reason I prefer this way, is because each <img> tag will make a request to fetch the image file. And svg can be rendered directly in the browser from the HTML code, so that you can reduce the number of requests by adding it directly in your code. Which can speed up your page loading a little bit 😉.
There is nothing wrong to use margins to make the staggered patterns. Your code from lines 87-100 and lines 133-148 are good.
However, the elements above 375px are squeezed together. And I found 👀 you have @media screen and (max-width: 375px) to the <section class="upper">.
That means the the code with in @media screen and (max-width: 375px) will be only applied if the screen size is below or equal to 375px.
And I think change it to @media screen and (max-width: 1024px) will fix the squeezed problem.
Hope my nerdy comment helps🤓.
Happy coding🙌!
@ApplePieGiraffe
Submitted
Hey!
This was a fun challenge that I spiced up a little with some CSS animations from Animate.css.
Feedback definitely appreciated!
@zuolizhu
Posted
Hi ApplePieGiraffe,
Amazing job on this challenge! I like the animation you added 😆, it must be a lot of fun to use the Animation.css library isn't it 😏.
The code looks very clean and easy to read 😯. I found that you made some reusable utility classes, good practice!
I noticed that you are using transform to make the shift of the positions of some elements 👀. There is nothing wrong with that at this project. However, I feel it is kind annoying when measuring the distance between two sections if the one of them have the transform 😐.
In your example, <section class="bottom" ... has 192px height. But the reviews within it already exceeded the height 🧐.
If there is another section down below this section and have margin-top maybe 10rem, then the actually margin-top you will see is less than 10 rem because of the transform 🤯.
So instead of transform-y-sm and transform-y-md I would go
.mt-sm {
margin-top: 3rem;
}
.mt-md {
margin-top: 6rem;
}
You might see that the first review figure will be stretched 😬, no problem, add align-items: flex-start; to your .bottom will fix it 😎.
I would also add a max-width: 1110px; (I think FrontendMentor loves the number 1110, they always use this number for the container size 🤣) to the main, this will make sure your page won't tear apart in the extra wide screen.
Your project becomes better and better, can't wait to see your next project!
Happy coding 🙌!
@Mostafa-T
Submitted
Hey, would someone review my JS code and tell me if there is a way that would be more effective than that. all the feedbacks on the design are appreciated as well 😁
@zuolizhu
Posted
Hey Mustafa,
You work is very close to the design file and the switch button works well 👏!
From the design point of view, the border-radius of the cards could be bigger, I believe it was 10px on the sketch file. The box-shadow is also lighter, box-shadow: 0px 20px 40px rgba(212, 210, 244, 50%); will looks better.
Your JS code looks nice and clean, however, you don't need to use else if since this.checked only have two values, either true or false. if and else would be good enough.
To make it even shorter
if (this.checked) {
prices[0].textContent = annualPrices[0];
prices[1].textContent = annualPrices[1];
prices[2].textContent = annualPrices[2];
} else {
prices[0].textContent = monthlyPrices[0];
prices[1].textContent = monthlyPrices[1];
prices[2].textContent = monthlyPrices[2];
}
Happy coding 🙌!
@EsraaGamal-22
Submitted
rate my design please, Any feedback and suggestions on how I can improve are very welcome!
@zuolizhu
Posted
Hi esraagamal,
Nice try on this project 👏! The responsive from mobile to desktop looks good!
However, I feel the color of the signup button is too bright. It is hard to see the text "sign up" on my screen. #C0DF33 would be a better color for that button 🤓.
I would also add a max-width: 1110px; to the container, so that it would not stretched out on larger size screen.
Happy coding 🙌!
@hwasabi
Submitted
I'm still learning about the grid property of CSS, which is better, bootstrap grip or CSS grid? Thanks in advance! Stay safe!
@zuolizhu
Posted
Hey Mycah,
Nice work on this project 👏
Using bootstrap grid or css grid, it really depends on the project 🤔.
If you really care about the page loading speed and the project size:
Using CSS grid.
Bootstrap is a big framework, it will increase the size of your page and slow down the page loading speed (however, you can use purgecss to remove the unused css https://github.com/FullHuman/purgecss).
For a large size multi pages project, using a css framework is totally fine 🙆♂️. But for a small size project (like this one), I would choose 👉 the plain css.
If the size doesn't matter:
Bootstrap is easier to learn and use, but harder to modify.
CSS grid is harder to understand at the beginning, but once you master it, it is more flexible.
Here is a document from MDN might help for learning css grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
And CSS grid cheat sheet: https://yoksel.github.io/grid-cheatsheet/
If the layout is just a one-column or one-row, then you don't even need grid. CSS flexbox will handle all for you😎.
Flex cheat sheet: https://yoksel.github.io/flex-cheatsheet/
Happy coding 🙌!
@mdillemuth
Submitted
What do you think of the tablet layout that I decided to add?
@zuolizhu
Posted
Hey Matthew,
I like the zig zag pattern you did on the tablet layout, very interesting 😆!
However, it feels a little bit off the center because of the pattern 🤔 (comparing the 4 cards stacked vertically on the mobile view and the three columns layout in the desktop view 👀).
I might do a plain 2x2 layout for the tablet. Or go for the zig zag pattern, but with a vertical guiding line crossing the center, something like this design: https://dribbble.com/shots/7287678-Milestone-Timeline-dashboard-UI-design
Anyway, you did a really nice work on this project🤩! Happy coding!🙌
@evannor
Submitted
I struggled getting media queries to work well within the Sass environment. Please let me know if you have any advice for refactoring or general setup.
@zuolizhu
Posted
Hi evannor,
Nice work on this project!
The media query works same on both css and sass environment, except in css, you have to wrap your code within the media query.
For example, in css, responsive for a component:
.box {
width: 50%;
}
@media (min-width: 600px) {
.box {
width: 100%;
}
}
But in sass, you can do either
@media (min-width: 600px) {
.box {
width: 100%;
}
}
or
.box {
@media (min-width: 600px) {
width: 100%;
}
}
They both works.
I personally like to write css from mobile size to desktop size. (AKA mobile first)
Then instead of writing @media (max-width), writing @media (min-width)
This approaching makes it easier to debug, since you are always thinking the changes from small size to bigger size.
I hope my poor English explained clearly 😂
And last but not least, here is a series videos I found that really useful for responsive css: https://www.youtube.com/playlist?list=PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4
Happy coding!🙌
@izzhariz
Submitted
How do i change the color for svg files? Especially logo, since the footer are always different.
@zuolizhu
Posted
You can open and edit the svg files in your code editor (e.g. vs code or sublime text). For your project, the color for logo shape is located in <path ... fill="#BDBAFA"/>. Change the fill="#BDBAFA" to fill="#FFFFFF" will get the white colored shape.
Another way you can do, is opening the svg file using sketch, figma, Adobe XD or illustrator, change it in the software, and save for another copy.
Hope these help.
Happy coding! 😆
@sagarkaurav
Submitted
I am not able to make Instagram card border with gradient color. If anyone knows how to do it please let me know.
@zuolizhu
Posted
Hey Sagar,
Good work on this solution!
border-color does not allow you to use gradient color, instead, you can use border-image 😎. e.g. border-image: linear-gradient(45deg, hsl(37, 97%, 70%) ,hsl(329, 70%, 58%)) 1;
Check out this documentation for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Me personally prefer use ::before or ::after for those small design elements (arrows, borders, icons etc, you don't have to think about the border as a border 🤯).
A gradient border would be something like this:
.card::before {
width: 100%;
height: 4px;
background: linear-gradient(45deg, hsl(37, 97%, 70%) ,hsl(329, 70%, 58%));
}
Hope this helped.
Happy coding 😆
@languagelars
Submitted
@zuolizhu
Posted
Hey Lars,
Nice work on this solution! The animation on the button hover is very cool 👏. To answer your questions:
I haven't see the shaky when I turn off backface-visibility: hidden; It might be caused by the cubic-bezier. You can watch how your cubic-bezier looks like in here👉 https://cubic-bezier.com/
There is nothing wrong to use position: absolute; once you remember to set the parent (card__pricing) to position relative. However, I would set top: 50%; transform: translateY(-50%); to the text 'per month' to make it centered vertically.
To use the flexbox, just set card__pricing display to flexbox, and depends on your flavor, you can set card__pricing align items to center, or set card__paragraph align-self to center.
Here is my favorite flexbox cheat sheet, https://yoksel.github.io/flex-cheatsheet/ hope these can help.
Happy coding!
@annesophie22
Submitted
Oh my god this one was really hard - and far from being perfect.
2 questions for you :
Any idea on how to add a bottom border effect on a link:hover, with the border color GRADIENT ? I tried border-image-source. It worked well on preview with VS Code live server, but now it is on Vercel, I got my link bordered on the 4 sides instead of bottom only...
Any genius who could explain me how to achieve the horizontal alignment of the hero section (the one with the smartphone mockups) ? I managed to get the desired design at 1440px, but whenever your screen is bigger then the hero container get bigger too and it's crap. On the other end, if I set up a fixed max-width to the hero section, then the mockup and the background image (which are 2 different files provided with the challenge) will get aligned with the rest of the website, so I do not get this overflow effect.
I tried to get it a bit more responsive instead of having it good only for 2 resolutions. It was a really tough challenge for me !
Thanks for your answer and happy coding
@zuolizhu
Posted
Hi Anne,
Good work on this solution 🥳. Its getting pretty close to perfect😝!
To answer your 2 questions:
There are two ways I would do for the border. Instead of using border property, I would use ::after or add another div inside the <li></li>, just under a link. And then set the background to gradient, and control the "border" thickness with height. To do so, I could add some animations to display or hide the border smoother.
By the way, the footer logo need to be white text. Otherwise it will hide in the background.
Happy coding!🙌
@sagarkaurav
Submitted
Feedback appreciated
@zuolizhu
Posted
Hey Sagar,
Nice usage of tailwindcss! I'm also a big fan of tailwind 😆.
I don't know if I miss-understood how the filter should work, I thought the more tags you clicked, the less results should be listed, isn't it 🤔? (e.g. if I clicked python and react tag, it should lists the jobs with both python and react tags)
The tags in the search-bar has no reaction when I clicked. But it works sometimes 👀.
@S4ND1X
Submitted
I would really like feedback on any problem you are able to see. I've been doing front end for a while now, maybe 6 months so I'm very new on this journey, I'm working already as a "Fullstack" developer, using MERN stack mainly. But I know there's a whole world to explore, so any suggestions are valid.
I had problem with background and it's position, so any tips on that would be great!
Please feel free to contact me: https://george-dev.me/
@zuolizhu
Posted
Hey Jorge,
I saw you put the background image in page-header class, instead of the body. I think that's why the screenshot won't catch the background part correctly.
You can also make the background-size: cover, and leave the background-position as default, so the background is responsive for higher resolution devices (like 4k resolution screen). background-size: contain will remain the size set in the .svg file, which won't shrink up and down for different screen size.
By the way, I like your personal website, the design is pretty cool😆
@tadomaitis
Submitted
How did you guys manage to make the open-on-click share bar? And how can one do that triangle tip on the bottom (web layout)?
Tips for better practices would be great, also.
@zuolizhu
Posted
open-on-click:
I used the JavaScript to control it, to break it down:
You need an event listener to that share button, when it clicked, change the class list of the tooltip.
Depends on your favor, I like to add "active" class to anything where I want to control display or not. In this case, default tooltip has nothing but only display:none; to it. When the "active" class applied, then I add all the additional css to it.
In css, it would like something below:
.tooltip { display: none; }
.tooltip.active { display: block; background-color: gray; /** all other css **/ }
For the little triangle, I used the css where I found in css trick: https://css-tricks.com/snippets/css/css-triangle/
This chunk of code works for me:
.arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; }
Hope these information helped!
