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
OverviewSolutions3Comments22

All comments

  • Szymon Rojek• 4,540

    @SzymonRojek

    Submitted

    Hi everyone! :D,

    Finally, I can publish this challenge. I concluded that every project, even small, will teach something. First time I was working with the TailwindCss framework and gulp.

    ** => Please, let me know if you have got any suggestions, especially about HTML structure and accessibility.**

    A short explanation:

    • I have chosen a button but probably the radio-button or checkbox could be a better choice (the design of it could be nicer);
    • I didn't do the border-top gradient because Tailwind doesn't have very good support with it yet (I still learn how to create different plugins);
    • manually switching the mode between light/dark (smooth transition). I want to detect if the user has requested the mode: light or dark (prefers-color-scheme) => in this case I have decided to work with the sessionStorage instead of the localStorage because the main goal was to come back to the user's preferences (prefers-color-scheme) which in the meantime may have changed the theme in the general settings.
    • added small animation updating the total number (the main idea is copied from the web developer but I've changed a bit it's content to get more readable code - in the meantime I want to create my version of it);
    • footer displays on preview site;
    • deploy the project to Github Pages with GitHub Actions.

    Thank you so much. Ps. don't forget to upvote my project if you like it.

    Greetings :D

    TailwindCss&Gulp switcherMode&prefersColorScheme&sessionStorage

    5

    Al Nahian• 775

    @alnahian2003

    Posted

    Great Job! Dear, Szymon Rojek

    You did excellent and brilliant work on completing this challenge. I'm really glad to see your project and I already checked every functionality that you've implemented in this project and I also inspected your code.

    Here is my honest feedback:-

    • I really loved the Counter Animation on the numbers of the dashboard.

    • When I was checking your JS Source code, I've found that you have added a mindblowing functionality to Auto Detect the User's Device Default Theme which is really super cool! Hats off to you for this great idea!!!

    • I actually liked the interaction with Session Storage in this project. You did this thing in a very clever way.

    • Finally, I liked the Responsiveness of the entire project on any viewport.

    That's all.

    Happy Coding, mate!

    3
  • Al Nahian• 775

    @alnahian2003

    Posted

    Ops! Hey Raunak, Could you please check your "Vercel" files again? Maybe there's something wrong with your submission!

    But if you have fixed the problem already, then try regenerating the screenshot!

    Best Regards.

    1
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hello There, Andro!

    It's really good to see your project here, and your solution looks 90% perfect! Feel free to check the Accessibility and HTML issues so that you can fix them and make your project totally perfect!

    I really appreciate your approach!

    Happy Coding!

    Al Nahian

    2
  • Al Nahian• 775

    @alnahian2003

    Posted

    But yes, try to fix the HTML Issues show above in the Report Panel.

    Good Day!

    0
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey Dear, Adarsh!

    I'm really happy to see this excellent solution. I really appreciate that. You know what, I'm in love with this Rock-Paper-Scissor game and maybe I can play this game all day long. Go Ahead, Keep it up! You got my ♥ on this solution.

    Happy Coding

    3
  • Coder• 270

    @qb-rivkyb

    Submitted

    Hi, This is a website I worked on with a partner for a few weeks. I got lots of practice with making responsive sites and using updated technologies like NextJS. On the contact page we used the Mapbox API to make the map responsive. Any comments or feedback appreciated! 😁

    Multi page arch-studio site written with NextJS and emotion-css

    1

    Al Nahian• 775

    @alnahian2003

    Posted

    Excellent! This is what we call a Perfect Web Design :) Really you did an amazing job on completing this challenge. But, what if you add a little bit of overlay effect on the intro section and a little bit smooth scroll transition?

    Give your html a simple CSS rule,

    html{
   scroll-behavior: smooth;
}

    Thank You!

    Happy Coding

    1
  • Al Nahian• 775

    @alnahian2003

    Posted

    WOW!

    Anish, you did an excellent job on completing this challenge. The project is so fun that I can play all day long :P

    Good Job. Keep Going!

    Happy Coding!

    1
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey there, Indra!

    To be honest, your project is really amazing and looks very professional :) Good thing is that your project is totally responsive!

    But try to fix the ACCESSIBILITY ISSUES as soon as possible and give cursor: pointer on hovering the cards.

    Happy Coding! Best Wishes for your next challenges

    0
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hello Rafet!

    Excellent Work! Really Excellent Work!

    It looks great, totally pixel perfect, and very responsive. I love the hover effect on the button, but what about adding a little bit of transition there to make the hover effect more smooth? You can add a few transitions, like transitions: .3s ease;

    Don't Forget to Upvote any helpful comment on this platform!

    Happy Coding. Best Wishes!

    1
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey Jeremey!

    It's really good to see your very first project and your solution very good. Its looks great and very responsive.

    But I have a few suggestions here:

    • Take a close look at the design provided in the starter file. It's really a good idea to code the project and make it looks like as same as the design.
    • You can vertically and horizontally align the entire content center.
    • Try to add some drop/box-shadow to make the project more realistic.

    That's it. You did a really good job on completing this challenge as this is your very first project.

    Don't Forget to Upvote any helpful comment!

    Happy Coding. Good Luck!

    3
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey, Looks good & nice. But would you mind to decrease the opacity of the box-shadow? It looks a little bit heavy.

    Keep going <3

    Happy Coding :)

    2
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey David Ouma

    Your project looks fine and nice, and it's really good to see that you've used HTML BEM but you could do something more to make the project more accurate.

    At first,

    • In the intro/hero section, you could imagine the entire section like a single row with two different columns, and the coulmns width will be 50%-50% of the width of the container that's containing the columns.
    • Make the intro image/hero image a little bit larger as same as the design provided in the starter file.

    That's It!

    Happy Coding :)

    Don't forget to UpVote any comment that you've found helpful in frontendmentor.io

    2
  • MD Salahuddin• 150

    @mdsalahuddin2001

    Submitted

    Hey Gyz, I have completed fylo-dark-theme challenge . I am hunker after your valuable feedback. Please suggest me where I need to improve. Your feedback is like a gem to me.

    Fylo Dark Theme

    3

    Al Nahian• 775

    @alnahian2003

    Posted

    Hey Dear, Salahuddin!

    This is another good creation of you and you're doing great. Keep Doing Your Good Works <3

    Happy Coding

    3
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey Kenard!

    Wow, you did an amazing and excellent job on completing this challenge. The project is perfectly soothing with my viewport and it really looks good in the Mobile Devices.

    Another improvement suggestion for you -

    • Try to write your HTML using the Semantic Elements. I've inspected your code and I found that you've used the <section></section> tag and that's also a semantic element, but try using them more and more and in an advanced way. Like, try to define your site header using the semantic <header></header> and put all the header contents inside it.

    again, try to use <nav></nav> ,<main></main>, <footer></footer> tags and you can specify them using the class and id attributes.

    (!!! Check your HTML Issues and the Accessibility Issues and try to solve them)

    Don't forget to Upvote any of the comments that you've found helpful.

    Happy Coding !

    Al Nahian

    2
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hi there, Mayank!

    Excellent project and good initiative :) The live site looks perfect and responsive.

    But what about adding a little bit box-shadow to make the testimonial grids more realistic and good?

    Uh, also you can make a little bit more complex layout for Tablet devices than mobile devices. Because they look very classy in the Tablet view.

    Don't forget to upvote any comment that you've found helpful :)

    Happy Coding

    Best Regards

    Al Nahian

    1
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    Yeah, kind-of-almost pixel-perfect—some of the text is slightly misaligned and the progress bar in the hero image is rotated the opposite way in my solution, for some reason. 😅

    Anyway, this was such a beautiful design and I learned a lot from creating it! I ended up having to use Sapper and to learn about things like routing and server-side rendering—which spun around my head a little, but I'm hanging in there! 😄

    I added some pretty micro-interactions to the buttons and the form as an extra touch! 😉

    Of course, feedback is both welcome and appreciated. 😊

    And as usual, keep on coding (and happy coding, too)! 😁

    BTW, one quirk I'm aware of is that the countdown timer resets when you go back-and-forth between the home and signup pages.

    (Almost) Pixel-perfect Landing Page With Svelte, Sapper

    6

    Al Nahian• 775

    @alnahian2003

    Posted

    Hey, Apple Pie Giraffe!

    WOW !!! You did an excellent job and your submitted project looks totally perfect on my screen! I also checked the responsiveness and it's really cool.

    You know what, I'm thinking like, I should take the same challenge and I should follow your style :D

    You got my ♥ on this project :)

    Happy Coding, Mate!

    3
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey Mesut!

    Your project looks fine. But here are some suggestions for you:

    • Try to use margin: 0 auto; while you are giving the wrapper or the entire container a specific width so that all the content inside of it doesn't break in widescreen.

    • Try to write HTML using HTML Semantic Elements. It will improve the accessibility of your HTML webpage to the user.

    • Try to add a submit button in your forms.

    That's it! Happy Coding

    Al Nahian

    1
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey, War Baddy!

    Your project looks good. But here are some suggestions and improvement solutions:

    • You haven't given a background overlay in the Hero Section. Make sure the texts on the Hero section always looks good in a high contrast background image.
    • Try to code the project as like as the design source and try to build the project 100% pixel perfect.
    • Put some more attention on making the project responsive.
    • Try to add a mobile menu only for mobile devices.

    Don't forget to upvote my comment if you have found it helpful. Thank You! Happy Coding

    Al Nahian

    1
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey Al Imran Your project looks perfect and the responsiveness is also working fine. But I have the same suggestion as @abhik-b did. Always try to use max-width so that your site couldn't break in different breakpoints or viewports.

    Happy Coding Good Luck!

    1
  • Al Nahian• 775

    @alnahian2003

    Posted

    Hey Gorkem! You did an excellent job on completing this challenge and your completed project looks very amazing.

    You asked about how you can add a gradient border color, right? Alright, you can do this simply by adding an extra span just above the social card's div and give the gradient as a background color in that span. It's a solution. But if you want more details about the gradient border using CSS, then you can read this article on CSS Trick

    Don't forget to upvote my comment if you found it helpful. Happy Coding!

    -(alnahian2003)

    2
  • Al Nahian• 775

    @alnahian2003

    Posted

    Amazing Work Mr. Salahuddin! The challenge seems totally pixel perfect and nice. Keep Going!

    2
  • Jesús Alejandro Atao• 970

    @JesusAtao96

    Submitted

    Hi all 👋

    I decided to do this challenge with CSS Grid, Flexbox, BEM methodology and animations.

    The theme will be saved in the localstorage for the next load.

    Any feedback is appreciated.

    Happy coding 😊.

    Cool theme switcher and animations

    2

    Al Nahian• 775

    @alnahian2003

    Posted

    Hey, Jesús Alejandro! Excellent work on this challenge and you did an amazing job here! I really love the smooth transition between dark theme to light theme on the website. I also checked the responsiveness of your project, which seems perfectly soothing with my viewport. I haven't noticed any local storage functions there, but that's really a good idea to integrate with local storage while you're switching themes on your website.

    Great Job! Great Effort! Wishing you good luck. Happy Coding

    - Al Nahian (alnahian2003)

    2