Intro to Code Part Two, CSS

Coffee mug that reads CSS is Awesome.

It might be worth buying this coffee cup now

As promised, we’re going to publish a blog post on each of our twelve Intro to Code classes, and this one covers the second class, which was all about CSS. If you haven’t seen our post about our first class, you can find that one here.

CSS is one of those “a minute to learn a lifetime to master” topics, and if you’ve been doing the recommended homework you already know a little about it. If not, the best thing to do right now is to head to this Codecademy course and complete it. It’s a great introduction to both HTML and CSS and how they work together to create beautiful web pages.

If you’ve already done that course or feel like you understand the basics of HTML and CSS, read on.

In class two of our Intro to Code series we dove right into our topic. We tried not to double-cover all the material in the Codecademy course, instead focusing in on positioning, background images and other topics that are common points of frustration for new developers. We had numerous in-class code examples, which you can download or clone from our Github repo.

Once we were through those examples and the rest of our slide presentation we jumped right into our main class project, which was styling the HTML page we built in class one. If you haven’t built that page yet, do that first! The idea is to look at the page we link to above and then use a text-editor and your HTML skills to build an exact duplicate.

In fact, our second assignment is very similar to that first one. This time, we’ve created a new version of our learn-to-code page, and what you’ll want to do is to create a new copy of your HTML assignment, add a CSS stylesheet to it, and then make it look just like our new version.

You’ll want to make sure you’ve finished that assignment by the next class because class three is a challenge workshop which will demand you take your CSS skills to a whole new level.

The focus of our challenge workshop is going to be on CSS positioning, so be sure to check out the links below for more information on that. Remember, the assumption is always that you’ve done the homework, so we won’t cover most of that material in class.

Links and Homework

Some links are duplicates of those above but are presented here as well for your convenience.

The slide presentation from our CSS class

Our Github Repo, with code examples from all our Intro to Code classes.

The HTML Whitepaper from last week

The CSS Project from this week

CSS Positioning Explained by Building an Ice-Cream Sundae

Give Floats the Flick – a great article on using display: inline-block to create grids in a page

A YouTube Series on CSS Positioning

 

As always, your best bet is to do the required project and homework, and then try to build a couple of small projects on your own. We learn by building! Try to code for at least an hour a day. That is critical!

By the next class, you should be capable of creating a basic web page and giving it an attractive appearance using HTML and CSS.

The Challenge Workship is going to be a lot of fun, and we hope to see you there. If you can’t make it, be sure to keep an eye out for our next blog post, which will give you all the instructions you need to try that challenge from home.

Till then… code on!

Sharing is caring...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on Reddit

One thought on “Intro to Code Part Two, CSS

Leave a Reply

Your email address will not be published. Required fields are marked *