I’m a little bit lost. I’ve done bunch of tutorials and maybe I got stuck a little bit too long with watching and doing exercises. But I also thought, how can I improve if I don’t do the tutorials?
Now when I just wanted to start my portfolio website. I realized, I don’t know how to approach this structure. And this is like the very basic thing you could imagine.
This is just a part of an about me page. The image will be my profilephoto, the h1 : about me and p: text.
I tried to work with flexbox but still can’t figure out how to make this structure happen.
I was thinking creating a div. Within the div I place the image, h1 and p.
I think I should make an ID for the div. Then I think I should do something with flexbox.
or
Keep everything the same but placing my image in a div of it’s own, but I don’t think that makes sense.
Can someone please help me understand how to do this?
Thank you in advance
Hi,
It’s always helps to first create a visual sample of the page you want to create. You’ve done that and it makes the next steps easier. There are other approaches to this that can be better, but here’s how I would do it. First, create a div, that holds the image, h1 and p. You’ve thought of doing that. Next, I would use the flex property in this div element to make the elements be next to each other in a row. Then, I would wrap my h1 and p elements inside another div and use the flex and flex-direction properties to align them on top of each other.
In simple terms, you would need two div elements. One div would be the main container. Inside the main container, you will have your image and another div. The second div will have your h1 and p elements I hope this helps.
1 Like
Thank you so much.
This helped me understanding how to take the steps. For some reason I was thinking about using float, but then nothing would happen wit the h1 and p.
Is float often used for sections and images?
1 Like
No problem!
From what I know, float isn’t ideal for sections and images anymore. It’s basically designed for texts wrapping around images. Like, if you have a simple image and a p element, sure you can use float. But in most cases, flexbox and grid are better options.
Feel free to ask any questions if you need help.
Good luck with your project!
1 Like
