Responsive Web Design will teach you best practices for building responsive websites that adapt to different devices and user behaviors.
At the end of this course you’ll have a responsive portfolio website you’ve built from scratch. You will learn the essential elements of responsive web design: designing with ﬂexible grids; creating layouts which incorporate typography and fluid media; using CSS media queries; responsive web typography; the Mobile First approach; in-browser design, tools, and resources; and Responsive Web Design workﬂows.
- Lesson 1: What Is Responsive Web Design?
An introduction to Responsive Web Design. We'll explore examples and discuss context, but you won't begin coding yet.
- Lesson 2: Setting The Stage With HTML5 And CSS3
You will learn the HTML5 and CSS3 syntax that is the most relevant to the sample portfolio site that is being used for the course. Coding begins in this lesson, and if you’re confident in your HTML5 and CSS3 knowledge you could skip to Chapter 3, but be aware that the structural logic of the final responsive layout begins here.
- Lesson 3: Mobile First
Learn about the Mobile First approach, which forces designers and developers to focus on the content and user experience of their websites in all contexts. This chapter involves the coding of a single column layout designed for the smartphone.
- Lesson 4: CSS3 Media Queries
Understand how media queries are used to adjust the design and layout of a website as the viewport changes. From a coding perspective you will be adding media queries to your single column smartphone layout and setting the stage for the eventual fluid grid layout.
- Lesson 5: Responsive Typography
The heart of any website is content, and more specifically: text. This lesson discusses the challenges of managing the properties of line-height, line length, and font-size in a responsive layout. This lesson represents a deep dive into the code as you create a baseline grid and typographic scale that will serve as a foundation for your page.
- Lesson 6: Using A Fluid Grid
Learn about the role of grid layout in web design in general and responsive layout in particular. Within the code, you will build upon your core mobile layout to create a flexible three-column design with consistent gutters.
- Lesson 7: Responsive Layout: Stay Flexible
Page components such as tables and forms work well on wider desktop screens, but present challenges on the smaller screen. In this lesson you will explore how to look for solutions to common layout problems using responsive design patterns. You will get a chance to solve one particular problem as you integrate a responsive form into your existing design.
- Lesson 8: Responsive Images
Learn how to add images that work across the range of devices from the smallest phone to the largest high-definition (Retina) displays. In the coding example, you will learn a few techniques (including the Picturefill technique) that deliver the highest-quality image to your users while simultaneously avoiding performance penalties.
- Lesson 9: Responsive Navigation Methods
Take a look at the unique challenges and potential solutions involved with responsive navigation. In the code, you will get a chance to create a responsive toggle menu that conserves space on smaller screens and expands to full size when possible.
- Lesson 10: Optimization And Performance
When you begin treating performance as another component of design such as layout or color, things fall into place. In this lesson, you will identify potential performance issues with your site using free online tools and then explore ways to optimize your assets in order to improve performance.
- Lesson 11: Grid Systems
Now that you have learned how to build a responsive layout from scratch, it’s time to start looking at grid systems as a way to rapidly prototype responsive sites and/or begin using a grid system for production. You will walk through an overview of popular systems including Zurb Foundation, Twitter Bootstrap, and Gridset.
- Lesson 12: Responsive Web Design Workflow
Putting it all together, this lesson compares the classic workflow of a web designer to that of someone who designs and builds responsively. Concepts, tools, and best practices will be discussed. Specifically, you will get a quick look at the benefits of using a CSS preprocessor such as Sass.
The web today is almost unrecognizable from the early days of white pages with lists of blue links. Now, sites are designed with complex layouts, unique fonts, and customized color schemes. This course will show you the basics of Cascading Style Sheets (CSS3). The emphasis will be on learning how to write CSS rules, how to test code, and how to establish good programming habits.
Drupal is a free & open source content management System (CMS) written in PHP & distributed under the GNU License. Used as a back end system for at least 1.9% of all websites worldwide used in personal blogs, political, corporate & government sites including NASA, whitehouse.gov, & data.gov.uk.
Explore how writing style, web design and structure can grab the attention of and engage online readers. Understanding the difference between writing for print versus writing for the web starts with learning about how readers behave differently online. This subject brings to light how to accommodate the needs of online readers through web design, writing style, structure and search engine optimisation.
Find out how content can impact the reader's experience, as well as how the reader's experience can impact the way they interpret online content.
It used to be the case that everyone viewed webpages on about the same size screen. But with the explosion of the use of smartphones to access the Internet, the landscape of design has completely changed. People viewing your site will now expect that it will perform regardless of the platform (smartphone, tablet, laptop, or desktop computer). This ability to respond to any platform is called responsive design.
Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have a page, what do I do now?).