CSS: Box Practice: p1- Quesadilla

Understanding the Box Model is important when it comes to front-end web design with CSS. Being able to stylize and place div-tags and other elements is also important. You’ve learned quite a few basics of CSS so far, but lets really get some practice in now. We are going to move through a series of exercises to really get good at styling div tags. This will help as you begin to create and design your own websites utilizing CSS for all the design work.

We are going to start pretty simple.
We are going to make a quesadilla in a box with div tags.

Learn CSS – Box Exercise 1: Quesadilla in a Box

Continuing CSS: Working with lists.

If you have the old link for the first animation with CSS tutorial, be aware the new link is here: Learn CSS: Basic Animated Buttons…

New video:
Learn CSS: Refresher on Lists + a bit of CSS
Animating with CSS isn’t really that important, but it is neat. Lists on the other hand, have become pretty important through the use of CSS. Most websites now use lists to create their menus. If you are new to CSS, you probably haven’t done much with lists, as they are pretty ugly in base html. In this first video, get a little refresher before we press into creating menus with lists.

Don’t forget, your final is already online. If you haven’t looked at it yet… you probably should start. It’s due by the end of this week.

Continuing with CSS

I’ve re-uploaded the video working with Brackets, as there were a couple little issues with the encoding. It should run better now for the few who had issues. See it on YouTube.

The CSS video on lists is almost ready. I’ve uploaded the incomplete version to our campus archive; you can get started on it there if you’re on campus today. The completed video should be ready tomorrow.

Creating in CSS: Part 6

I haven’t recreated the early CSS videos yet, so you’ll have to use the old ones in our school archive still if you’re on activities 1-5. However, if you are activity 6:

In the video below, I’ll lead you through creating a button with CSS. In the video below, I only create one and it doesn’t go anywhere. However, I’d like you to create three, all in the same .html file, and I’d like them to be links. This means, you’ll have to remember how to create links, and how to create IDs with CSS, since I don’t demonstrate that in this video.

Watch on YouTube


If you haven’t uploaded your table-based website, you need to do that today. Next class you need to begin the CSS activities. If you haven’t found a free web server to host your website, you’ll need to do that too. If you need assistance, watch the videos from before we went on holiday.

Just before the break, a couple of you brought to my attention that FileZilla isn’t working. The tech department has blocked the port that FileZilla utilizes. I’ve left FileZilla in the video, as I still recommend it for home use, but while at school use FireFTP for now. It’s an add-on for Mozilla Firefox, and is currently working fine. It should last long enough to get the issue with FileZilla cleared up with our Tech Dept.

If you need help, watch the video on YouTube.

If you’re ready to move on, play with the code editor Adobe Brackets today. I’ve prepared a video on YouTube about it as well.