Skip to content
OverviewSolutions
18
Comments
9
P

Axseinga

@axseinga540 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
    Axseinga•540
    @axseingaPosted about 3 years ago

    Hi William! Congrats on finishing this challenge and learning React!

    My hints for this and your future projects:

    • you can definitely make not only styled-components but separate components from e.g. <Links/>, this way you can write functions inside components.
    • try to be more descriptive in naming your components e.g. your <Links/> can become <Navigation/>,
    • thanks to React we don't have to repeat our code and can use loops and jsx to create repeatable components e.g. your Links component could look like this
      const linksFields = [{label: "About", href: "#"}, {label: "Careers", href: "#"} ... etc];
  return (
  <ul>
  {linksFields.map((link) => ( 
      <li> <a href={link.href}>{link.label}</a> </li> ))}
  </ul> )
}

    read about map function

    • decide if you want to use arrow functions or function declarations and be consistent.
    • you can use export declaration in one like as export const MyComponent :) when you use arrow functions.

    That's all from me, I hope it will help to improve your coding in React :) Happy coding!

    Marked as helpful
    1
  • P
    Axseinga•540
    @axseingaPosted about 3 years ago

    Hi Ivan! Congrats on finishing this challenge!

    I've checked your accessibility issues and if you want to fix them you could use "main" tag for your <div class="container"> and 'footer' for your <div class="attribution">. This is a small component that would be a part of the bigger project however it is good to start using more HTML semantic tags from the beginning :) Don't forget to link up your solution to your profile on GitHub or LinkedIn ( Coded by <a href="#"> Ivan Garcia</a>)! You can use media queries for the mobile version. At the moment your component is centered vertically if open on mobile (has a huge top margin), that is because of the property justify-content: center on your container element. You can test it in your devtools or website like Responsinator. A big plus for using flexbox from the start :)

    Happy coding!

    Marked as helpful
    1
  • P
    Axseinga•540
    @axseingaPosted over 3 years ago

    Hi ellienndea,

    Congrats on finishing this challenge!

    Here are some suggestions from me:

    • you can center your calculator vertically on the desktop design, so it does not stick to the bottom of the page,
    • I would make the "coded by" paragraph much smaller, it looks really big on the desktop and it breaks into two lines on the mobile,
    • you can change the event of event listener to "input" instead of "change" as it was suggested to me as well (I used originally "keyup"). With the "change" your event fires only when User clicks outside after filling the inputs,
    • you can try to break your javascript code into smaller functions so it's more readable :) article about good practices in JS

    I hope it will be helpful for you :) It's not so easy challenge. Great work!

    Marked as helpful
    1
  • P
    Axseinga•540
    @axseingaPosted over 3 years ago

    Hi Rasil,

    Congrats on finishing this challenge. Your solution looks nice, I would only use a little bit bigger font size on mobile as it is hard to read at the moment.

    I am not sure if I got your question right but I try to answer. If you want you could add some media queries for the tablet as well (like two columns), the way you use grid is alright, if you want to manipulate the grid elements easier you can read about grid template areas. To make it more responsive you can use fractional units or percentages. You can read more about it here

    I hope that answers your question :)

    Keep coding!

    Marked as helpful
    1
  • P
    Axseinga•540
    @axseingaPosted over 3 years ago

    Hi SA,

    Congrats on finishing your second challenge :) It looks really great and it responses nicely.

    In regards to your question just wrap your section in another div and use display: flex and flex properties on this div if you want to center your content. If you using it on the section you are centering elements inside the section instead of the element itself.

    I hope this helps :)

    Keep coding :)

    0
  • P
    Axseinga•540
    @axseingaPosted almost 4 years ago

    Hi Heritier, Congrats on posting your challenge :) I just cloned your code to my VS and will try to see what's going on there. The first thing I would change is not to set any properties other than background-image to your body. If you want to center the content then create a div element with class e.g. page__wrapper and center it instead. It should help the website not to collapse. So I would delete that part from your body: margin: 9vh auto; width: 70%; height: 70vh; display: flex; flex-direction: column; justify-content: space-between;

    and add a div around your content with this code display: flex; justify-content: center; align-items: center; padding: 5rem; (you can adjust the padding to your needs). The flexbox part will center your content. Another thing I noticed is that you applied the bottom image to the background of the body and you added it one more time in HTML alongside with upper image. The easier solution would be to apply both images to the background and position it with background-position property and apply background-repeat: no-repeat so your image doesn't repeat. If you need more help with that just let me know. This will solve your problem with the scroll bar. You will still need to re-organize your media queries and I can advise make more breakpoints or set phone breakpoint a little bit higher (e.g. 600px) and from that point apply column layout.

    I find it much easier to code first mobile version so you can try it as well :) I hope my comment helps you to improve your code. Great work and keep have fun coding!

    Marked as helpful
    0
View more comments