About
LearnDesk
Learn  
Topics
Topics
Topics
Topics
Topics
Topics
Topics
Teach
  Teach Online
  Schedule
  Items
  Billing
  Users
  Marketing
  Analytics
  Settings
  Change School
Account
 

Creating a Responsive Web Design

Introduction
Introduction to This Course
Preview
About This Course
Preview
Terms and Technology We'll be Covering
Preview
What You'll Need to Complete This Course
Preview
About the Exercise Files
Preview
Preparing the HTML Content and Structure
Setting up Our Project
The HTML Strategy for Our Layout
Creating the Main HTML Containers
Adding Content into the Header
Add Content to Main Section
Add Content to Atmosphere Section
Add Content to the How-To Section
Adding the Navigation
Adding the Footer Content
Creating the Style and Layout with CSS
Importing a Google Font
Defining the Basic Text Styles
Style the Heading and Page Container
Style the Logo and Hero Item
Creating the Button Style
Setting up Three-column Row
Adding Graphics to the Main Section
Clearing Floats with CSS Pseudo-elements
Styling the Atmosphere Section
Styling the How-To Section Aside Elements
Styling the How-To Section Blockquote Element
Adding Content with Pseudo-elements
Styling the Footer
Creating a Menu System with CSS
Re-positioning the Nav
Styling the Nav List-items and Links
Showing and Hiding the Nav Sub Menus
Device Compatibility Options for Nav
Adding Indication Arrows
Making Layout Adjustments for Large and Medium Screens
Making Minor Adjustments for Larger Screens
Making Adjustments for Large Screens
Making Adjustments for Medium Screens
Making Adjustments for Small Screens
Moving the Navigation for Smaller Screens
Adjusting to the Logo and Hero Elements
Rearranging the Main and Atmosphere Sections
Rearranging the How-to Section
Rearranging the Navigation
Adjusting the Spacing of the Navigation and Footer
Making Adjustments for the Smallest Screens
Adjustments for the Header and Hero
Adjusting the How-To Section
Adjusting the Footer
Making Layout and Content Adjustments for Print
Strategy for Printing
Linking a CSS File for Print
Setting up the Base Styles
Setting up the Header
Displaying URLs When Printing
Setting up the Main Section
Setting up the Atmosphere Section
Switching Our Image Tags with CSS
Styling the Footer
Setting Page Breaks with CSS
Where to Go from Here
Where to Go from Here

Creating the Style and Layout with CSS

Creating a Responsive Web Design
By: Chris Converse
Share the link to this page
Copied
  Twitter
  Email
Add the class to your calendar
Print
  Completed

This chapter focuses on transforming our well-structured HTML document into an attractive web layout with CSS.

We'll cover the following topics in this section:
Previous
Next
Home
Search
Saved
Trending Classes
Filter
The latest and the best classes on LearnDesk
Filter by Interest
Close
All Topics
Academics
Business
Creative
Health and Fitness
LifeStyle
Personal Development
Software
Admissions
Engineering
Hardware
Hospitality
Humanities
Chinese
Languages
Maths
Other
Pharma
Research
Science
Social Science
Teaching
Test Preparation
K-12
School
Accounting
Advertising
Analysis
Analytics
Business Communication
eCommerce
Entrepreneurship
Finance
Finance - India
Freelancing
Internet of Things
Digital Transformation
Human Resources
Industry
Management
Marketing
Media
Operations
Other
Project Management
Public Relations
Real Estate
Sales
Strategy
Arts & Crafts
Audio Editing
Audio Production
Dance
Design
Film Production
Music
Photography
Video Production
Writing
Dieting
Fitness
Food Safety
Games
Medical
Medical Professionals
Meditation
Mental Health
Pregnancy
Safety & First Aid
Self Defense
Sports
Beauty & Makeup
Food
Fashion
Gaming
Home Improvement
Parenting
Pet Care & Training
Relationships
Sustainable Living
Travel
Career Development
Learning
Religion and Spirituality
Self-Improvement
Accounting
Amazon Web Services
App Development
Continuous Integration
Backup Software
Business Automation
Computational Fluid Dynamics
Business Intelligence
Computer Aided Design (CAD)
Content Management System
Customer Relationship Management
Database
Data Mining
E-Commerce
Enterprise Asset Management
Enterprise Resource Planning
Game Development
Google Cloud
Linux
Artificial Intelligence
Machine Learning
Master Data Management
Microsoft
Music Software
Network and Security
Open Source
Operating System
Other
Process Management
Productivity Software
Programming Languages
Robotics
Supply Chain Management
Testing
Teaching
Web Development

Sign Up

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.