Setting Up

This article provides a detailed tutorial on how to set up and use class files for a Mobile & Responsive Web Design

Learn how to properly setup and manage your class files for a Mobile & Responsive Web Design tutorial. This guide not only provides step-by-step instructions on file management, but also sets the foundation for your success in the class and in your future career.

Key Insights

  • The tutorial stresses the importance of setting up your class files before starting any exercises.
  • Students will be editing class files throughout the workbook, but they're advised not to edit the original files.
  • Instead, the tutorial recommends making a personal copy of the class files for editing purposes.
  • There are specific instructions provided for both Mac and Windows users on how to duplicate or copy the class files.
  • After copying or duplicating the folder, it should be renamed; the suggested format is 'yourname-Mobile and Responsive Class'.
  • Having a personal, properly managed set of class files ensures a smoother learning experience and develops crucial skills for future career endeavors.

This exercise is excerpted from Noble Desktop’s past web design training materials. We now teach Figma as the primary tool for web and UX & UI design. To learn current skills in web design, check out our Figma Bootcamp and graphic design classes in NYC and live online.

Class Files Setup

  1. Open the Class Files Folder

    Located on your Desktop.

  2. Select Mobile and Responsive Class Folder

    Single click to highlight.

  3. Duplicate It

    Mac: Cmd-D. Windows: Ctrl-C then Ctrl-V.

  4. Rename to yourname-Mobile and Responsive Class

    Keeps your edits separate from the original.

Complete the following setup prior to beginning any exercises.

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Setting up Your Class Files

Creating Your Own Copy of Class Files

Throughout this workbook you will be editing class files that we have prepared for you. Instead of editing the originals, we’ll have you make a copy just for yourself to edit.

Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.
  1. If you have any windows open, minimize or hide them so you can see the Desktop.
  2. Open the Class Files folder.
  3. Follow the appropriate Mac or Windows instructions below:

    Mac:

    • Click once on the Mobile and Responsive Class folder to select it.
    • Press Cmd–D to duplicate it.
    • Rename the duplicate folder yourname-Mobile and Responsive Class.

    Windows:

    • Click once on the Mobile and Responsive Class folder to select it.
    • Press CTRL–C to copy it.
    • Press CTRL–V to paste it.
    • The new copy may be at the bottom of the list of folders. Rename it yourname-Mobile and Responsive Class.
  4. You now have your own set of class files to use throughout the class. Have fun!

Learn more in these courses

How to Learn Web Design

Master web design with hands-on training. Web design is the creative process of building functional, attractive websites with tools like HTML and CSS, JavaScript, WordPress, and Figma and an understanding of user interface (UI) design principles.

Yelp Facebook LinkedIn YouTube Twitter Instagram