Building a Responsive Single Page Website in Adobe Muse

Pluralsight

Course Summary

Adobe Muse makes creating responsive websites a simple task with no coding and a "what you see is what you get" interface. This course will help you get up and running with Adobe Muse.

+
Course Description

Creating a mobile website for your company or product is important since the majority of people now view the web from mobile devices. In this course, Building a Responsive Single Page Website in Adobe Muse, you will build an entire single-page responsive website for a fictitious company and place it on a server. You will start with a look at the differences between responsive design, adaptive design, and mobile-first design. You will then get to use Adobe Muse for responsive site creation, including creating breakpoints for a mobile device and a desktop device and creating a typographic logo using fonts from Adobe. You'll also get to export the site in HTML using the built-in file transfer protocol to upload your site to your own hosting service. By the end of this course, you'll be better prepared to create a responsive site using Adobe Muse.

Course Description

Creating a mobile website for your company or product is important since the majority of people now view the web from mobile devices. In this course, Building a Responsive Single Page Website in Adobe Muse, you will build an entire single-page responsive website for a fictitious company and place it on a server. You will start with a look at the differences between responsive design, adaptive design, and mobile-first design. You will then get to use Adobe Muse for responsive site creation, including creating breakpoints for a mobile device and a desktop device and creating a typographic logo using fonts from Adobe. You'll also get to export the site in HTML using the built-in file transfer protocol to upload your site to your own hosting service. By the end of this course, you'll be better prepared to create a responsive site using Adobe Muse.

+
Course Syllabus

Course Overview
- 0m 47s

—Course Overview 0m 47s

Introduction
- 20m 17s

—Introduction 2m 28s
—Responsive Design, Adaptive Design, and Mobile-first 4m 9s
—Breakpoints and Muse 1m 20s
—Where the Photos Came From 0m 45s
—Looking at the Provided Photoshop File 1m 15s
—Organizing the Provided Photoshop File 1m 25s
—Getting the Division Sizes 1m 20s
—Getting the Font Information and Looking at the Copy 2m 33s
—Uploading the Photos to the Creative Cloud Library 1m 46s
—Creating an SVG from an Illustrator File 0m 52s
—Relinking Assets 1m 40s
—Summary 0m 39s

Responsive Site Creation
- 19m 2s

—Introduction 0m 36s
—Setting up the File 1m 12s
—Setting the Working Breakpoints 1m 7s
—Make Chrome Your Default Browser 0m 52s
—Adding the Footer Div 2m 48s
—Adding the Header Div 1m 24s
—Creating the Typographic Logo 1m 29s
—Using Font Awesome 4m 23s
—Setting up the Copyright Year with Javascript 4m 35s
—Summary 0m 32s

Setting up the Single-page Navigation
- 20m 37s

—Introduction 0m 45s
—Adjusting the Header & Footer Elements 2m 49s
—Guiding the Way 2m 41s
—Dropping Anchors 2m 37s
—Using the Menu Widget 2m 18s
—Linking the Menu 1m 3s
—Adding a Menu Bars Icon 2m 36s
—Placing the Accordion Widget 2m 5s
—Linking the Social Media Icons 2m 53s
—Summary 0m 45s

Adding Content for Mobile-first Design
- 30m 40s

—Introduction 0m 53s
—Placing the Hero Photo in the “Hero” Section 1m 39s
—Importing the SVG Logo for the “Hero” Section 2m 9s
—Pasting the Quote in the “Quote” Section 1m 49s
—Creating the Rounded Photo in the “Quote” Section 0m 57s
—Positioning the Triple-photo File 0m 58s
—Adding the Background Photo in the “About” Section 0m 55s
—Setting up the Copy in the “About” Section 2m 4s
—Adding the States Button Widget in the “About” Section 1m 30s
—Constructing the Text Block for the “Beaches” Section 3m 20s
—Adding the Background Photo in the “Beaches” Section 0m 50s
—Placing the Copy in the “Best Beaches” Section 2m 56s
—Placing the Photos in the “Best Beaches” Section 1m 34s
—Installing the Simple Contact Widget for the “Contact” Section 2m 41s
—Exploring the Google Maps Widget for the “Find Us” Section 2m 44s
—Moving the Anchors and Tweaking the Menu Widget 2m 43s
—Summary 0m 51s

Adding Content for Other Device Widths
- 27m 7s

—Introduction 0m 42s
—The 1250 Breakpoint Mess 0m 51s
—Adjusting the Hero Image and the SVG Logo 2m 43s
—Arranging the Quote and Rounded Quote Photo 0m 59s
—Reworking the Triple-photo File 1m 5s
—Altering the “About” Section 2m 4s
—Life's a Beach 5m 32s
—Three Columns for the Best Beaches 6m 36s
—Get a Handle on the “Contact” Section 3m 24s
—Other Breakpoints 2m 24s
—Summary 0m 41s

Publishing the Site
- 7m 40s

—Introduction 0m 25s
—Exporting HTML 1m 5s
—Using the Built-in File Transfer Protocol 2m 18s
—Uploading to Business Catalyst 1m 23s
—Third-party Widgets and Templates 1m 59s
—Conclusion 0m 27s

Course Fee:

USD 29

Course Type:	Self-Study
Course Status:	Active
Workload:	1 - 4 hours / week

This course is listed under Development & Implementations , Networks & IT Infrastructure , Digital Media & Games and Mobility Community

Attended this course? Write a Review

Course Fee:

USD 29

Course Type:	Self-Study
Course Status:	Active
Workload:	1 - 4 hours / week

IT Career Development Platform

Building a Responsive Single Page Website in Adobe Muse

Pluralsight

Course Summary

Course Description

Course Description

Course Syllabus

Course Type:

Course Status:

Workload:

Adobe Muse

JavaScript

HTML (HyperText Markup Language)

Google Maps

File Transfer Protocol (FTP)

Attended this course? Write a Review

Course Type:

Course Status:

Workload: