HTML/CSS Advanced Course Videos

Welcome back, and congratulations on finishing HTML/CSS 2. In HTML/CSS 3, we will use the awesome power of CSS and HTML to create a blog, run for class president, or make a guide for your favorite game. I want you to get comfortable with coding HTML and CSS.

Starting a new website is really exciting. I love getting inspiration from other sites and planning out what my site will look like. This is a very important step. Pick a subject that you're really interested in and investigate

After investigating a couple of websites, I now have some really good ideas for mine. I'm going to use a mockup tool so that I can experiment with different looks. Mockup tools make it easy to create a basic version, or mockup of what you want your page to look like.

Display is a CSS property that tells the browser how much space a tag takes up. To explain display, I'm going to use my previous project as an example so that I can highlight a couple of its sections and compare them.

You can change the width and height of a block tag with CSS. But you can't change the width and height of an inline tag as an inline tags width and height is always determined by its content. So let's look at how we can change the width of a block tag

We've looked at block tags like header, paragraph and h1. We've looked at inline tags like insert, and delete. One tag that isn't really block or inline is an image tag. Lets learn more.

You just learned about images and how they're not really block or inline, there's one more important thing that you should know about the image tag. By default, an image doesn't care how big its parent container is, so an image will spill out of its parent if the image is wider than its parent

A tag with display flex does two things. It displays like block, so it takes up 100% of the width of its parent, but it also makes its children display like images - side by side in one row. Giving a tag the display flex declaration turns the tag into something called a Flexbox.

Hmm, it looks like one Flexbox won't cut it, I'll need to add a new tag called a div. A div can be wrapped around all kinds of different content because its only purpose is to give content a specific set of styles. Lets learn more.

I'm done with the main section. So I'll move on to the top of my page, just like before, I'll look at what I have in my mock up and break it down into code.

I finished the plant gallery so I'm on to “About Me”. I'll click Add Page and name it “About Me”. But since I'm going to put the same header and footer on every page, there's a better way to do this. I'll click the tab for my gallery, and then click the duplicate current page icon. Now I can highlight everything between my header and footer and press backspace.

To start my “About Me” page, I will code the easiest part, the header and footer. I want the exact same header and footer on every page of my website. I can just copy all the code from my gallery, paste it into my about me file and then delete any HTML and CSS that doesn't involve the header and footer.

I was able to convert my about me mockup into HTML and CSS. I put my first section inside of div tags so that I could style it differently than my second section. But there's actually a better tag for the content in my first section, called a figure.

I have two pages for my website now. So I'll need to be able to navigate from the gallery page to the About Me page. The anchors in my header will need a special href value called a relative URL. Lets learn more.

When you have the same styles for certain tags across multiple pages on your website, you can use an external style sheet. An external style sheet is a file specifically for CSS. Let me show you how this works.

Lets move some of the styles that are repeated in my “About Me” and gallery pages to an external stylesheet, like the styles for my header and footer. This makes my CSS less repetitive. It also allows me to add all of those styles to a new page and just one line of code using the link tag.

I'm on the last part of my homepage. My HTML file already has the code for the header and footer pasted in. I also added link tags at the top of my page for my home.CSS file, and my app.CSS file. Let's preview this really quick. It's all good.

Now that your website is complete, I'm going to teach you some expert tips and tricks so that you can step up your code game. You can give your pages the kind of 3d like feel with the box shadow property

I'm going to show you one final trick to make your images look great. You know how to change the width of images. When you change only the width, the browser will figure out the height for you. But what if you want to set the height to?