Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
We understand first-hand how frustrating it can be trying to learn how to use new technologies in a short amount of time. And because mastering a new skill isn't usually easy, we decided to do something about that by breaking this course down into easily consumable bite-sized chunks that make the concepts not only super clear, but also really memorable - pretty quickly.
Instead of just showing you how to "paint by numbers", like most courses do, we'll be showing you why the code works like it does so you'll be able to actually take that knowledge and apply it anywhere.
That means you'll be able to do awesome things like being able to bootstrap your business, market on a shoestring budget, or just learn a highly marketable skill to boost your resume or CV - all in about about 3 hours!
Over the course of these easy to follow, bite-sized video lectures you'll gain a strong foundation in responsive web design, wireframing, HTML5 and CSS3 – even if you've never tackled any of these topics before.
We'll walk you through it, step-by-step, as you create your own 100% custom landing page, that's search engine friendly and whose content and layout is completely under your control. And because we take the time and care to explain to you not just “the how" but also “the why" behind the code, you'll finish with a really deep understanding of how to apply what you've learned with us to any project you take on in the future.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Introduction|
Why are you taking this course? Find out right here. If you're short on time and big on ambition… you're in the right place.
|Did you know that everything you need to build awesome, responsive webpages is free? We'll show you the tools we use to build our own projects.|
|Section 2: Wireframing & Setting the Stage|
|Never heard of wireframing? We'll introduce you to this easy, yet powerful way of giving form to your ideas. And trust us, you'll never start a project without using this powerful design technique again.|
Time to get our hands dirty… by sketching out our wireframe.
Every file needs a home. We'll show you where to put everything so your projects just works.
|Section 3: HTML – The Bare Bones of Your Project|
Learn all about HTML tags, and make friends with the <h1> and <br> tags. We promise, you'll like them.
Get a firm grip on how to work with an HTML page's head and body sections. We'll also show you how to use the <html>, <head>, <body>, and <title> tags. They're important.
What's the difference between a block and inline tag? We'll show you. You're also going to get acquainted with the <div> and <a> tags, and learn just where to use them.
We're going to conquer the entire HTML body section of our page, really quickly. Along the way, you'll learn all about “content wrappers” and HTML tag attributes, in addition to the <img>, <p> and <li> tags. In case that's not enough, we're also going to show you a quick and simple way to get an interactive Google map embedded into your page, as well as all the social buttons you'll ever need - using free tools!
|Section 4: CSS Basics|
We'll unravel the mysteries of Cascading Style Sheets, or CSS, in this section and you'll learn exactly what they are and how to use them to make your web page look stylish, beautiful and professional.
|Ever wonder how the browser tells CSS code apart from HTML code? Wonder no more. We'll explain it all and show you three different ways to introduce CSS into your web page, as well as which method to choose to best suit your needs.|
|Learn all about the three main building blocks of CSS and when to use each of them: Tag selectors, Class selectors, and ID selectors.|
|Don't stress about all the new vocabulary you've just learned. We're going to recap it for you right here. We'll even throw in some background music and a sneaky raccoon to entertain you.|
|Learn all about “CSS resets”, why you should care about them and where to find the best free version that you can use right now.|
How many colors can you use in your web designs? Millions. We'll show you exactly how to color in your design using the three different methods available to you in CSS to get just the color and shade that's perfect for you. Learn how to use the CSS 'color' rule with plain English words, hex codes, or RGBA values.
|Family is important… in CSS. We'll show you how to use different fonts for different text in your webpage using the 'font-family' CSS rule. You'll also learn all about web fonts and how to import them from the Internet (yup, for free).|
|Section 5: Putting CSS to Work!|
|You're going to learn how to link an external CSS file to your HTML page within your code's <html> tag, so you can easily swap out entire style sheets and re-theme your website faster than you can say 'style sheets'! You'll also see how to make the best use of absolute and relative URL paths.|
It's time to style your <body> tag via CSS. Never suffer distorted background images again by learning how to properly use a background image via the 'background-image' and 'background-size' CSS rules. You're also going to see exactly how to set font colors via the 'color' rule, font sizes via the 'font-size' rule, and text line spacing via the 'line-height' rule. There's no faster way to improve your style than watching this lecture!
Content wrapper? What's wrapped inside? Chewy content goodness, that's what! We'll show you how to quickly give yourself a handy visual assist while coding by using the 'border' rule to make your invisible divs temporarily visible while you're building. We're also going to take you through the 'max-width' and 'margin' CSS rules as well so that your content will be centered and sitting pretty, just where you want it.
Everyone likes to be properly introduced using their correct title. Your responsive web page is no different. In this lecture we'll show you exactly how to style your page's title using the <h1> tag, and we'll get you really comfortable with the 'margin' and 'text-align' CSS rules along the way. Last but not least, you're going to learn all about the CSS 'width' rule and how you can apply it to your images to quickly make them responsive and scalable.
When is a box a box? When we create a 'box' class of course! You're going to see exactly how to create and style up the 'box' class that lets all the boxes on your webpage share the same rounded corners - and you'll only have to set it up once! Then we'll introduce you to the 'announcement' ID where you'll see for the first time how to apply multiple attributes to the same HTML tag get exactly the look you want with as little coding as possible. And did we mention? You'll also get to see just how the 'border-radius', 'background', 'padding', 'box-sizing', and 'font-weight' CSS rules work. There's so much CSS goodness in this lecture.
|It's time to style up our two main content boxes on the left and right of our design. We'll show you a quick trick using the 'min-height' CSS rule to make sure your boxes will always be proportional to each other.|
Ever wonder how to get different webpage elements positioned just right, when going from left to right? Then you're in the right place! In this lecture you'll see how to use CSS floats using the 'float' rule, as well as where and how you can apply them to position your design elements perfectly, and responsively. We'll also demonstrate how you can fix a really common bug that happens when using floats by taking advantage of the CSS 'clear' rule.
We'll walk you through, step-by-step, exactly how to add some unique style choices to the blue title bands at the top of your left and right content boxes. By the time this lecture is done you'll know exactly how to use the 'border-top-left-radius' and 'border-top-right-radius' CSS rules. We'll also add to your bag of CSS tricks by showing you how to use negative margin values to cancel out bits and pieces of your code, but only where you want to, in order to really fine tune your design.
This lecture is list-tastic! You're going to learn all about lists, how they work, what they can be used for (hint: more than just listing things), and how to get them looking just how you want by using the 'list-style-type' CSS rule.
|Responsive design doesn't have to be hard. Stop searching for a great explanation for how it all works and watch this lecture NOW! You'll learn all about the powerful @media() CSS tag and how you can use it to conditionally turn on and off any given set of CSS rules… automatically. This is the powerful technique that will let you build responsive webpages that look great on all devices.|
|Hold on tight… you're almost done! We're going to show you how to finalize the HTML code for your social media icons and style them to suit your taste using CSS. And last, but not least, you'll put the finishing touches on your web page, to get your HTML and CSS code shipshape and looking totally professional. We'll even show you how to use two more CSS rules before we're done, 'vertical-align' and 'display'. Wow!|
Whether you are looking to enhance your career, polish up some rusty skills, or finally launch that business you have been dreaming about, we believe our selection of short, “stackable" tutorials will give you the skills and confidence you need to succeed in whatever your passion is.
Petr is originally from a small town outside of Prague, in the Czech Republic. Currently living in NYC, he is both a physics researcher, engineer, and a talented developer. Passionate about the sciences and their application in technology, he has built everything from e-commerce websites to autonomous flying drones. He is experienced in over a dozen programming languages and developmental frameworks and enjoys tutoring and helping others learn as much he as does creating amazing things.
James is a multi-hat wearing problem solver with a talent for taking concepts from idea to reality. An entrepreneur and consultant with a background in finance, real estate and technology startups in New York and Europe, James enjoys sitting at the crossroads of technology and business - leveraging elements of each to advance the other. He lives in New York with his wife, new son and a 19lb blonde norwegian forest cat named Lars.