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! 😁
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 🙌!
The full features of my designed website is not showing on my live site. Please I need to know how I can resolve this.
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!
please where can i learn prop drilling effectively and how to use context api in react.
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 😆!
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 🎅)! 😁
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 🙌!
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! 😜
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 🙌!
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! 😁
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 🙌!!
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! 😁
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! 😁
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! 😁
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 🙌!
Hello,
Any feedback is welcome! Thank you.
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 🙌!
I'd appreciate any feedback. Many thanks!
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 🙌!
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?
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🙌!
Hey!
This was a fun challenge that I spiced up a little with some CSS animations from Animate.css.
Feedback definitely appreciated!
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 🙌!