dev env - 1. Setup Project

Goal

Create a development area to be used as a sandbox for understanding and working with concepts. This area will be created as a template that can be restored to at any point for a fresh start.

Process

Creating Folders and Files

  1. Create the following project schema:
    2. devSandbox/ ├── include/ │ ├── images/ │ ├── styles.css │ └── scripts.js ├── pages/ │ └── folderTest.html ├── README.md └── index.html
  2. Setup the following tags in index.html
    • Set the document type to HTML
    • Open and closing html, head and body
    • Add a title tag with text of "devSandbox"
    • Create a system in the body section to allow for the following areas for future development. You may use what ever tags and systems you'd like:
      • Header
      • Navigation section (ideally in the header)
      • main content area
      • footer
  3. Add the following placeholder content to index.html:
    • header needs a place to show project name
    • navigation should have link to home and folderTest
    • main content area needs:
      • 1 level 1 heading
      • 2 paragraphs of lorem ipsum each in their own p tags
      • 2 level 2 headings with a paragraph of lorem ipsum each
      • A form that has text, number and textarea inputs with a submit button
  4. footer needs a link to index.html
  5. Connect and setup the styles.css to style each of the elements in the index.html, keep it simple.
  6. Connect the script.js and add a function that will alert a passed in string to the user

Break Point

Before moving on we will review the code that is in place and ensure all is working and meeting standard before moving on.

folderTest Updates

New Sub Pages and Saleability Issues

Our project will require us to create new pages and folders as we are testing and developing solutions. Your task is to create the following:
  1. 4 new html files, 2 need to be in new sub folders.
  2. All files need to maintain consistency with index.html
  3. All pages in project folder need to link to each other.

Reflect

  1. How is our project going to scale with our current system?
  2. The Navigation is being repeated a lot! Can we make it modular?

Part 2: Making Sandbox Modular