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
OverviewSolutions16Comments23

All comments

  • Sarah Arvin• 80

    @Sarah-C-Arvin

    Submitted

    Hey all! I recently finished a course that included HTML/CSS/CSS flexbox, and JS. It's been a while since I've done anything with just HTML and CSS, so I'm admittedly a little rusty and trying to get back in the habit of using it! Any feedback on this challenge would be very appreciated, I know there's likely some spacing/centering issues with my code. Thanks!

    Update: Thanks for everyone's feedback so far! I tweaked a few things and improved my design a bit, I would love to know what y'all think! For some reason, my GH Page is not updating with the changes I made. I did try to push the changes through to the page branch. Has anyone else had this happen?

    QR-code challenge using flexbox

    3

    karenefereyan• 375

    @karenefereyan

    Posted

    HI Sarah. I love the simplicity of your approach. Beautiful. Here's something I just wanted to point out.

    1. It is always a good idea to stick to separation of concerns in web development. That would mean to let html handle everything structure, while css handles everything styling. It might be negligible for this particular projects but in bigger projects, letting each pillar(HTML || CSS || JS) handle their own concerns will help with organization.

    Keep going!!!!

    Marked as helpful

    1
  • karenefereyan• 375

    @karenefereyan

    Submitted

    Hey everyone. I've been stuck on this challenge for almost two days now.

    I decided to just post how far I've gone and ask for help. Here are my main challenges or things I struggled with:

    1. There was a lot of positioning necessary to get the mobile pattern background, the woman and the box in place. I use ::after and ::before in several places and I think I understand it. It was a lot easier to design for desktop first. Making it responsive on mobile gave me the major headache.

    2. I'm not sure why, but for a linear gradient background, it didn't fit the entire width of the screen until i made the height a 100vh. Is that a normal phenomenon with linear gradient backgrounds?

    3. I would love feedback on what I could have done to make this code more efficient. Also, kindly refer me to any links, books, videos that helped you understand positioning. Thanks

    FAQ ACCORDION CARD WITH HTML | CSS | JAVASCRIPT

    2

    karenefereyan• 375

    @karenefereyan

    Posted

    This detailed feedback is so helpful. Thanks Agata. I always felt comfortable designing for mobile screens too.

    I think I'll have to take another shot at this going step by step. I've watched that video from webdev simplified when I started this challenge but I'll have to do that again.

    Could you please explain what you mean by you couldn't toggle using your keyboard? I'm still trying to make my solutions as accessible as possible

    0
  • karenefereyan• 375

    @karenefereyan

    Posted

    Hey Anisha this is pretty. Its responsive as well. You might wanna increase the width of the individual cards on smaller screens or reduce the left padding. Nice work once more. Keep coding

    0
  • Toms Stals• 80

    @ph4ntom5

    Submitted

    It was my first project using React as I am still learning it. Had some hiccups and looking for tips on fixing:

    • Hero Mockup image to hover on top of the section instead of being cropped.
    • Creating some animation for mobile navigation(also switching hamburger icon to close icon)

    Thanks for the feedback! Toms

    Easy Bank Landing Page using React and SaSS

    1

    karenefereyan• 375

    @karenefereyan

    Posted

    Hey, toms, beautiful work. First, you might wanna consider fixing the HTML validation issues. You shouldn't have a SRC attribute in a button. As regards changing the hamburger to close, you could simply just use the transform property. But I think they provide a different close image, so maybe at the point where you're checking whether the mobile menu is shown or not, you could toggle the close button which you gave a close-menu class to. I'm still a beginner at react so my answer is subject to corrections.

    Overall, superb work. Keep coding😶😶😶😶

    0
  • Mohamed• 325

    @MohamedBehhar

    Submitted

    Hy again, Hope you all having a good day :D here's my solution for this project, I really didn't like the footer on the original design so I made some changes to make it more beautiful, I also use "white smoke" for the body background instead of using white. My question: Should I use @media queries on the bottom for all elements, or should I use several @media for each one, which way it's more professional?

    Responsive landing page using CSS flexbox and grid

    3

    karenefereyan• 375

    @karenefereyan

    Posted

    Hey soqk, lovely work here. On mobile devices, the header could use a little more spacing to distinguish it from the nav. I'd say the same for the cards and footer too. Adequate spacing enhances legibility. Great work. Keep coding. Cheers!!! 😉😉😉😉

    0
  • Usama• 170

    @errijahi

    Submitted

    Yo everyone, any feedback for this challenge.

    HTML CSS

    2

    karenefereyan• 375

    @karenefereyan

    Posted

    Hey. Nice work here. You could make the border radius a little more rounded. A value of 30PX usually does the trick. Also the paddings before and after the Learn more links seem a bit too much

    0
  • Yohan Reyes• 300

    @Yohanr19

    Submitted

    I could not find a way to make the woman image crop out at the end of the card background, i would gladly take any help. Also i am still struggling to make it look good on devices whit lower resolution.

    Faq Accordion Card/ HTML5/ CSS3/JAVASCRIPT

    3

    karenefereyan• 375

    @karenefereyan

    Posted

    I'm currently working on this one too. Its been tough especially positioning

    0
  • karenefereyan• 375

    @karenefereyan

    Posted

    It looks great on mobile. Could take up more width on desktop though. Keep on coding! Happy coding!

    0
  • karenefereyan• 375

    @karenefereyan

    Posted

    This is super neat, Artir. I love the way you structured your code so simply. Lovely one. You might want to take a look at the HTML issues and update as needed. Also I think you should increase the paddings on the left and right for the buttons as the learn more stacks on top instead of side by side on desktop screen..

    Lastly, its always difficult finding out when to use anchor tags or buttons. Typically though, a link should be used when we want users to navigate to a different section of the site whether on the current page or not. In the case of a button though, it's used majorly when its functionality is dependent on JavaScript code or if the button is within a form, in which case the type attribute determines the default event. A good example of where a button should be used would be if a user wants to crafts an account, in which case, he would have filled a form.

    In this case, what should happen ideally is that when the user clicks the learn more link, it takes him/her to a different section. You might refer to this article, https://css-tricks.com/a-complete-guide-to-links-and-buttons/.

    But overall very pretty. keep coding

    Marked as helpful

    1
  • karenefereyan• 375

    @karenefereyan

    Posted

    Beautiful one! Take a look at the accessibility issues and update it. Well done. Keep on coding!

    0
  • Christian Patrick Nebab• 255

    @Dnghckr16

    Submitted

    any feedback for me guys.. if there's a problem in my code or output. And Any improvement for me I'm gonna happy to know that . T.Y.

    HTML & CSS only

    1

    karenefereyan• 375

    @karenefereyan

    Posted

    Hey Christian. Neither the Livelink nor the link to your code on github are loading. I'm not sure why.

    0
  • P
    tediko• 6,530

    @tediko

    Submitted

    Hello👋!

    It's been a while since I put on the last challenge. I had to take a break but I hope my code isn't rusty after this time. The challenge was fun and I decided to have a little fun with additional options such as:

    • Todos and theme are stored in Local Storage.
    • Drag and drop to reorder items using library Sortable.js. Reordered items are also stored in Local Storage.
    • When the list is empty, or there is nothing to display in the "Completed" tab, I was missing the information that there was nothing to display. I added it.
    • I created a toast notification pop up in various events. (Adding todo / incorrectly entered input / Removing todo / clearing all.)

    No specific questions here but any additional feedback will be appreciated!

    Thanks! 😁

    Todo App using Sortable.js, Toasts notifications, Local Storage, Saas.

    6

    karenefereyan• 375

    @karenefereyan

    Posted

    Lovely one. I don't seem to be able to complete a task. Im thinking that clicking on a to do item should complete It. But it doesn't seem to work.

    1
  • Hyunji Kim• 155

    @creativehkim

    Submitted

    Thank you for checking out my first landing page project using React! It wasn't easy but I had a lot of fun :) If you have any feedback, please kindly leave a comment. Thank you again and happy coding!

    Manage landing page using ReactJS

    2

    karenefereyan• 375

    @karenefereyan

    Posted

    Nice work Hyunji. Just a few notes:

    1. Pricing Link in the mobile nav seems cut out of the container. Could be the paddings. Check it out.
    2. There's horizontal scrolling on the page. I'm not sure why. Overall its cute. Happy coding😊😊😊
    0
  • karenefereyan• 375

    @karenefereyan

    Posted

    It looks good. Happy coding😀😀😀

    1
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    Hey, there!

    This is my first Frontend Mentor challenge submission.

    I completed this challenge using HTML and CSS and added a CSS animation or two to make this small component a little cooler! :)

    Simple component with HTML and CSS

    3

    karenefereyan• 375

    @karenefereyan

    Posted

    I did it. Made it all the way to your first project here. You're the boss😊😊😊😊

    1
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 😁

    This was a fun project in which I tried my hand at implementing fluid typography (i.e., the size of the text grows larger and smaller with the viewport width) with the CSS function clamp() and included some cool animations from, of course—Animate.css.

    It's not perfect—but I'm learning a lot and it's great fun! 😆

    Feedback is welcome and much appreciated! 👍

    Huddle Landing Page With Fluid Typography and CSS Animations

    2

    karenefereyan• 375

    @karenefereyan

    Posted

    Nothing in this world has confused me.more than clamp() 😫😫😫😫

    1
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 👋

    This was a very fun challenge from which I learned to carefully think about how I markup things in HTML and position them in CSS. 🤔

    I borrowed some animations from Animate.css and played around with the animation-duration property to create a messaging animation in the phone (which I really think adds some life to the page). 🎉

    I'm also rather pleased that my code didn't end up too messy or disorganized after attempting a CSS illustration like this. 😉

    As always, feedback is on both my solution and my code is both welcome and greatly appreciated! 👍

    Happy coding! 😄

    Chat App CSS Illustration With Messaging Animation

    3

    karenefereyan• 375

    @karenefereyan

    Posted

    This Animation looks nice. I should practice adding animations more to my projects

    1
  • 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! 😜

    Landing Page With CSS Animations, Vanilla JS Effects

    5

    karenefereyan• 375

    @karenefereyan

    Posted

    I live for these animations. Gosh!!!!

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

    Landing Page With Intro Animation | Svelte, GSAP

    7

    karenefereyan• 375

    @karenefereyan

    Posted

    I really wanna flex my creative muscles especially in animations. That load animation is so cute. How did you achieve it?

    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

    karenefereyan• 375

    @karenefereyan

    Posted

    Superb work. Was just wondering, If I attempt to sign up for the free, pro or ultimate plans by clicking their respective buttons, shouldn't the sign up form automatically update to show the chosen plan? Cos right now no matter what button I click, the free plan is chosen by default

    2
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    Hello, everybody! 👋

    This is my 30th solution on Frontend Mentor! 🎉 (And my first Guru level challenge submission.) 😎 This was definitely a tricky challenge, but I got to learn and try out many new things! 😀

    I used React and Next.js to build the site, styled-components to style it, Formik (and Yup) to handle the forms in this challenge, and Framer Motion to add some page transitions and animations. 😄

    There were quite a few things I had to learn in order to complete this challenge, and I'm not sure if I did them all correctly. 😥 Looking back, there are a few things I wish I would have differently, but it's a learning experience! 🙂

    If anyone could share some resources on how to manage and organize larger projects like this, I'd really appreciate it! 👍 Lots of resources that I find only focus on specific things (like creating a popup or using certain features of a tool) and not so much how to approach and think about an entire app. 🙃

    If you'd like to learn more about my project, see the README in my Git repo (where I also list a few quirks in my solution).

    Feedback welcome and appreciated! 😊

    Happy coding! 😁

    BTW, click on the sidebar avatar for the attribution.

    Invoice App | React, Next.js, styled-components, Formik, Framer Motion

    #framer-motion#react#styled-components#next

    16

    karenefereyan• 375

    @karenefereyan

    Posted

    I'm stuck on your projects. Amazing stuff. I love the way you document them on github. Gave me some ideas. I've been curious about the dark theme switch thingy. Will take time to study how you achieved the functionality. Maybe you could apply margins to the filter options to make it more breathable and easily distinguishable

    1
  • karenefereyan• 375

    @karenefereyan

    Posted

    I love it

    1
  • karenefereyan• 375

    @karenefereyan

    Posted

    Hi Sara. This looks nice. You might want to take a look at the HTML and accessibility issues. They all have to do with specifying an alt tag for screen readers. Also giving a bit more space between each paragraph to make it more breathable. I love the way you documented the project on github. Gave me some ideas. Thanks

    0