Help in making layout page in html and css

Hi,
Earlier i got help in making navigation bar but now i am stuck in rest of the page layout , i did what i can do best but its not sufficient. I am uploading screenshots of what i made and what it should look like. Iam not able to change size of image and arrange them as in image.

,


codepen link is—

To fix this I would recomend you would use a margin around your photo’s
Also size the balloon photo’s
here are some sourches that might help you with it:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/css_margin.asp
https://www.w3schools.com/css/css_grid.asp
https://www.w3schools.com/css/css_max-width.asp
https://www.w3schools.com/css/css_image_gallery.asp

Do you know how to fix this??

in your css there is nothing that relates to image size, and it is difficult to do any suggestion with an incomplete pen - there are no images there.


While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

@Gurpreet_Singh, at the bottom of the page for the course you’re doing (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) there are instructions on how to ask for help from them.

Did you read all the preceding guides to this test? If so I’m a little confused about why you would choose floats for anything but the image text wrapping.

Also, are you using the HTML and CSS they provided? You should, everything is set up and ready to go. You just need to add a tiny bit of CSS.

I will say looking at the image they seem to be using a different max-width for the .grid then what you are given in the starter code.

Here is an example of the layout, I added comments to the CSS. There is no mention of using media queries or how the layout should look on small screens so I did not add that.
https://codepen.io/lasjorg/pen/KKpBWrB

Hi,
Yes , pen is incomplete, and yes in my css there is nothing in my css for images, actually i used different approach for this page to me first it was two column page first with image floating left and para around and second column is photographs with five images. later after several tries i found out it its start with simple html flow so i float first image to left and div containing images to right and para comes in between them but now the problem came to change size and arranging them as in picture so in my help i asked in my last line about arranging them and changing size. I appreciate help with links and to my question (do you know how to fix this) what i meant is any approach or solution which not always is a code to given problem. Thanks

Hello,
Yes i am doing this developer.mozilla. and thanks i will figure out.

Hello,
I did read, and i am doing this for practice. i am learning float so i applied float, No i am not using HTML and CSS they provided , to me it is learning not completing the project in a rush Thanks.

If using float was a requirement for you then you might have mentioned that in the first post.

Using float for layout is antiquated and almost nobody starting a new project would use them for layout, unless you have to support very old browsers. Knowing a bit about floats is fine but if your new and just starting out learning about CSS layout I would not suggest giving it much of your attention. Focus on learning the right way of doing layout, not the old “wrong” way.

I say wrong because using floats for layout is really a hack. They were not implemented for doing columns and layout, just for floating text around elements. Just like using tables wasn’t meant for doing full site layout but was used for it anyway. We just didn’t have anything better at the time and web devs are resourceful people so they come up with all kinds of hacks all the time.

The reason why they give you the starter HTML/CSS is so you can focus on the task and it will force you to use the selectors and HTML they have given you. You should be able to finish the assignment without adding any new HTML or selectors. I’m not saying you shouldn’t also try implementing it all from scratch as well, as that would be a good challenge too. I’m just saying I think you should start by completing the assignment the way I believe it was intended.

Hi,
I got your point. Thanks