Skip to content
OverviewSolutions
44
Comments
25
Connor Z
@zuolizhu

All comments

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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!

  • Connor Z•5,115
    @zuolizhu

    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 😆!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!!

  • Connor Z•5,115
    @zuolizhu

    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! 😁

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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🙌!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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 🙌!

  • Connor Z•5,115
    @zuolizhu

    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!🙌

  • Connor Z•5,115
    @zuolizhu

    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!🙌

  • Connor Z•5,115
    @zuolizhu

    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! 😆