Complete the following setup procedure before beginning any exercises. This initial configuration will ensure you have a dedicated workspace for all tutorial activities.
Topics Covered in This Mobile & Responsive Web Design Tutorial:
Setting up Your Class Files
Core Learning Components
File Management Setup
Learn proper organization and duplication of class files for safe editing practices. Establish your personal workspace for the entire tutorial series.
Cross-Platform Instructions
Follow specific setup procedures for both Mac and Windows environments. Understand keyboard shortcuts and file operations for your operating system.
Tutorial Preparation Workflow
Environment Preparation
Minimize or hide all open windows to access your Desktop clearly for file operations
File Access
Locate and open the Class Files folder containing all tutorial materials
Personal Copy Creation
Follow platform-specific duplication instructions to create your own editable version
Creating Your Own Copy of Class Files
Throughout this workbook you will be editing class files that we have prepared for you. Rather than working directly with the original templates—which could lead to irreversible mistakes or confusion—we'll establish a personalized copy of all materials. This approach follows industry best practices for project management and ensures you can experiment freely while maintaining a clean backup of the source files.
- If you have any windows open, minimize or hide them so you can see the Desktop clearly.
- Navigate to and open the Class Files folder on your system.
Follow the appropriate instructions below based on your operating system:
Mac:
- Click once on the Mobile and Responsive Class folder to select it (avoid double-clicking, which will open the folder).
- Press Cmd–D to duplicate the entire folder and its contents.
- Rename the duplicate folder yourname-Mobile and Responsive Class, replacing "yourname" with your actual name for easy identification.
Windows:
- Click once on the Mobile and Responsive Class folder to select it (a single click will highlight the folder without opening it).
- Press Ctrl–C to copy the folder to your clipboard.
- Press Ctrl–V to paste the copied folder into the same directory.
- Locate the new copy (it may appear at the bottom of your folder list) and rename it yourname-Mobile and Responsive Class, substituting your actual name.
You now have your own dedicated set of class files to use throughout this tutorial. This personal workspace allows you to experiment with code, make mistakes, and iterate on your designs without affecting the original templates. You're ready to dive into modern mobile and responsive web design techniques!
Platform-Specific File Operations
| Feature | Mac Instructions | Windows Instructions |
|---|---|---|
| Selection Method | Click once on folder | Click once on folder |
| Copy Command | Cmd-D (duplicate) | Ctrl-C (copy) |
| Additional Step | None required | Ctrl-V (paste) |
| Result Location | Same directory | Bottom of folder list |
Setup Completion Verification
Provides clean workspace for file operations
Contains all original tutorial materials
Target folder for duplication process
Creates your personal editable version
Identifies your personal working directory
You now have your own dedicated set of class files to use throughout the entire tutorial series. This personal copy ensures you can edit freely without affecting the original materials.