Skip to content
OverviewSolutions
16
Comments
23
karenefereyan
@karenefereyan

All comments

  • Sarah Arvin•80
    @Sarah-C-ArvinSubmitted almost 3 years ago

    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
    @karenefereyanPosted almost 3 years ago

    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
    @karenefereyanSubmitted over 3 years ago

    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
    @karenefereyanPosted over 3 years ago

    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
    @karenefereyanPosted over 3 years ago

    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
    @ph4ntom5Submitted over 3 years ago

    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
    @karenefereyanPosted over 3 years ago

    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
    @MohamedBehharSubmitted over 3 years ago

    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
    @karenefereyanPosted over 3 years ago

    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
    @errijahiSubmitted over 3 years ago

    Yo everyone, any feedback for this challenge.

    HTML CSS

    2
    karenefereyan•375
    @karenefereyanPosted over 3 years ago

    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
    @Yohanr19Submitted over 3 years ago

    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
    @karenefereyanPosted over 3 years ago

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

    0
  • karenefereyan•375
    @karenefereyanPosted over 3 years ago

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

    0
  • karenefereyan•375
    @karenefereyanPosted over 3 years ago

    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
    @karenefereyanPosted over 3 years ago

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

    0
  • Christian Patrick Nebab•255
    @Dnghckr16Submitted over 3 years ago

    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
    @karenefereyanPosted over 3 years ago

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

    0
  • tediko•6,680
    @tedikoSubmitted over 3 years ago

    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
    @karenefereyanPosted over 3 years ago

    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