Skip to content
OverviewSolutions
15
Comments
39
Sarah
@AutumnsCode

All comments

  • P
    Eli Silk•880
    @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

  • Jolijn Rosendaal•340
    @Jolijn0101
    What are you most proud of, and what would you do differently next time?

    I'am very happy that this FAQ-accordion can be navigated with the keyboard as well. This is also the first time I made a custom cursor for pointer events. I hope I can make better website's in de future that could be easy to use for everyone. This project was just the start of learning to write more accessible code.

    FAQ-accordion Accessibility challenge

    1
    Sarah•580
    @AutumnsCode

    Well done. It is really a good solution And i really enjoy the transition!!!

    If you want to do this challenge in the future again, it would be great if the previous open one is closing when clicking on the current one.

  • 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

    Hi there,

    To apply a second font family just add font-family to the element you need a second fonts.

    body {
font-family: sans-serif;
}

h1 {
font-family: serif;
}

    I hope this will help you out. If you have do more question, let me know.

    Marked as helpful
  • Inaolaji Ridwan•310
    @InaolajiRidwan
    What challenges did you encounter, and how did you overcome them?

    the problem i had was when i was unable to center my content(main-container)

    TailwindCss

    #tailwind-css
    2
    Sarah•580
    @AutumnsCode

    Well done for completing this challenge.

    I believe the width of the main container should be smaller.

    Best regards

    Marked as helpful
  • P
    Kamran Kiani•2,780
    @kaamiik
    What are you most proud of, and what would you do differently next time?
    • Practice more and more with form validation on JS.
    • Practice with Sass and cube-css
    What challenges did you encounter, and how did you overcome them?

    Make a good structure on html, scss folder and also write a good JS code was challenging.

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

    I need help to know can I improve my code on js ,css and html parts.

    Newsletter Signup Form with Success Message

    #accessibility#cube-css#sass/scss#vite
    1
    Sarah•580
    @AutumnsCode

    Well done for completing this challenge.

    I liked your solution a lot. In regards to your HTML, I would have use a section-element after the main element. And I don't believe it is neccessary to have two html file, but honestly I am not sure if I am correct here or not. But since you used two html file, it cursed a little overlap between it when clicking the submit button. It ruins a little bit the experience of it.

  • Mik2nd•360
    @mik2nd
    What are you most proud of, and what would you do differently next time?

    i finish

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

    i cant make function work, i do event click

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

    js is confusing 😵‍💫

    grid, onclick

    1
    Sarah•580
    @AutumnsCode

    Hi there,

    well done for completing this challenge. I am currently working on this challenge myself too. In regards to your JS: I think you understood how to switch from one components to the next one. However, user shouldn't be able to go to the other field if the input is empty or the input is not valid. To check something you can use if-statement like this:

    if(!(input.value == '' )){
   document.querySelector("main").classList.add("none");
  document.querySelector(".bg-continer-success").classList.remove("none");
}

    Translation of the code: If the input value isn't an empty string(because all input values are string) then add / remove the styling

    It is common practice in JS to declare variable. It can help you to made it more readable,when reading the code for the first time and also helps to maintaining. Currently, if you rename your main to something else, then you need to change it in both Event listener. For bigger projects that would be lot of work and you can ending up missing one.

    const main = document.querySelector("main")
const successContainer = document.querySelector(".bg-continer-success")
const submitBtn = document.querySelector(".submit")
const dismissBtn = document.querySelector(".dismiss")

submitBtn.addEventListener("click", () => {
  main.classList.add("none");
  successContainer.classList.remove("none");
});

dismissBtn.addEventListener("click", () => {
  main.classList.remove("none");
  successContainer.classList.add("none");
});

    Best regards. Sarah

    Marked as helpful
  • P
    Lo-Deck•3,740
    @Lo-Deck
    What are you most proud of, and what would you do differently next time?

    Hi here is my solution for Pricing-component-with-toggle. I used HTML, CSS, JS.

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

    Feel free to leave any comments.

    Thanks.

    Pricing component with toggle

    1
    Sarah•580
    @AutumnsCode

    I really enjoy this solution. Its include semantic HTML, layout looks good, is well-structured, readable and reusable.

    My only suggestions is that the media-query need to have smaller breakingpoint. It just doesn't look right.

    Bonus: I would be great if you had use some transition if you had build in some animation or transform when you switch from annual to monthly and vise versa.

    Keep it up!

    Marked as helpful
  • Sarah•580
    @AutumnsCode

    Hi,

    well done.

    Here are some feedback in regards to your request. ** Responsive**: Start with the mobile design first, then I would go look into the other view. Also you might don't know it, but you are able to use logical property and not just min-width, width or max-width. Here is an example:

    @media (width > 400px){
/* it only apply the next style if the width is larger than 400px*/
}

@media (width >= 400px){
/* it only apply the next style if the width is larger  or equal than 400px */
}

    Keep it up :)

    Marked as helpful
  • Ali Madaminov•50
    @MuhammadAli0917
    What are you most proud of, and what would you do differently next time?

    This is my first time solving challenge here. I understand difficult topics in coding, but I find difficult to write a code. But I made it. Next time I will review Figma file first.

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

    I encountered small problems with writing responsive code, I published my small project in Netlify and checked how it is looking on my phone, it helped me to solve the responsive code problems.

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

    Responsive codes. File structure.

    Responsive Social links profile

    2
    Sarah•580
    @AutumnsCode

    Hi,

    well done for completing your first challenge here. Since it is your first time, I will suggest you might look into:

    HTML

    • Semantic HTML*: your currently code has hardly any. Divs are non-semantic HTML. It mean screenreader and co are unable to tell a user what role the element have on the page.
    • the links should be <ul>-Elements. and paragraph should have been <a>-element

    CSS First of all I love your css. Its very clean!

    • instead of using px, it is recommand to use rem or em as units.
    • If you put font-family inside your body-property, you don't need to declare it again. (since its only one fonts used in this challenge)
    • i Believe the border-radius is much smaller, check the figma file :)
    Marked as helpful
  • Abdullah Bin Soulat•110
    @AbdullahSoulat
    What are you most proud of, and what would you do differently next time?

    I made a lot of progress with my JavaScript. I think the CSS is also very clean.

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

    Managing DOM elements from JavaScript

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

    I would love some feedback on my JavaScript, since I'm quite new to it.

    Sign-up Card with JavaScript

    1
    Sarah•580
    @AutumnsCode

    Well done!!

    There are a few area, I can see improvement.

    • I see a lot of div-elements, to wrap certain area around like the form. Div are non-semantic HTMLs, instead I suggest to wrap the area in <form> element. Also there need to be a <main>-Element.

    • I believe the background -color is the wrong one.

    • Your JS looks fine.

  • David Almonacid•70
    @DavidAlmonacid
    What are you most proud of, and what would you do differently next time?

    I'm proud of creating the responsive layout and making the share button interactive with JavaScript through DOM manipulation.

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

    The challenge that I found was creating the share links section in its mobile and desktop version, so that it matches the provided design.

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

    It was a starter project, so I don't need an extra help in this moment.

    Article preview component

    #vite
    1
    Sarah•580
    @AutumnsCode

    It look similar, but the links to live and source page is missing

  • Martin•290
    @Shanahan914
    What are you most proud of, and what would you do differently next time?

    First time using Tailwind - I enjoyed it. Need to optimise it by adding some layers (or using React) as this involved a great deal of copying or pasting

    Notifications page (html + js + Tailwind)

    1
    Sarah•580
    @AutumnsCode

    HI there,

    your solution looks great. There is a few more thing I am suggestion to improve the code

    I am not sure, if the design file say it, but I think the cursor pointer is missing when hovering over the section. Ans I think a little more margin-top and margin-bottom missing to make it more px-perfect

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

    Write now I don't have any particular skill in this field that I am proud of. That's why I want the help and resources of Frontend mentor to enhance my skills.

    My First Project

    2
    Sarah•580
    @AutumnsCode

    Hi there!

    I suggest you look into semantic HTML, Grid and Flex. I believe those will help you in future projects and reduce the amount of element you use.

    <img src="/design/images/image-qr-code.png" alt="" class="scan"> this should help you displaying with the image. Also I would put the image in seperate folder.