Skip to content
OverviewSolutions
15
Comments
38

Sarah

@AutumnsCodeOsnabrueck, Germany580 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Eli Silk•960
    @elisilk
    What are you most proud of, and what would you do differently next time?

    There was a lot in this challenge with layout, inputs/forms, and JavaScript processing. I enjoyed all the parts. There are definitely a few things I'd like to improve, but I feel like this initial solution gets much of the way there, including the ability to switch between light and dark themes. I didn't yet focus on the requirement of "Navigate the entire app only using their keyboard", so will work on that in my improved version.

    Frontend quiz app with fluid typography & spacing + light/dark theme

    1
    Sarah•580
    @AutumnsCode

    Thats a good solution.

    I would like it even better if you don't have to press a second time submit to get to the next question.

  • Sarah•580
    @AutumnsCode

    Wow this is a great solution. Its really great(I think).

    One small suggestion I have for you, to use comments in your code. Made it easier to read :)

    Marked as helpful
  • BozJR•260
    @BozJR
    What are you most proud of, and what would you do differently next time?

    Most proud that I didn't need much help with this one (maybe cause its similar to the first project) but feel like I am slowly starting to get the hang of CSS and HTML. Just need to practise practise and more practise.

    What challenges did you encounter, and how did you overcome them?

    My only real challange was trying to get the profile picture and the profile picture name at the bottom of the card to sit side by side.

    What specific areas of your project would you like help with?

    Just need some hints and tips on how to get two different elements to sit side by side.

    Basic Blog Preview Card using simple HTML5 and CSS.

    1
    Sarah•580
    @AutumnsCode

    Hello,

    well done for completing this challenge.

    I am happy to provide to give you some feedback:

    • the h1 element should be the first heading in your page. I would suggest to use a paragraph element with a class instead to style the element.
    • the next paragrapgh should have a class since its the text below your h1-element is actually the main text of the challenge.
    • I really enjoy that you include a hover effect on your h1-element. To made it even better, it would be great if you could wrap inside a anchor-element.
    • The profile image is too large. Inside your css, you could add a width to reduce it.
    • Almost every html-element has default styling. It can be really difficult to deal with them while styling like img. If I see an image in one of my project, I am always add reset to take away the default one. Here is the one for image, picture
    img, picture {
 max-width: 100%;
display: block
}

    I hope those tips and tricks will be helpful Best regards Sarah

    Marked as helpful
  • Katorazua•10
    @Katorazua
    What are you most proud of, and what would you do differently next time?

    I proud and happy for myself, because i find it easy wen it comes to HTML & CSS for the frontend, i will love to learn more and advance in the frontend in JS, JS libraries and fraimworks and i will be happy to be a MERN stack developer

    What challenges did you encounter, and how did you overcome them?

    The challenges i did encountered was finding a suitable name for my attributes and a little bit messy when trying to style the nav and links

    What specific areas of your project would you like help with?

    For now i don't have any specific area i will need help from,in the project. But i will love to learn, study and know more about JS, JS fraimworks and Library, and Node.js

    Repository Landing Page Using HTML & CSS

    1
    Sarah•580
    @AutumnsCode

    Hi

    unfortunately, the live page isn't working the way it should be, so I can't say anything yet regarding how it looks live. However, I didn't stop me to check out your code.

    I believe you have a good understanding from HTML. Your css looks great too. The one thing I would change is that you don't need to wrap your mobile view inside a media queries. It's a little bit of a overkill. Another little small thing is that you used the wrong font. If you want to work with @font-face to import your font-family, I would recommand Kevin Powell. He has a great video how to import font into your project.

    You can be really proud of your work! Best regards, Sarah

  • Ivano•90
    @IvanoCro
    What are you most proud of, and what would you do differently next time?

    I'm proud of the combination of Flexbox, Grid and the final appearance.

    What challenges did you encounter, and how did you overcome them?

    I encountered a challenge with JavaScript (to open a popup with options after pressing the share button) — I resolved it with the help of W3Schools. I also faced a problem with the appearance of the popup for share options; I made a simple shape, but it still doesn't match the provided design.

    What specific areas of your project would you like help with?

    I would like feedback.

    Article preview component---made with combination of Flexbox and Grid

    1
    Sarah•580
    @AutumnsCode

    Hi Ivano, well done for completing. This challenge isn't the easiest one to pick for beginner. There are few area I am suggest you might look into more.

    • Try to use less divs-element and maybe use semantic HTML instead. It helps to put a some structure in the code for not only us as developer but also for accessibitly.
    • Beside colors for hsl and co. there is hardly any use for % in your styling.
    • A common practice nowadays are the use of css custom variable.It will help you to main like all the color property in one place
    • To archive the mobile view is to add flex-direction: column in the element with the class of .card. and later change it back to row
  • Martynas•110
    @Marcius55
    What specific areas of your project would you like help with?

    Don't know how to apply 2 fonts to the project. Feedback is appreciated!!

    product-preview-card-component-main

    2
    Sarah•580
    @AutumnsCode

    So i checked the code again. Maybe it does it because of setting your font-weight this way. font-weight: 500, 700; at your body and some other place. Instead I would choose one font-weight, for your body I would go with the 500

View more comments