First time trying flexbox

HTML-CSS
1

Hi everyone, I just finished the CSS FlexBox section and I was very excited to test out my new knowledge, after an google search I stumbled upon this image

1050×521

Let’s try to do the same thing, I said… after 30 minutes and some searching on the web I came up with this: https://codepen.io/zeRydev/pen/rNLXmRv

What do you think? Is there something wrong?

Thank you for your feedback,

2

Well looks good to me, except that the units are absolute, try to use relative. Also, the design ain’t responsive which you will learn further in the curriculum, Keep Coding!

1 Like
3

That’s great you were able to do that @zerydev. Nice job on expanding a lesson to understand it better.

1 Like
4

Hello @zerydev, you have done a good job.

I can suggest few points.

Firstly in the second row (div.main containing Aside and Article) since extra space is in between Aside and Article, use justify-content: space-between;

main {
    justify-content: space-between; /* To put extra space in between Aside and Article */
    margin: 0 auto; /* Centre horizontally */
    width: 80%; /*Match with the width of Header*/
}

Aside width 30% looks better I hope.

aside {
    width: 30%
}

Article block needs some padding so that the images are more separated as in the picture.

article {
    padding: 1em;
}

Lastly, for codepen, should put css in the CSS block given. It also helps readability and debugging.

Happy coding!

1 Like
5

Wow… Thank you all for your responses. I didn’t expected that
I’m about to begin the CSS Grid section, wish me luck.

From now on I’ll try to use relative units like IAmRC1 suggested.

Thank you all for the feedback.

1 Like