Responsive Layout

Responsive Layout

Responsive Layout is an Intermediate level course on Web, crafted by the author, Clarissa Peterson. This course is an important pillar for a person who needs to excel in his/her Web talent. It provides you a thorough grip on Web, Web Foundations, HTML, Web, Web Foundations and HTML.

Free Download - Responsive Layout
Author Clarissa Peterson
Publish Date 10/24/2018
Skill Intermediate
Duration 2h 32m
Topic HTML
Video Tutorials 51
Last Update N/A

Responsive design demands that websites adapt to the device they are displayed on. Responsive layout is key, and HTML and CSS now offer features that make it easier than ever to create layouts that will work well on a wide range of devices and screen sizes. In this course, Clarissa Peterson covers the basics of designing responsive website layouts with the latest standards, including CSS Flexbox and Grid. Review the basics, such as working with the position and float properties to adjust the location of elements on screen, and discover how to use media queries to proactively update your layout. Then dive into CSS Grid, including aligning and ordering items within the grid, and find out to work flexbox containers. Finally, learn to build a 12-column design that combines Grid and Flexbox in one layout.

Topics include:

  • What is responsive design?
  • The responsive page structure
  • Accessibility and responsive design
  • Using media queries
  • Designing with CSS Grid
  • Designing with CSS Flexbox

Responsive Layout : Video Lessons

  • Go cross-platform with responsive design49s
  • What you should know1m 7s
  • Viewport2m 22s
  • Required CSS3m 39s
  • Display property2m 25s
  • Positioning4m 59s
  • Floats2m 37s
  • Units3m 33s
  • Responsive design1m 55s
  • Media queries6m 25s
  • Flexbox and Grid1m 9s
  • Accessibility5m 48s
  • Browser support1m 36s
  • Intro to CSS Grid2m 10s
  • Defining rows and columns3m 55s
  • Grid gap1m 52s
  • Sizing rows and columns5m 52s
  • Placing grid items5m 51s
  • Grid alignment overview1m 13s
  • Aligning tracks3m 46s
  • Aligning grid items within tracks2m
  • Aligning individual grid items1m 47s
  • Variable columns4m 45s
  • Grid template areas4m 12s
  • Naming grid lines2m 47s
  • Ordering grid items1m 16s
  • Grid flow and implicit tracks3m 55s
  • Challenge: The rainbow box1m 9s
  • Solution: The rainbow box6m 42s
  • Defining a flexbox container1m 53s
  • Direction3m 36s
  • Wrapping2m 30s
  • Ordering flex items1m 28s
  • Flexbox alignment overview1m 39s
  • Aligning items on main axis3m 16s
  • Aligning items on cross axis3m 35s
  • Aligning lines on cross axis3m 15s
  • Aligning individual flex items1m 38s
  • Distributing space to flex items4m 43s
  • Challenge: Floats to flexbox1m 21s
  • Solution: Floats to flexbox8m 17s
  • Centering content1m 54s
  • 3-column layout with grid areas, part 13m 33s
  • 3-column layout with grid areas, part 24m 10s
  • 3-column layout with flexbox3m 14s
  • 12-column layout setup4m 7s
  • 12-column layout for medium viewports3m 24s
  • 12-column layout for wide viewports2m 58s
  • Next steps35s

Recommended video tutorials from YouTube.

  • Build An HTML5 Website With A Responsive Layout
  • In this video we will build a clean coded responsive mobile friendly HTML5 website for a fictional web design company. We will go over semantic HTML tags like ...

  • DateTime : 2016-12-25 16:11:06
  • Source : Traversy Media
  • Building Responsive Layouts
  • On this episode of Designing in the Browser, we're going to take a look at building responsive layouts with our host Una Kravets. PUBLICATION PERMISSIONS: ...

  • DateTime : 2019-12-09 19:11:34
  • Source : Coding Tech
  • Grid CSS Responsive Website Layout - "Mobile First" Design
  • Add MailTag to your browser (it's free) ? Thank you MailTag for sponsoring this video In this video we will build a "mobile first" single page ...

  • DateTime : 2017-11-10 19:57:07
  • Source : Traversy Media

Please consider buying this course - Responsive Layout directly from the author - Clarissa Peterson. This way you could help the author create more great content, also you may get personal help.

The links being shared are only for poor students who really cannot afford to pay. So, if you are capable of paying please do consider it once before trying the free download links.

Categorised in: , ,

Kindly note, we have recently migrated to a new server. In case of download links not working at all it means that we are undergoing maintenance at the backend. In such case please try after 24 hours. Also make sure your internet connection is persistant else the file may endup corrupted.