Explore the steps on how to effectively set up and edit class files for a HTML Email tutorial, a critical part of starting your career in web development. Learn the different processes for both Mac and Windows operating systems, applicable for aspiring front end developers and full stack developers alike.
Key Insights
- The tutorial begins with setting up your class files, an essential preliminary step before starting any coding exercises.
- Instead of editing original files, the tutorial suggests creating a personal copy to ensure the integrity of the originals.
- The process involves minimizing or hiding open windows to easily navigate to the desktop where the class files folder is located.
- Different procedures are provided for Mac and Windows users to copy the HTML Email Class folder.
- For Mac users, the process involves selecting, duplicating, and renaming the folder.
- For Windows users, the tutorial instructs copying, pasting, and renaming the folder.
This exercise is excerpted from Noble Desktop’s HTML Email training materials and is compatible with updates through 2021. To continue learning HTML Email with hands-on training, check out our coding bootcamps in NYC and live online.
HTML Email Workflow
-
Build with Tables
Nested <table> tags for cross-client compatibility.
-
Inline the CSS
Use Premailer or similar to inline styles automatically.
-
Test in Real Inboxes
Litmus screenshots across 50+ clients.
-
Send via ESP
Mailchimp, SendGrid, Postmark — never raw SMTP for marketing.
Complete the following setup prior to beginning any exercises.
Topics Covered in This HTML Email 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.
If you have any windows open, minimize or hide them so you can see the Desktop.
Open the Class Files folder.
-
Follow the appropriate Mac or Windows instructions below:
Mac:
- Click once on the HTML Email Class folder to select it.
- Press Cmd–D to duplicate it.
- Rename the duplicate folder yourname–HTML Email Class.
Windows:
- Click once on the HTML Email 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 the file yourname-HTML Email Class.
You now have your own set of class files to use throughout the class. Have fun!
