Hi everyone!
with and ,and
I'm a beginner (for real) in the front-end world. I'm doing an online course which at the end of each session there's a little project.
In sum, I can't understand the last project we were supposed to do. I saw the solution video, the solution code and I just can't understand what's happening there. I googled, search for videos on Yt, but honestly I can't understand 😦 If someone can please help me understand what's going on with that solution, I would be absolutely grateful.
The HTML code is already provided.
Here are the codes for HTML and CSS: https://codepen.io/msilva96_/pen/eYQPRXG
10 Replies
Welcome first of all. The first link you shared is a file on your local file system.
Ops, let me edit that! Thank you 🙂
Here it's the result screenshot
First thing I see is the src="" attribute on the images are linked to
./assets/images/beautiful.jpg That's also a reference to a folder on the same URL, but unless you have files hosted on CodePen that doesn't probably link to anything right now. Other than that, it looks quite similar to the result you're aiming for.
What is it you don't understand?@wschaap91 I noticed the images, I just used codepen for the 1st time lol but both results on codepen and the screenshot are from the same person (the instructor). The session was about float, media queries, and display.. I did not understand these parts:
.main {
flex: 1;
}
.tile-image {
height: 200px;
float: left;
margin-right: 50px;
}
- What the 2 different css codes for .tile-image and .left inside the same div is doing?
<div class="left card"><img class="tile-image" src="./assets/images/beautiful.jpg" alt="hand and flower in water">
- and everything inside @media 😦
So,
doesn't seem to do anything
the
.left and .right make sure the cards sit side by side
the float:left in the .tile-image just makes sure the image is to the left of the text
Finally, the @media just helps make it responsive 🙂Thank you 🙂
I managed to understand most of it, but I'm still in doubt about the numbers I need to put in @media. For example, if I'm doing a responsive website for mobile, how will I know the size? I google it and it made me more confused lol
Well they actually don't really put any sizes and that's kind of the key 🙂. They just make everything width: 100%; and then shrink some of the text, which you'll just judge based off testing it on a mobile device yourself
thanks!!!
Yea no problem!