MMP 240 Web Design
MMP 240 Web Design

File Structure

This page covers the file structure that is recommended for your final project.

Base Responsive Page

You will need a number of new files for the final project. You can and should use as a guide the Base Responsive Page we worked on in class 20. Feel free to download that and use and modify as you see fit. It includes HTML, CSS and JavaScript. You can also download a zip file by clicking here.

Suggested File/folder structure

  • HTML Files: you should have the following 8 in the top level of the project folder. Base these on the index.html from the Base Responsive Page.
    1. index.html (homepage, from midterm)
    2. about.html (from midterm)
    3. retrieval.html (from midterm)
    4. spacing.html (new, for Spaced Practice)
    5. elaboration.html (new, for Elaboration)
    6. interleaving.html (new for Interleaving)
    7. concrete.html (new, for Concrete Examples)
    8. dualcoding.html (new, for Dual Coding)
  • CSS Folder: this should be named css and you should have it from the midterm. You have the option to add new files in it. Here is my suggestion to separate your CSS (you can change this up as you like or just keep one file).
    • normalize.css (new, don’t write this, it’s part of the Base Responsive Page, download here after you click download, save the file into your css folder.)
    • typography.css (you can use my base css found here, copy and paste into your file)
    • nav.css (new, use this to add the CSS for your responsive navigation. View This Page for more examples you can use)
    • layout.css (new, this can contain your base responsive style and your layout CSS with media queries)
    • style.css (All of the rest of your styles including page specific styles go here)
  • JavaScript Folder: (new) this should be named js or javascript. It’s already there in the Base Responsive Page files
    • main.js (this is where you can paste in JavaScript you get from navigation or other examples that you’re incoporating that have JS they require that is not is a separate file.
    • vendor folder(new, this folder has the modernizr, jQuery and Selectivizr files used in the Base Responsive page. Keep them and add to it if you add something to your project that requires an additional js file. Remember to include vendor in the path when adding the script tag to HTML: <script src=”js/vendor/nameOfJsFile.js”></script>
      • jquery-3.4.1.min.js (jQuery library, used by many responsive navs and other UI interactions and much more, visit site)
      • modernizr.3.7.1.min.js (used to help find the capabilities of the browser, visit site)
      • selectivizr-min.js (helps older browsers use CSS3: visit site)