aka. Yo Teacher, "What's the Plan"?
What is front-end? What is back-end? Let's make sure we understand
You'll need a text editor to write code.
Let's code some HTML to understand why we use it
"We are what we do repeatedly, Excellence is not an act, but a habit" - Aristotle
Add CSS to make background & font colors
... and a cat pic too.
You and I will start our portfolio page website, let's go!
First you'll add the content, and then we'll use the HTML tags to mark it up
Twitter, Facebook, GitHub... link em' up.
CSS goes in its own folder
A little recipe to make a responsive full page background image
We'll need to chose a color palate for your site
Learn how to make transparent objects in less than 2 minutes
Let's add some fancy typography to make our site *POP*
Smooth out those rough edges with border-radius
Now it's your turn. Here's your challenge:
After you learn about the iFrame, you'll be able to embed any YouTube video or Google Map
Coding alone is frustrating! I get it. Here are some "friends" that can offer you assistance...
Let's center our content in a few easy steps
Looking good! Get it live and share your project with the web
CyberDuck will help you upload & download files to the Web
Let's go a bit further with FTP to make live updates
Let's understand the Facebook API so that we can add the Facebook Like Button and Commenting
How to reveal the code on any webpage, and try things out instantly!
Scavenger hunt game!
Let's go over the answers! How did you do?
This is where we learn how to create a page layout for a blog
Our HTML looks good! Now let's dive into the CSS...
A simple trick: if you float your DIVS, always clear.
Here's how you wrap text around an image
Learn the difference between IDs and classes
All HTML tags are either "inline" or "block". Here's why that's important...
Watch to get a deeper understanding of our code, browsers, and normalization. Follow along without coding!
Now I'll leave it up to you to make your own project. Good luck!
You did it! How does everything look? Let's take a minute to compare your code with mine
Add new pages to your site with your very own navigation
Here we'll learn how to use the hover state for a cool button effect
Your challenge: Check out my code and fix the mistakes.
How did it go? If you found at least 10 mistakes, that's great! Let's review...
You'll have to finish watching all the lessons to unlock this step.
Bootstrap helps you code websites quicker! Let's get into it
Let's get our first Bootstrap project underway using the basic template
Want to make columns faster? Do it with the Bootstrap grid system!
Getting a better sense for the language and how everything connects while building a site
You just coded all by yourself! How did it feel?
Already have an account?
Don't have an account yet?