Running time: 92 minutes
Learn to create a web design that automatically conforms itself to multiple screen sizes. This course will show you a step-by-step process for creating a design that rearranges content, resizes elements, and adapts itself based on the size of your visitor's screen size.
Learn how to reposition the main navigation of the site based on the device browsing your website.
We'll create a web design that makes use of HTML5 and CSS3, while maintaining backwards compatibility with older browsers. The secret ingredient of CSS3 that makes this all possible is the media querying capability. CSS media queries allow us to define CSS rules based on screen size, and ultimately give us precise control over how our designs adapt to different screen sizes. In addition to adjusting layout, we'll explore using CSS to define all imagery in our design, allowing us to send optimized imagery along with our customized design experience.
Apply varied amounts of compression to images to optimize download speeds across devices.
Course includes HTML, CSS, and Photoshop templates for use in your own multiscreen web design projects.
This introducion shows this web design final project adapting to various browsers, platforms, and screen sizes.
A quick walkthrough of the files provided with this course.
Contains the final HTML and CSS project files, as well as the pre-slices native Adobe Photoshop templates.
Learn to save individual graphics from a larger canvas in Adobe Photoshop. In addition, learn how the graphics are prepared and optimized for multiple screens and bandwidth considerations.
After creating our HTML5 document, we'll add the necessary markup for the outter-most content containers of our web design.
We'll add sample content into or content containers, including headings, sidebar container, lists, and anchor links for the navigation.
We'll start by creating the CSS rules that willbe used for styling the text and design elements.
Create CSS Rules that manipulate the content containers to replicate the desired layout.
Use CSS3 Media Queries to alter the layout based on small-sized screens.
I learned a lot in this course. Very clear and straight to the point.
I'm sorry, I don't mean to be rude but I'm finding this course quite lackluster in many departments. CSS is edited from scratch to finish without referencing it with the actual changes on the website, thus creating a wider gap between CSS and it's effect, than there had to be - which is a big shame in this very CSS-specific course! Then there is the amount of content: a total of 1,5 hours which only includes one website example. Perhaps responsive web design in essence is not a very big topic by itself, but then there could've been a more in-depth explanation of pros and cons of different layout choices and more hands-on websites from start to finish, exercises, quizzes and whatnot. I have taken coding-related courses which have had TEN TIMES the amount of content for the same price. Had I not gotten this course for 10 bucks during the summersale, I would have felt my hard-earned money had been washed down the drain. At some points I found myself thinking "If this is what it takes to make a 150 dollar course, then why I am not doing it myself". Again, my apologies if this seems harsh.
I don't understand why so many people took this course as it's quite boring and seems just copying what the instructor is coding...
This short course clearly explains everything needed to create a responsive webpage. Here, Chris goes over all the important aspects of making a webpage that adapts to any screen size, using the latest web technologies. Any designer looking to learn how responsive web design works will really benefit from this course.
Subject was dealt with efficiently and clearly. As someone hard of hearing I was able to listen without difficulty.