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
Log in with GitHub
OverviewSolutions29Comments39

All comments

  • Anna Leigh• 5,135

    @brasspetals

    Submitted

    Hi, everyone! It has definitely been a minute, but after a very long coding break I'm back! 👋 I'm excited to be submitting my first premium challenge solution as a Pro member. Having the design files has been a massive time saver! 😄

    Since it's been so long, I decided to stick with plain, old CSS and JS for this project - bit of a "warm up". 😅

    While the project was pretty straightforward, I did run into a rather odd bug. In Safari, I noticed the podcast svgs were blurry. After some testing, it seems that svgs that have a filter and are also in an img tag are blurred. If the filtered svgs are inline, they display just fine. The only suggestions I found online were to add -webkit-transform: translate3d(0,0,0) or -webkit-filter: blur(0px);. Unfortunately, neither worked in this case.

    Since the grey filter on the podcast svgs in the starter code didn't quite match the color in the design files anyway, I ended up editing the svg files directly to remove the filter and manually change the color to match the design. However, if anyone has a simpler solution to the Safari svg blurring issue, please let me know! Have any of you ever encountered it before?

    Pod Request Access Landing Page - CSS Animations, JS

    6

    Favourite Jome• 1,110

    @jomefavourite

    Posted

    Hello Anna!

    I really love how you take your time to make the layouts of each project you've done pixel-perfect, and also add really smooth animations. I wish I spent more time on animations 😅

    Welcome back to coding!

    1
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Hi Adeola, nice solution.

    The email validation is okay, using just HTML to validate is fine. I guess you could change the text alignment to left when you're on desktop view by adding a media query.

    0
  • Agata Liberska• 4,015

    @AgataLiberska

    Submitted

    This is my first independent React project so I would love some feedback on organisation, components etc.

    I added a delete button to shortened links as all of them are saved to local storage, as well as a Try it out link in the header that takes you to the form.

    Please play around with link shortening and let me know if you spot any visual or functional issues. Thanks! :)

    ps. Oh hello 100 html issues...

    React JS + Styled Components

    2

    Favourite Jome• 1,110

    @jomefavourite

    Posted

    Nicely done, Agata!

    0
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Hello Clinton, you did a very good job on your first challenge and here're my suggestions.

    • I noticed that the section element with the class name site has a div element with an image element with no src attribute link which produces an unnecessary space in the layout. I suggest removing that div element.

    • Also, I suggest applying a max-weight property to the paragraph p elements in other for the text not to be stretched out on bigger screens.

    • Also the images, should have a max-weight property applied. For example:

    .device_showcase .device {
    width: 75%;
    max-width: 1000px;
}
    • Finally, I'll suggest following a much better semantic layout structure. I noticed you didn't include the main element. Well, this is my personal structure though. Example below
    <header>...</header>
<main>...</main>
<footer>...</footer>
    0
  • Priyanka• 150

    @priyankalad

    Submitted

    After 4 days of struggle, I finally got the closest UI output Earlier I used px unit for elements, which then I replaced with rem to make them responsive. Although I have used px for border-radius.

    I would like some help for below points:

    1. As per the desktop screen design provided in the challenge, my UI is displaying the mobile element bigger in size.

    2. While setting the right bottom background div in mobile mode, first I used below css on element ".bgBottomRight", which was not setting the div properly position:absolute; bottom:0; right:0; After some research, I changed it to below code,which worked, but I couldn't understand the behaviour position:absolute top:100% right:0%

    3. Is it a good practice to use margin and padding with flexbox to achieve the responsive. I think, with margin and padding my code is not looking clean

    chat app css illustration using flexbox

    2

    Favourite Jome• 1,110

    @jomefavourite

    Posted

    Very good solution, it's very close to the design.

    1. Adding a max-width to the selector .mobile-flex-item would fix it from growing. You could try max-width: 350px;.

    • top: 100% simply means that the element should be at the bottom of the viewport.
    • bottom: 100% is the opposite, so the element would be at the top of the viewport.
    • right: 0% simply means there shouldn't be any white space left on the right side of the screen. So therefore the element should occupy that white space, that's why the element moves to the right.
    1. It depends, there isn't one right way of achieving a responsive design. I noticed you use percentages along with the values in your margin/padding to achieve the device. I'll try to avoid using percentages though, it could cause some issues on smaller issues but ah, you pull it off.

    Keep on coding, I hope my explanations were simple enough.

    0
  • Priyanka• 150

    @priyankalad

    Submitted

    After 4 days of struggle, I finally got the closest UI output Earlier I used px unit for elements, which then I replaced with rem to make them responsive. Although I have used px for border-radius.

    I would like some help for below points:

    1. As per the desktop screen design provided in the challenge, my UI is displaying the mobile element bigger in size.

    2. While setting the right bottom background div in mobile mode, first I used below css on element ".bgBottomRight", which was not setting the div properly position:absolute; bottom:0; right:0; After some research, I changed it to below code,which worked, but I couldn't understand the behaviour position:absolute top:100% right:0%

    3. Is it a good practice to use margin and padding with flexbox to achieve the responsive. I think, with margin and padding my code is not looking clean

    chat app css illustration using flexbox

    2

    Favourite Jome• 1,110

    @jomefavourite

    Posted

    Very good solution, it's very close to the design.

    1. Adding a max-width to the selector .mobile-flex-item would fix it from growing. You could try max-width: 350px;.

    • top: 100% simply means that the element should be at the bottom of the viewport.
    • bottom: 100% is the opposite, so the element would be at the top of the viewport.
    • right: 0% simply means there shouldn't be any white space left on the right side of the screen. So therefore the element should occupy that white space, that's why the element moves to the right.
    1. It depends, there isn't one right way of achieving a responsive design. I noticed you use percentages along with the values in your margin/padding to achieve the device. I'll try to avoid using percentages though, it could cause some issues on smaller issues but ah, you pull it off.

    Keep on coding, I hope my explanations were simple enough.

    0
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Great job, I like the work and here are my feedbacks

    • Making use of the % unit to determine the overall width, using margin and padding of each section, without including max-width property will make the layout to keep growing on large screens.

    • Adding a max-width property to the texts on the page will be very helpful, so as to stop the texts from growing at a certain point.

    • The model with the selector .access, I noticed it isn't always centered so I made some changes.

    .access {
    padding: 5% 5%;
    box-shadow: 3px 3px hsl(0deg 0% 5%);
    height: auto;
    width: 80%;
    max-width: 700px;
    /* margin: -10% 21%; */
    background-color: hsl(217, 28%, 15%);
    position: absolute;
    margin-top: -110px;
    left: 50%;
    transform: translateX(-50%);
}

    Also on the media query

    @media (min-width: 320px) and (max-width: 500px)
.access {
    /* margin: -2% 5%; */
    padding: 1.5rem;
    width: 90%;
}

    Lastly, I'll like to talk about the percentage unit you used frequently on margin and padding, it might cause issues as the viewport increases so I'll advise you make use of other responsive units like em, rem.

    Then on the width of each sections, you can use percentages. Well, it varies and depends on the use case.

    Here's an article I wrote that might be helpful.

    Also, I'll strongly advise you take this course Conquering Responsive Layouts by Kevin Powell.

    1
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    100 % 🎉🎉 I love the animations you added. I've got to try out this challenge too

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

    Room Homepage with CSS Transitions and JS (GSAP) Animations

    9

    Favourite Jome• 1,110

    @jomefavourite

    Posted

    Wow, the animations are just amazing 🤩

    1
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Great work. I remember battling with this same challenge so you can checkout my solution here.

    It's not also perfect though but hope it helps

    0
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Nice solution but I noticed you used padding: 60px to surround each section.

    The only problem with this is that on a bigger screen it fails, I mean the layout looks weird. So I'll suggest using something like this:

    .container {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
}

    Using those properties will ensure the width is always 90% until it gets to the max-width

    0
  • 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 🎅)! 😁

    Todo App With Christmas Theme, Local Storage | Svelte, Sortable.js

    #svelte

    11

    Favourite Jome• 1,110

    @jomefavourite

    Posted

    Woo your solution is really amazing 🤩

    I've been battling with the same challenge for a week now using React.

    1
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Hello @OmoniyiTim, nicely done 👍

    But here are my thoughts:

    • You didn't include a max-width, so it too stretched out.
    • You probably forgot about the font-family (I do too 😁)

    Here's my solution, you could go through the code.

    P.S : I'm not saying my approach is the best but from what you did, you need more work on responsiveness. Just my thoughts

    0
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Hello

    I noticed you did a torn of projects today. My feedback for the project will be at this point padding having % isn't good mostly on a large screen.

    @media (min-width: 1440px)
.showcase {
    width: 100%;
    /* padding-top: 7%; */
}

    Having a fixed height also causing some issues

    @media (min-width: 1000px)
.header {
    background: url(./images/bg-hero-desktop.svg) no-repeat center center/cover;
    padding-top: 3rem;
    width: 100%;
    /* height: 550px; */
}

    You could use mine as reference here

    1
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    It isn't mobile friendly 🤔

    0
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Hi, you could try out details tag to achieve this task. That what I did, here is the my solution

    1
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Nicely done, desktop view it looks amazing but it isn't mobile friendly. You should probably work on that 👌

    0
  • Tanya• 30

    @Tetiana-T

    Submitted

    Hi, everybody!

    This is my first project which I have done on my own. Feel free to add your feedback on the code.

    Social proof section

    1

    Favourite Jome• 1,110

    @jomefavourite

    Posted

    Hi, I noticed you started with a desktop approach

    .top-part {
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
}

    The flex-flow: wrap isn't helpful with the mobile view. I'll say start your designs from the mobile view before the desktop view.

    Well, that's my observation

    0
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    Looks pretty good to me 👌

    1
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    You did a great job 👌. Looks perfect enough to me

    0
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    On mobile view, rating selector didn't have width: 100% so it isn't taking up the full width.

    As for the rest, pretty awesome 👍

    0
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    I noticed you use % a lot. It has it use cases but it can really be a problem when it comes to responsiveness.

    Probably, the main section could be replaced with

    main {
  margin: auto auto 30px auto;
  padding: 0 10% 0 10%;
}

// try

.container {
  width: 80%
  max-width: 1200px;
  margin: auto;
}

    That'll be a responsive approach.

    You could see how I did it here . But it isn't perfect too.

    1
  • Favourite Jome• 1,110

    @jomefavourite

    Posted

    The remainder section is kinda off. Probably because it was its own div. Probably if it's in the right section then positioned absolute and try playing with it 😁.

    I did mine awhile ago, it isn't perfect too but you can check it out to pick some things here

    0