Build a Website with No Code | Learn Adobe Muse Premium class

John Ramos, Teacher at Muse For You

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
32 Videos (6h 8m)
    • Trailer

    • Welcome

      2:16
    • Download the Adobe Muse Free Trial

      1:38
    • What is Adobe Muse?

      5:12
    • Overview of Web Design and Development - HTML5, CSS3, WordPress, and Adobe Muse

      20:09
    • User Interface

      18:23
    • Creating a Menu

      Muse For You | Learn Adobe Muse | Creating a Menu.muse
      20:07
    • Introduction to Fonts in Adobe Muse

      Muse For You | Learn Adobe Muse | Introduction to Fonts.muse
      7:13
    • Images in Adobe Muse

      Muse For You | Learn Adobe Muse | Images.muse
      14:27
    • Scroll Effects in Adobe Muse

      Muse For You | Learn Adobe Muse | Scroll Effects.muse
      19:51
    • Changing the Color of a Graphic in Adobe Muse

      Muse For You | Learn Adobe Muse | Changing the Color of a Graphic.muse
      5:14
    • Composition Widgets in Adobe Muse

      Muse For You | Learn Adobe Muse | Composition Widget.muse
      18:54
    • Styling Your Contact Form in Adobe Muse

      Muse For You | Learn Adobe Muse | Styling Your Contact Form.muse
      14:32
    • Search Engine Optimization in Adobe Muse

      Muse For You | Learn Adobe Muse | Search Engine Optimization | SEO.muse
      30:25
    • Colors and Gradients in Adobe Muse

      Muse For You | Learn Adobe Muse | Colors and Gradients.muse
      6:39
    • Hover Effects in Adobe Muse

      Muse For You | Learn Adobe Muse | Hover Effects.muse
      16:02
    • Paragraph Styles in Adobe Muse

      Muse For You | Learn Adobe Muse | Pargraph Styles.muse
      6:07
    • Layers Panel in Adobe Muse

      Muse For You | Learn Adobe Muse | Layers Panel.muse
      9:32
    • Slideshows in Adobe Muse

      Muse For You | Learn Adobe Muse | Slideshows.muse
      14:39
    • Borders (Stroke) in Adobe Muse

      Muse For You | Learn Adobe Muse | Borders (Stroke).muse
      6:23
    • Hyperlinks in Adobe Muse

      Muse For You | Learn Adobe Muse | Hyperlinks.muse
      10:07
    • Effects in Adobe Muse

      Muse For You | Learn Adobe Muse | Effects.muse
      5:26
    • Aligning Objects, Guides, and Rulers in Adobe Muse

      Muse For You | Learn Adobe Muse | Align Tool.muse
      8:10
    • Opacity Scroll Effect in Adobe Muse

      Muse For You | Learn Adobe Muse | Opacity Scroll Effect.muse
      16:56
    • Slideshow Scroll Effect in Adobe Muse

      Muse For You | Learn Adobe Muse | Slideshow Scroll Effect.muse
      10:01
    • Creating an Online Store in Adobe Muse

      Muse For You | Learn Adobe Muse | Online Store.muse
      11:52
    • Adding a Youtube Video and a Youtube Playlist

      Muse For You | Learn Adobe Muse | Youtube Videos and Playlists.muse
      11:48
    • Adding a MailChimp Form in Adobe Muse

      Muse For You | Learn Adobe Muse | Mailchimp Form.muse
      10:44
    • Styling Your MailChimp Form in Adobe Muse

      5:29
    • Uploading Your Website to the Web in Adobe Muse

      10:08
    • Box Particle Scroll Effect

      Muse For You | Learn Adobe Muse | Box Particle Scroll Effect.muse
      17:49
    • Slanting Panels

      Muse For You | Learn Adobe Muse | Slanting Panels.muse
      11:17

About This Class

c52ed328

Who should take this class?

Anyone who's looking to make awesome websites without code.  You don't need any prior knowledge of web design or web development to start taking my class.

What Specifics Topics will be covered in this class?

1. What is Adobe Muse?

  • A Quick Overview of Adobe Muse

2. Overview of Web Design and Development

  • HTML
  • WordPress
  • Adobe Muse

3. User Interface

  • Website Setup
  • Master Pages
  • Plan View
  • Design View
  • Preview
  • Publish
  • Text
  • Color
  • Swatches
  • States
  • Widgets Library
  • Layers
  • Library
  • Assets
  • Glyphs
  • Bullets
  • Wrap
  • Toolbar

4. Creating Menus

  • Horizontal Menus
  • Vertical Menus
  • Sticky Menus (Menus that stick to the top when the user scrolls)
  • Anchor points to create a scroll effect on single pages when the user clicks a menu option
  • Adding color and changing the text on the menu
  • Creating manual menus instead of Top Level Page menus

5. Fonts

  • Changing fonts
  • Adding new fonts from Adobe's Typekit
  • Web Fonts vs. System Font
  • Fonts best practices
  • Adding your own custom web font.
  • Adding a custom web font from Chank Fonts
  • How to check if you are using a web font vs. a system font by using the code inspector in your browser.

6. Images

  • Importing images directly from your computer
  • Filling a rectangle with an image
  • Fitting and position of an image when inside of a rectangle
  • JPG vs. PNG vs. SVG
  • Adding Alternative text to your image
  • Image Size (kb, mb)
  • Updating images through the assets panel

7. Scroll Effects

  • What is a scroll effect?
  • Normal Scroll Speed
  • Key Position
  • Up and down and left and right scroll effects
  • Top of the browser
  • Scroll Space
  • Creative ways to use scroll effects

8. Composition Widgets

  • What is a composition widget?
  • Blank Composition
  • Featured News Composition
  • Lightbox Display Composition
  • Presentation Composition
  • Tooltip Composition
  • Creative ways to use a composition widget

9. Contact Forms

  • Simple Contact Form vs. Detailed Contact Form
  • Styling your Contact Form
  • Adding ReCaptcha to your Contact Form
  • Adding Hover, Shadow, and Glow effects to your Contact Form
  • Contact Form Options
  • How to have e-mail from your Contact Form go to your e-mail inbox

10. Search Engine Optimization (SEO)

  • What is Search Engine Optimization?
  • H1-H6 Tags
  • Alternative Text on images
  • Naming images - best practices
  • Website Title
  • Website Meta Description
  • Adding a Suffix Title and a Prefix Title in Master Pages
  • Using the Master Pages to add Title and Description to all pages.
  • Master Page SEO vs. Single Page SEO
  • Web Fonts vs. System Fonts (SEO Best Practices)

11. Colors and Gradients

  • Eyedropper tool
  • Swatches Panel
  • Fill Colors
  • Adding Gradients
  • Converting icons to a different color in Adobe Muse

12. Hover Effects

  • States Panel
  • Normal State
  • Roll Over State
  • Mouse Down State
  • Active State

13. Paragraph Styles

  • Paragraph styles panel
  • Creating paragraph styles
  • Applying paragraph styles to specific parts of your website

14. Layers Panel

  • How to re-arrange elements in the Layers Panel
  • Creating new Layers
  • Grouped elements in the Layers Panel
  • Bring to Front and Bring to Back using the Layers Panel
  • Bring to Front and Bring to Back by right clicking on an element
  • How elements are ordered in the Layers Panel
  • How to move elements to different Layers

15. Slideshows

  • How to load images into your Slideshow
  • Image dimensions
  • Basic Slideshow
  • Blank Slideshow
  • Full Screen Slideshow
  • Lightbox Slideshow
  • Thumbnails
  • Auto-Rotate through Slides
  • Slideshow Rotation Speed

16. Borders (Stroke)

  • Stroke Width
  • Stroke Color
  • Stroke Alignment
  • Stroke Weight
  • Adding a Stroke to the left, right, top, or bottom of your element
  • How to remove the stroke from elements when you initially create them (Specifically Rectangles)

17. Hyperlinks

  • Changing link styles
  • Adding Hyperlinks to words and elements
  • How to open link in a new window or tab

18. Effects

  • Shadow Effect
  • Bevel Effect
  • Glow Effect
  • Opacity

19. Aligning Objects, Guides, and Rulers

  • Align Tool
  • Adding Rulers and Guidelines
  • Using Adobe Muse' built in guidelines

20. Opacity Scroll Effects

  • Understanding the Opacity Scroll Effect
  • Creative ways to use the Opacity Scroll Effect
  • Scroll Effects Panel

21. Slideshow Scroll Effect

  • Triggering slides to change when the user scrolls the website
  • Scroll Effects Panel

22. Edge Animate

  • Creating an animation in Edge Animate
  • Adding the animation from Edge Animate into Adobe Muse
  • Syncing the timing of when the animation plays in Adobe Muse
  • Scroll Effects Panel

23. Social Media

  • Adobe Muse Badge
  • Facebook Comments
  • Facebook Follow
  • Facebook Like
  • Google Maps
  • Linkedin
  • Paypal
  • Pinterest
  • Twitter Follow
  • Twitter Tweet
  • Vimeo
  • Youtube

24. Creating an Online Store

  • Creating a PayPal Account
  • Adding a Paypal button to your website
  • Setting the price for your product
  • Setting different options for your product

25. Adding a Youtube Playlist

  • Creating a playlist in Youtube
  • Adding a Youtube playlist to your website
  • Changing the width and height of your playlist in Adobe Muse

26. Adding a Mailchimp Form

  • Creating a Mailchimp account
  • Creating a Mailchimp form
  • Adding the Mailchimp for to your Adobe Muse website

27. Adding Code

  • Inserting HTML
  • Adding HTML to the head tag of your website

28. Google Analytics

  • Creating a Google Analytics Account
  • Adding the Google Analytics code to your website

29. Creative ways to use Scroll Effects

  • Many uses of the Scroll Effects
  • Unique ways to use Scroll Effects

30. Creating a website for Tablet Devices

  • Adaptive Design
  • Converting your existing website to work on Tablet Devices
  • The Tablet option in Adobe Muse

31. Creating a Website for Mobile Devices

  • Adaptive Design
  • Converting your existing website to work on Mobile Devices
  • The Phone option in Adobe Muse

32. Header and Footer

  • What is a header?
  • What is a footer?
  • Footer check box in Adobe Muse

33. FTP/Upload to Web Server

  • What is an FTP?
  • What is hosting?
  • Best hosting services
  • What is a server
  • Information you need to upload your site to the web/internet.

Class Project:

The Class Project will be creating your own website with the skills taught in this class.

22 of 23 students recommendSee All

Easy and essential class for MUSE user.
Very useful tutorial from A to Z! Enough to get a good start! Well done John
Maxim Kostenko

Career change from Desktop Publishing to Marketing

Great class! I enjoyed it. couple of long lessons, but worth the time.
Deivid Valdez

Design hard - live healthy.

1,282

Students

3

Projects

John Ramos

Teacher at Muse For You

Hi!  My name is John and I am a web developer.  I've spent countless hours learning code and trying to perfect the world of web design and development.  Then one day I decided to download a program called Adobe Muse.  It changed everything.  I was no longer trying to write out all this complex code to achieve a trivial effect on my website.  Adobe Muse saved me a lot of time, energy, and headaches!  Don't get me wrong I still love to code, but now that I have Adobe Muse it takes me about 99% less time to create a beautiful, gorgeous, impressive, colorful, and outstanding website!  All of this without any knowledge of code whatsoever.

You mean I don't need to know the history of web design and development to create a website? YES

You mean I don't need to learn all those tags and functions that go into creating a website? YES

You mean I can create the website I've been dreaming about for years but never did because a web developer was charging me 5,000 to do it? YES YES YES

I've grown quite a following on youtube and recently was contacted by Skillshare to share my videos and expertise with you.  Whether you are a beginner with no prior knowledge of web design, or an advanced web designer/developer, these classes are for you!  The beginner will be creating amazing websites within a few weeks or less, and the skilled web developer will have a new tool in their arsenal.

So what are you waiting for?  Start my classes today and see for yourself!

O, and please share your awesome websites.  I love being inspired just like everyone else!