Skip to content
OverviewSolutions
10
Comments
27
Dan P.
@Danielfww

All comments

  • Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey Shihab, your project looks amazing. If I had to recommend anything here is to change your background. If you put this stuff into body:

    background-repeat:no-repeat; background-color:hsl(225, 100%, 94%);

    You should not have the double background anymore.

    0
  • Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey Nikhil - great job on finishing this project. If I had to recommend anything here, I would suggest you expand a little more on the grid here - make more space for your columns and lower a little bit on the row space and that way they should expand more to the left/right on boxes should become a little smaller.

    If you use grid-area it would be easier to adjust them.

    0
  • Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey Learn - great job on finishing this project, it looks really close to the original design. If I had to recommend anything here, I would suggest you would use the following to center your div to the middle of the page:

    body {

    min-height: 100vh;
display: flex; 
justify-content: center;
align-items: center;

    }

    Everything else looks great.

    0
  • Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey Johnny - great job on finishing this project! If I would recommend anything - it would be adding a: hover into your style.css file and that way your text would change when clicked on

    For example:

    a: hover { color: black; cursor: pointer; }

    Good luck and great job!

    1
  • Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey Erfan - great job on finishing this project. If I had to recommend anything here, I would suggest you would use the following to center your div to the middle of the page:

    body {

    min-height: 100vh;
display: flex; 
justify-content: center;
align-items: center;

    }

    Everything else looks great!

    1
  • razanabbas•100
    @razanabbasSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the progress I am making in my CSS skills, thanks to frontend mentor. I used a CSS reset and a CSS lint as the guy from Discord advised me last time and they turned out to be really helpful. I will start using them more in my upcoming projects.

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

    I made some stupid mistakes which got me stuck for a while but I reviewed my code several times and discovered them.

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

    Nothing specific this time, just any general feedback would be helpful!

    Social links profile using HTML and CSS

    2
    Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey razanabbas - great job on finishing this project! If I would recommend anything - it would be adding a href into your divs and doing hovers, that way your text would change when clicked on. Everything can be done in html so you dont have to chance your css file. Good luck and great job!

    Marked as helpful
    0
  • Ben Loh•10
    @CodeDreamerBenSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to produce a near identical webpage to the preview shown. I was able to gain more confidence as I progress through the coding process: from adding in the basic HTML elements to making the webpage responsive using CSS. Overall, I found this challenge easy, effortless and elementary, which I should since it's a beginner's challenge made to test the fundamentals. The biggest struggle I had was to make the page responsive. Though, I was glad that I was able to successfully make it responsive by testing it on various browser sizes and making any changes if necessary.

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

    The project was relatively easy, but the biggest challenge I had is to try to make the projects as identical as possible to the preview. At the same time, I also had to make it responsive. The ways I solved my struggles were to explore various ways that I could possibly make it responsive, then fill in the gap when there were overlaps of the content in different browser sizes. It took some time for me to make it as responsive as possible, yet it was a fun experience.

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

    As mentioned, I had some struggle with making the project responsive. I wish to have some feedback on how I could improve the responsiveness of the webpage, for example:

    • What other simplified ways are there to make it responsive?
    • What responsive property am I missing? (if any)
    • How could I do better?

    I hope I can hear some feedback on the areas I can improve on, so I can learn from my mistakes and not repeat them in future challenges.

    Responsive QR code component page using CSS

    1
    Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey Ben - in this project you dont really have to worry too much about responsivness. The only thing that I would change here is make your card just a little bit smaller and you should be good to go. Great job on your first project btw!

    1
  • Candice•20
    @candicembeSubmitted 5 months ago
    What challenges did you encounter, and how did you overcome them?

    I wasn't sure about the right attribute to use sometimes, so I did a few research

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

    the picture of the avatar isn't showing when using GitHub, I don't know if I should add the file of the picture on GitHub too? I'm not familiar with it.

    In the style-guide they tell us that - Mobile: 375px - Desktop: 1440px, I didn't know if its about the general box with the picture, the buttons ect, because if it is the 1440px seemed large to me, I was a bit lost about that.

    responsive social links using css flex box

    1
    Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey Candice, what they mean with the 375px its media queries for mobile version and 1440px being the width for desktop version (whole page width) - pretty much at max-width 375px they would like you to transition to mobile version so when someone opens on mobile or desktop it will automatically transition.

    As for the picture I recommend using either https://imgbb.com/ website or creating account in the premium codepen - that will let you store your uploads.

    Hope this helps even a little and if you got any questions feel free to ask, I will help however I can.

    Marked as helpful
    0
  • Sadiki Benda•180
    @SadikibendaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    first project working with css grid

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

    place the card in specific position

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

    working with quotes, I didnt finish that part.

    any feedback is appreciated

    Testimonial grid section main

    2
    Dan P.•250
    @DanielfwwPosted 5 months ago

    Hey, good job on finishing this project!

    Just got 2 suggestions for you that could help you next time. When you do grid, instead of just doing grid-column you can use grid-area and that way you be able to move divs much easier. Another thing you could add here would be grid gap - that will create more space between the divs and it would look much closer to the original version.

    One more time - good job and good luck on your next projects 😁

    0
  • Alex•3,130
    @Alex-Archer-ISubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm glad that I could find a way of deeper stylization elements. It's something new to learn.

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

    I stumbled upon an image size in mobile version. It should be stretched to full screen width while the rest of content should keep paddings. I'll find a way - it's a bit clumsy. Maybe I should use slightly different markup at first.

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

    I always have troubles with the neat organization. In this project I tried to use BEM. I backed off a little from naming convention - I know - but did I gasp the main idea? Besides any suggestion accepted.

    Recipe page

    1
    Dan P.•250
    @DanielfwwPosted 6 months ago

    Hey Alex, good job on finishing this project! The only advice I can give you here is to use margin-top and trying to measure in px how much you can lower the container down - right now it takes the whole page. Hope this helps even a little

    1
  • Lidusan•120
    @LidusanSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    nan

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

    nan

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

    nan

    Log page

    1
    Dan P.•250
    @DanielfwwPosted 6 months ago

    Hey Lidusan, your project looks great - the only advice I would give is to use position: relative and move some object up and down if you want to still make some small corrections.

    0
  • Aneta Kaczmarek•90
    @NullishKoalaSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am especially proud of the time it took me to finish this project. I estimated around 2 hours but managed to finish it in an hour. I am also happy with finally being comfortable using CSS flexbox since it has always been a bit of a struggle.

    I would probably rethink the css properties that I have used for the overall layout. I am not sure is flexbox for body, and flexbox + position: absolute for the main component and footer is the best and common solution.

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

    The most challenging parts were:

    • the layout of the page: should I use flexbox? Is the combination of flexbox and position: absolute for the footer the best option? Should I use grid for this page?

    In the end I've decided to use flexbox & position: absolute for the footer for the overall layout.

    • how to fit the image of the QR code.

    I've set it's width to 60%, but I am not sure if that's the best solution.

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

    I would be grateful for the feedback regarding:

    1. the overall layout solution: flexbox on the body + position: absolute on the footer. Is it a good solution and a common one?
    2. resizing the QR code image to fit the box? Is my solution to set it's width to: 60% a good one? Is there a better way to solve that part?

    QR code component

    2
    Dan P.•250
    @DanielfwwPosted 7 months ago

    Hey Aneta - great job on finishing your first project!

    The only thing that I would change its on the padding you did - if you do 5px or 10px inside your container you will see a difference there - image wise you can always adjust after but yeah changing width and height its how you would usually resize image.

    Hope this helps even a little i powodzenia na nastepnych projektach.

    1