Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    ApplePieGiraffeβ€’ 30,545

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

    Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    4
  • Owolabi Muktarβ€’ 20

    @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.

    Connor Zβ€’ 5,115

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

    0
  • Connor Zβ€’ 5,115

    @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 πŸ˜†!

    1
  • P
    ApplePieGiraffeβ€’ 30,545

    @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 πŸŽ…)! 😁

    Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    2
  • P
    ApplePieGiraffeβ€’ 30,545

    @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! 😜

    Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    1
  • P
    ApplePieGiraffeβ€’ 30,545

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

    Connor Zβ€’ 5,115

    @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 πŸ™Œ!!

    1
  • P
    ApplePieGiraffeβ€’ 30,545

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

    Connor Zβ€’ 5,115

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

    1
  • P
    ApplePieGiraffeβ€’ 30,545

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

    Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    3
  • Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    1
  • Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    2
  • Connor Zβ€’ 5,115

    @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πŸ™Œ!

    4
  • Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    4
  • Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    3
  • esraagamalβ€’ 600

    @EsraaGamal-22

    Submitted

    rate my design please, Any feedback and suggestions on how I can improve are very welcome!

    Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    2
  • Connor Zβ€’ 5,115

    @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 πŸ™Œ!

    4
  • Connor Zβ€’ 5,115

    @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!πŸ™Œ

    1
  • evannorβ€’ 70

    @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.

    Connor Zβ€’ 5,115

    @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!πŸ™Œ

    1
  • Izzβ€’ 40

    @izzhariz

    Submitted

    How do i change the color for svg files? Especially logo, since the footer are always different.

    Connor Zβ€’ 5,115

    @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! πŸ˜†

    1
  • Connor Zβ€’ 5,115

    @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 πŸ˜†

    2
  • Larsβ€’ 35

    @languagelars

    Submitted

    1. My button bounced on hover, was shaky so to speak. I think I was able to fix it with backface-visibility: hidden; is this the best approach to doing so?
    2. Should I have used Flexbox to position the 'price per month' next to the number? I've used position absolute.
    Connor Zβ€’ 5,115

    @zuolizhu

    Posted

    Hey Lars,

    Nice work on this solution! The animation on the button hover is very cool πŸ‘. To answer your questions:

    1. 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/

    2. 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!

    2
  • Anne-Sophieβ€’ 245

    @annesophie22

    Submitted

    Oh my god this one was really hard - and far from being perfect.

    2 questions for you :

    1. 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...

    2. 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

    Connor Zβ€’ 5,115

    @zuolizhu

    Posted

    Hi Anne,

    Good work on this solution πŸ₯³. Its getting pretty close to perfect😝!

    To answer your 2 questions:

    1. The border works properly on my browser, it only shows the bottom part. I just learned the new way to use border-image-source from your code πŸ˜†.

    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.

    1. To get the overflow effect, you can set the mockup image to position:absolute, and control the position with left and right properties.

    By the way, the footer logo need to be white text. Otherwise it will hide in the background.

    Happy coding!πŸ™Œ

    2
  • Connor Zβ€’ 5,115

    @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 πŸ‘€.

    2
  • @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/

    Connor Zβ€’ 5,115

    @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πŸ˜†

    2
  • Connor Zβ€’ 5,115

    @zuolizhu

    Posted

    open-on-click:

    I used the JavaScript to control it, to break it down:

    1. You need an event listener to that share button, when it clicked, change the class list of the tooltip.

    2. 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.

    3. 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!

    2