Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Responsive Design

HTML5 + CSS3 Responsive Web Design

Leap into the world of adaptive web design with HTML5 & CSS3 Responsive Web Design!
Rating: 4.4 out of 54.4 (9 ratings)
47 students
Created by VTC Software Training
Last updated 9/2013
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • By the end of this VTC course, you'll have three beautiful designs, each one displaying automatically depending on the device being used to view it.

Course content

14 sections • 119 lectures • 8h 40m total length

  • Preview02:49
  • Preview03:57
  • Preview03:53
  • Preview03:34

  • Preview04:38
  • Preview06:46
  • Preview06:57
  • Preview05:59
  • Preview07:35
  • Preview02:06
  • Preview03:24
  • Preview04:58
  • Preview06:37
  • Preview05:34
  • Preview02:51
  • Preview03:07
  • Preview03:57
  • Preview04:19
  • Preview03:10
  • Preview05:22
  • Preview07:04

  • Preview03:16
  • Preview04:20
  • Preview05:00
  • Preview03:10
  • Preview05:35
  • Preview04:28
  • Preview06:47
  • Preview04:32
  • Preview04:53
  • Preview03:09
  • Preview06:51
  • Preview06:57
  • Preview06:57
  • Preview07:21
  • Preview04:33
  • Preview03:41
  • Preview05:31
  • Preview04:01
  • Preview04:13
  • Preview02:12
  • Preview05:48
  • Preview03:44

  • Preparing the Wireframe for Import
    02:53
  • Bringing the Wireframe Into Photoshop
    03:57
  • Extracting the Header
    03:42
  • Pulling Out the Menu and Slideshow
    02:26
  • Finishing Up the Wireframe BreakUp
    02:40
  • Formatting the Header
    04:58
  • Building the Navigation Menu
    03:45
  • Formatting the Slideshow
    03:20
  • Setting Up the First Content Box
    06:13
  • Finishing Up the Content Boxes
    06:26
  • Formatting the Footer
    02:57

  • Bringing the Wireframe into Photoshop
    06:03
  • Extracting the Header and Menu
    03:08
  • Pulling Out the Content Boxes
    02:14
  • Finishing Up the Wireframe Breakup
    01:23
  • Formatting the Header
    03:47
  • Building the Navigation Menu
    06:33
  • Readjusting the Layout
    07:17
  • Setting Up the First Content Box
    05:58
  • Formatting the Second Content Box
    06:06
  • Finishing Off the Design
    03:37

  • Setting Up the HTML Page
    07:10
  • Setting Up the External Style Sheet
    05:49
  • Testing the External Style Sheet
    02:42
  • Building the Three Media Queries
    05:40
  • Testing the Media Queries
    05:35
  • Using Commenting to Simplify the View
    04:21

  • Building the Main Layout Structure
    07:17
  • Wrapping the Code into a Container Div
    03:20
  • Building the Main Navigation Menu
    06:45
  • Structuring the Content Boxes
    03:19
  • Building the News Feed Area
    03:55
  • Setting the Footer Structure
    02:20

  • Getting Started with the High Res Layout
    07:26
  • Formatting the Layouts Header
    03:58
  • Formatting the Menu pt. 1
    02:52
  • Formatting the Menu pt. 2
    04:21
  • Formatting the Slideshow
    03:32
  • Setting Up the Content Boxes
    04:20
  • Applying Formatting to the News Feed
    02:42
  • Finishing Off with the Footer
    02:21

  • Setting Up the Medium Resolution Layout
    04:25
  • Formatting the Header
    01:58
  • Formatting the Navigation Menu
    03:23
  • Applying Formatting to the Slideshow
    04:14
  • Setting the Content Box Formatting
    02:39
  • Adjusting the News Feed
    02:17
  • Finalizing with the Footer
    02:48

  • Getting Started with the Low Res Layout
    03:39
  • Formatting the Header and Nav Menu
    03:44
  • Formatting the Content Boxes
    03:06
  • Applying Formatting to the News Feed
    01:27
  • Finishing Up with the Footer
    03:19

Requirements

  • Adobe Illustrator and Adobe Photoshop (recommended)

Description

With Geoff Blake as your guide, you'll learn how to build wireframe responsive designs in Adobe Illustrator, apply design and graphics to them in Photoshop, and then rebuild the designs in code. Discover the power of CSS3's media queries to target various devices and resolutions, including mobile, tablet, and desktop browsers. Learn how to extract Photoshop content for use in your designs, insert it with modern HTML5, and control it with a variety of CSS3 techniques. By the end of this VTC course, you'll have three beautiful designs, each one displaying automatically depending on the device being used to view it. This title is a self-paced software training course delivered via pre-recorded video. We do not provide additional information outside of the posted content.

Work files for this course can be downloaded from the first lecture.

Who this course is for:

  • Web Designers with working knowledge of HTML

Instructor

VTC Software Training
Affordable, Comprehensive Software Training
VTC Software Training
  • 4.2 Instructor Rating
  • 392 Reviews
  • 3,385 Students
  • 30 Courses

  VTC is one of the world's leading producers of online computer and software training, supplying richly diverse courses of informative and inspiring tutorials. Created on the idea that anyone should have the ability to learn to use computer software on their own time, VTC has produced tens of thousands of hours of extraordinarily valuable, insightful, and easy to follow tutorials and delivers them for a fraction of the cost of other training methods. Our training authors are some of the most accomplished in their respective fields. The tutorials that could make the difference in your new job, promotion, or school advancement are always available and only a click away. 

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.