Skip to content
OverviewSolutions
18
Comments
9
P
Axseinga
@axseinga

All comments

  • William Firmino•300
    @WillwfSubmitted almost 3 years ago

    This is my fifth solution submitted here. I've used this project to reinforce some HTML, CSS and JS concepts, React training and, mostly, to use styled-components. This is my first time using it and I really think that it's very interesting. There are some things that I still need to understand, but is very useful to manage the components, especially when your project is getting too big. For my next project I'm willing to do something using an external API, to fully understand and learn about it, as well something to start learn about back-end. I've struggled a little to change the images according with the screen sizes but I managed to find a way around that. Do you have any suggestion that you would like to make? Anything is welcome. Anyway, thanks for reading that.

    Loop Studios Landing Page using React and Styled Components

    3
    Axseinga•430
    @axseingaPosted almost 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
  • Axseinga•430
    @axseingaPosted almost 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
  • ellienndea•130
    @ellienndeaSubmitted over 3 years ago

    Updated version after I got valuable feedback for the first attempt. Also fixed issues from the html report. 😊

    Hi everybody, thanks for checking out my tip calculator solution. :) It was quite challenging for me. I tried my best to make it accessible for everybody. Now it works. I also tried to keep my code read-able, so I hope you guys find it clear enough. Any feedback is welcome! Happy coding! Linda 😃

    tip calculator html, css, javascript, flexbox

    2
    Axseinga•430
    @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
  • Axseinga•430
    @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
  • SA•60
    @SA-k97Submitted over 3 years ago

    Hello .this is my second challenge so far .I kinda tried to learn how to use flexbox here but the problem is that I couldnt put the content in the middle of the page .I used "justify-content:center" and "align-item:center" but neither worked .it would be great if u help me with this :")

    responsive 3 column preview card using flexbox

    1
    Axseinga•430
    @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
  • Heritier Akilimali•310
    @heritioSubmitted over 3 years ago

    i keep getting scrollbar and dead space on mobile version even though i have set the width on the body to 100%-95%, sometimes there is no dead space and no scrollbar, and sometimes there is, im not sure why that is happening. I would love some feedback on how to center the body and have no dead space that makes the x scroll bar apear. Thanks for the feedback

    html and css site with flexbox and media queries

    3
    Axseinga•430
    @axseingaPosted over 3 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
  • Axseinga•430
    @axseingaPosted over 3 years ago

    Hi there Justyna,

    Congrats on finishing the challenge! I really like your solution, it looks very elegant and it's responsive. The only small issue I notice is when you resizing the window the form is not centered, it starts around 650px.

    The solution with JS validation and tooltips is very nice. However, in the original challenge if the user types wrong data into tabs the message is shown for every tab under the tab.

    It's really great job. Have fun coding :)

    Marked as helpful
    0
  • Axseinga•430
    @axseingaPosted over 3 years ago

    Hi Emanuel,

    Great job on this one! I really like your solution. This hover effect on links in the footer is awesome. I checked your code and cannot figure out how did you manage to make the mobile menu animated when it hides?

    If it comes to your question I am not sure if this triggers it but your div with class header__links is very long and goes over the button. I can click on links without the problem however if it comes to your contact button I can click on it (and it changes the color) only when I hover on the parts of it that are not covered by div with header__links class. I hope that will help.

    Keep coding :)

    Marked as helpful
    0
  • Abednigo Jabulane Tshabalala•60
    @tshabalalaajSubmitted over 3 years ago

    I had a problem with the two circle on the background any advice you can give on solving this would be appreciated. I have tried using z-index to get the circle at the back and using position absolute, but after doing this the when i include the background color it the circles disappear.

    Profile-card-component-main

    2
    Axseinga•430
    @axseingaPosted over 3 years ago

    Hi there! That's a very nice solution, congrats on finishing it! Did you try to add images as a background to body and then position it with background-position property? I think this might work, however a newbie talking here ;)

    0