Introduction to CSS3 and HTML5
HTML5 and CSS3
Learn what HTML5 and CSS3 are all about and why you'll want to learn to use them. Then, discover how CSS lets you create design elements that give your site a consistent look, feel, and unique identity.
Learn how background colors, photos, textures, patterns, and gradients can add visual interest to your website. Then, learn how CSS properties make it easy to add professional polish to your design with borders, rounded corners, and drop shadows.
Learn about the many ways you can style your text with CSS, including fonts, text shadows, and more. You will also examine the primary tags for text markup in HTML. Then, discover how pictures add visual interest to any website, and discuss ways you can float, position, and size pictures using CSS.
Learn how style classes and links can boost your creativity and assist the management of your styles. Then, learn the latest techniques for playing sounds and showing videos on your site.
Learn why HTML tables are the perfect tool for displaying information in rows and columns, like tables you see in print. You will also learn techniques for styling tables with traditional CSS, as well as brand new CSS3 techniques that really make tables shine with minimal coding! Then, solve the mysteries of the ever-important CSS Box Model and overcome potential frustrations.
Learn the new set of layout tags in HTML5 and discover how to make them work in new and older browsers alike. You will also acquire some professional-grade techniques for styling layout tags with CSS. Finally, learn about adding side columns to your layout and allowing vertical navigation with links suitable for a mouse, fingertip, or stylus on a mobile touch screen.
Discover how you can use jQuery to create collapsible panel and accordion controls. And finally, you'll learn how to find jQuery plugins and incorporate them into your own site.
Responsive Web Design
In this first lesson, you will take a look at exactly what responsive web design is, why it is necessary, and the basic concepts in building responsive websites. You will examine some models of responsive design and see what you can learn from them. Then you will learn how to apply relative units of measurement to optimize the display of images and text in different viewports and environments.
In this lesson, you will investigate how menus function differently depending on the browsing environment, and you will find out how to design responsive menus that adapt to full-screen desktop or laptop environments as well as smartphones and tablets. You will learn to apply CSS3's media feature. Then you will discover responsive color schemes and fonts that will ensure visibility and readability in a wide range of viewing environments. You will also learn how to test color schemes for contrast value, and you will explore Google Fonts as a source of downloadable Web fonts compatible with mobile devices.
Explore a basic strategy of applying a 3-2-1 framework with stacked columns. You will learn how to use media queried, HTML5's semantic elements, and logical operators to build pages that are user-friendly in devices of all sizes. Then you will learn a simple way to collapse content into expandable blocks for mobile users, but present an alternate page layout for full-sized viewports. You will use the HTML5 <details> and <summary> tags to make content that users can expand or collapse on a small screen. You will also use media queries to present the content in full-size viewports in columns rather than the expandable and collapsible blocks that work in mobile devices.
This lesson will show you an array of strategies for making sure photos aren't slowing down your responsive sites. You will learn to compress images to reduce file size while maintaining image quality, build a cache file to make photos download more quickly for users on return visits, and manage image downloads with jQueary widgets. You will also learn what video hosts work best when designing responsive sites. Then you will learn to create and embed SVG (Scalable Vector Graphics) images, and scale them responsively.
In this final lesson, you will expand your capacity to provide mobile users with an app-like experience. This means you will integrate more styling and interactive animation. You will do this by connecting with a set of widgets and animated elements from the jQuery Mobile framework. You will employ media queries to keep the full-sized viewport experience friendly. Then you will continue to work with the jQuery Mobile framework to build a Web app welcome page that can serve as a mobile-friendly entryway into your site. You will learn to define and apply a media query so that users coming from laptop or desktop sized viewports see a more traditional navigation bar that works well with large screens. You will build a home page to show off all the projects you have created in this class.