Let me show you a few sites that students have built during this one week of HTML & CSS. By the end of this week you'll be showing results!
Every Monday I'll give you an assignment, every Sunday your homework is due. Here's some tips for success this week.
Quick and painless. Download Sublime Text editor, it's your first step to coding a website.
Code along with me! I'll introduce you to some basic HTML and CSS concepts. And I'll kiss my arm.
Whats the difference between <h1> and <h2> tags? When do we use <p> tags?
Feeling overwhelmed when you start building a website from scratch? Try to use a template. And start with the HTML (text, and images) first. Let me show you how I do it!
In 1965, Ted Nelson coined the term hyperlink. That's almost 30 years before Tim Berners Lee invented HTML and the World Wide Web. I'm a New Media geek, ask me questions if you'd like to hear more about where the web came from!
We want to separate each coding language into it's own file. That will help keep us organized.
Padding, border-radius, text-decoration, and adding images with CSS
In this lesson I'll introduce the birthday page we're going to build, which will utilize HTML5; media queries; flexible images; CSS, and much more.
In this lesson, we cover the benefits of a mobile-first approach to page design and the differences you should be aware of between platforms. Then, we get our hands dirty and start actually playing with unicorns. Or coding. That's what we mean. Coding.
Now that you've built out the body of the invitation yourself, we'll review how the code should look and pat you on the back for successfully completing the first part of your project. Metaphorically "pat" you. (Can you feel it? Good job!)
In this lesson, we learn how to be 100% flexible - or at least how to ensure our images look that way. This is the first truly responsive code you're going to design.
Welcome to the wonderful world of Media Queries! In this lesson, we cover the principal of specificity and how to create conditional CSS sheets to keep your images beautiful at every size.
We step Aside for a moment and talk about some cool new elements of HTML5. Then we keep the magic rolling and figure out how to float images in both our mobile and desktop views.
Just in case you need us to map it out for you...we quickly review how to add embeds into your code.
Time to tidy-up, make the final adjustments, and streamline our code. And also, apparently, to find multiple ways to enjoy an intermission.
In this lesson, we take a moment to go over the differences between Pixels, Ems, and Rems, and talk about which unit is the most useful for creating responsive code. Hint: No need to ask What's the Frequency, Kenneth or be Losing My Religion over the Em/Rem debate. Everybody hurts.
Can you calculate how easy it is to adjust your rems? Don't worry. We cover everything you need to know to use rems and keep your page on-spec.
Here, we review some of the ways you could have adjusted your code to include rems, as well as how to set the background image for your desktop view.
Congratulations! You made it to the end of this first project. Now, it's time to create a birthday site all on your own.