Setting Up

Web Development Tutorial

Prepare for your web development career by learning how to set up and manage your class files. This tutorial covers steps for both Mac and Windows users, ensuring you have your own copy of class files to edit throughout the coursework.

Key Insights

  • The tutorial covers the process of setting up class files necessary for web development training.
  • Students should avoid editing original class files and instead make a personal copy to edit.
  • Instructions are provided for both Mac and Windows users to create their copy of class files.
  • For Mac users, the process involves duplicating the Flexbox Grid Class folder and renaming the duplicate.
  • Windows users are instructed to copy and paste the Flexbox Grid Class folder, then rename the new copy.
  • Having a personal set of class files allows students to freely edit and experiment throughout their training.

This exercise is excerpted from Noble Desktop’s HTML & CSS training materials and is compatible with Flexbox, Grid, and Bootstrap updates through 2023. To learn current skills in HTML & CSS with hands-on training, check out our Front-End Web Development Certificate, Full-Stack Web Development Certificate, and coding classes in-person and live online.

Class Files Setup

  1. Open the Class Files Folder

    Located on your Desktop.

  2. Select Flexbox Grid Class Folder

    Single click to highlight.

  3. Duplicate It

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

  4. Rename to yourname-Flexbox Grid Class

    Keeps your edits separate from the original.

Complete the following setup prior to beginning any exercises.

Topics Covered in This Web Development 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.

Full-Stack Web Development 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 Flexbox Grid Class folder to select it.
    • Press Cmd–D to duplicate it.
    • Rename the duplicate folder yourname-Flexbox Grid Class.

    Windows:

    • Click once on the Flexbox Grid 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-Flexbox Grid 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 Development

Master web development with hands-on training. Build fully functional websites and applications using HTML, CSS, JavaScript, Python, and web developer tools.

Yelp Facebook LinkedIn YouTube Twitter Instagram