Skip to content
OverviewSolutions
10
Comments
12
P
Igor
@whiteriver-dev

All comments

  • P
    Igor•240
    @whiteriver-devPosted 3 months ago

    Everything looks good, I also did this project with React but I am yet far from being an expert. From my view, your code is clean and everything works as intended. I like how in your project you included the styles directly in the component - I will consider that for my projects in the future.

    One thing that has helped me with my React project that I recommend is dividing your components into different subfolders based on their size/functionality. For example - I used the Atomic Design Methodology to divide my components from little primitive components like Buttons, to larger components like forms, and templates.

    Overall, good job.

    0
  • Oluwa Billionz•60
    @Oluwabillionz96Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm so happy I managed to complete this tasks, it looked simple then I started doing it and then it looked undoable but at the end of it all, it is a very simple task.

    So proud of the responsiveness, it's not really perfect though, but I believe I will get better

    HTML, CSS and JavaScript

    1
    P
    Igor•240
    @whiteriver-devPosted 4 months ago

    Besides some design details missing - overall looks good and mostly performs as it should.

    Ensure to test your project on all device sizes. Once you go onto laptop size (1024px) your article breaks as the margin pushes out your content below the container.

    Another thing is you can improve by writing more semantic elements in HTML such as using <sections> instead of using <div> for everything. Also if you only have element in a <div> like <h1> you don't really need that <div>

    Besides that, couldn't find any other issues.

    0
  • P
    Igor•240
    @whiteriver-devPosted 4 months ago

    Hi Stef! You are one of the people I look to when I try to explore how other people have approached certain problems, and while I was looking through this project of yours - I was impressed with how you created it.

    One thing that I came across though - not sure if you have noticed - is that if you test it on a small phone screen size (320px) your Share button overlaps and covers a portion of the Social Media icons. Just wanted to let you know.

    Besides that, keep up the great work - and know that I often look up to your work as a good example.

    Marked as helpful
    1
  • P
    Alexander Roan•170
    @dearestalexanderSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I did create two solutions:

    The DaNang page

    The Meet page

    I thought at first glance this challenge looked straightforward, but once I got into I realised there were a few tricky points relating to the use of grid and flex and the sizing and spacing.

    Some of my approaches towards sizing and spacing may not be quite in line with the best solutions, but I did find building this to be good practice and I was able to experiment further with grid.

    I also enjoyed creating my own variation on the design.

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

    I may have gone a bit off script vs. the specification, but I was playing around with trying to get the 'header + hero' to fill desktop vertical, and the second content section to do the same. This was a little but of practice on the concept of 'above the fold'. I am not 100% sure the design was meant to space like this one desktop. It's hard to tell in Figma. This does mean I have @media changing height and spacing to make it work on tablet and mobile.

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

    A couple of questions:

    1. What approach did others take to have the hero image crop of screen
    2. What approach did others take to vertical spacing, did anyone else try to fit the sections into 'vertical space' or just rely on padding etc. between elements.

    'Meet landing page' with adaptation to tourism theme 'DaNang' page

    1
    P
    Igor•240
    @whiteriver-devPosted 4 months ago

    I checked out the code for your Meet Landing Page. Besides some missing design details - the rest looks good and the main things function as they should.

    You can also try use more reusable styles like for buttons for example instead of styling them each separately.

    Marked as helpful
    0
  • P
    Igor•240
    @whiteriver-devPosted 5 months ago

    Consider making your HTML 100% of the viewport height. As you can see your background cuts out only to the length of the html and body container.

    You also forgot to import the font.

    I see you used Tailwind, as I'm not proficient in it I cannot give advice on that but it appears the columns are not aligned.

    Besides a few touchups, the site seems to function as intended.

    Marked as helpful
    0
  • P
    Igor•240
    @whiteriver-devPosted 5 months ago

    You made the "grid container" with flex instead of grid. I believe the purpose of this challenge is to use Grid not Flexbox. I would recommend going over the Grid section in the learning path and trying to apply that knowledge to this challenge.

    However, you still made it work and it looks quite similar to the design. I would just also recommend using gaps and settings widths of the text section at the top so it matches the design.

    0
  • P
    Igor•240
    @whiteriver-devPosted 6 months ago

    Everything looks good and very similar to design. One thing I noticed is that if you open the site in a windowed mode (in desktop size) and play around with the window sizes, the container for your content doesn't stay in the middle. This is because you set:

        margin: auto;
    margin-top: 60px;

    This makes your left margin also 60px. This means that your image can slightly move but as soon as the margin hits it will no longer move. So if I open your site with a half open browser, the image will be half out of view.

    The way I would solve this issue is add margin only for the mobile view but as you can center the container using flexbox - you do not need a margin for the desktop version as all the content is already centered:

        display:flex;
    justify-content: center;
    align-items: center;
    Marked as helpful
    0
  • Christ778•30
    @Christ778Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am glad that I was able to represent this project accurately and I would like to use javascript

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

    I would like to master javascript

    Page de recettes

    1
    P
    Igor•240
    @whiteriver-devPosted 6 months ago

    Looks good besides missing some design details. Everything is structured well and did a good job with the lists. One thing however that I was told was not to use empty <Divs>. For example in your code its:

     <div class="container">

    <div class="cont">

    You use a Div inside an empty Div - that could be avoided I believe. Other than that well done.

    0
  • ElijahOluwasegun•20
    @ElijahOluwasegunSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I would say I am most proud of not giving up on this project. Early on, my computer died while working on this project erasing all my data which made it hard to concentrate on finishing the project. I am glad that I pulled through to finish this challenge.

    One of the things I would probably do differently is to be patient with myself, not being in a hurry to finish while enjoying the process.

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

    One of the challenges I encountered was finding the right resources to help me solve the challenge. I overcame this by reading various articles, resources and watching videos extensively. Additionally, I also joined communities that helped to improve my knowledge about HTML and CSS.

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

    I would love help with writing a good commit message. I would also love help with CSS flexbox, specifically where the class = qr_sect. I was wondering if there is a way for the whole qr-code component to be in the center of the page both horizontally and vertically without using margin properties as I did.

    Responsive QR Code using CSS display properties

    3
    P
    Igor•240
    @whiteriver-devPosted 6 months ago

    Let me help you with the question regarding centering as I had the same issue. I can see that you had set up flexbox and had justified and aligned to center which is good. However, I believe you do not need the outer section div.

    As to centering, the reason why it's not working as intended is because your body is not full height (you can see this when hovering over it in 'Inspect Element' on Google Chrome'. So it would only center items within the boundaries of the body which is not full size. The way I fixed this in my project was:

    html, body { background-color: #D5E1EF; height: 100%; display: flex; justify-content: center; align-items: center; }

    The height sets the body to the entire page. Then everything within body is centered with flex. Hope this helps.

    Marked as helpful
    0
  • P
    Igor•240
    @whiteriver-devPosted 6 months ago

    Very nice and I like how its customized! As a beginner myself, the code looks really high level and neatly organized. Your CSS file looks very well organized - I'm going to be sure to take a page out of your book for that! Well done.

    Marked as helpful
    0
  • P
    Igor•240
    @whiteriver-devPosted 6 months ago

    Everything looks good except try center it more. I like to do it by setting the height of the HTML to 100%, then display flex and justify and align content to centre. Also missed some design details such as author picture size, and the title color change upon hover but other than that looks good !

    0
  • Declan•320
    @engelbrechtzSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Responsive design, add sleek ui on smaller screens

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

    Feedback appreciated!

    Responsive Qr code card

    1
    P
    Igor•240
    @whiteriver-devPosted 6 months ago

    Try centering it more, if you look closer - the design is in the centre of the page, whereas yours is towards the top. I had the same problem and to fix it, I made sure that body was full width and height. Then I used display flex, and ensured that content is justified and aligned to centre. Hope this helps!

    0