Transcript from the "Posting Images to the Web" Lesson
[00:00:00]
>> Jen Kramer: We're going to be talking about CSS layouts today. So before I move forward, let me just address this Slack chat from what has been going on overnight. I'm so proud of the CodePens, you guys have been posting, showing your book chapters, they are so much fun. You have some really creative ideas and you've done some wonderful stuff.
[00:00:22]
At the same time, there's been a couple of questions that have come up over and over again. One of the very most common questions had to do with images. So you had an image on your computer here and you were working away in your HTML and your CSS and VS code.
[00:00:37]
You were doing great, the picture was showing, everything was good and then you copied everything on to your CodePen and what happened?
>> Class: [CROSSTALK]
>> Jen Kramer: The image disappeared, didn't it? Yeah, the image disappeared and so what happened was, when you move things on up to the internet, you moved up your HTML, you moved up your CSS, but you didn't move up your image.
[00:01:01]
That's just a thing with CodePen, CodePen doesn't have a way for you to post images online, so you need to find a resource somewhere out there. Somebody had mentioned Imager, there's a couple of other places you can go to post your pictures online. Then you can change your Image Source to point to that online resource instead, and then your CodePen will work.
[00:01:25]
So that was kind of like the number one question. What we're gonna talk about today, we're gonna talk about box models, we're gonna talk about the display property. We're gonna talk about how to make your navigation bar so that they go horizontal, vertical, look pretty. We're gonna talk about floats and we're gonna talk about flex box.
[00:01:43]
That is about like five weeks of material we're gonna cover. [LAUGH] Which is why we need to go a little bit long today, and then I have a project for you at the end of all this. It's gonna combine everything that I talk to you about today and you'll be able to put that together into one document.
[00:01:59]
It's gonna be a blog website that you're gonna lay out, sound good? So that is the roadmap for today. We are gonna rely heavily on our website here at frontendmasters.github.io/bootcamp. Be sure to click on the third link for layout and we're gonna be working from this today. There's links in here, a lot of links to CodePen that we're gonna work with, rather than doing so much in in VS code, we're gonna more with CodePen.