CSE 340: Web Backend Development

W01 Assignment: Initial Site Creation

Overview

This assignment will build on the learning activities for the week. You will complete the initial version of your site.

Instructions

Complete the following:

Complete Learning Activities

Before you continue to the next step, make sure you have completed every step of the following activities:

At this point you should have a functioning site with the following characteristics:

All of these will be required for this submission, so if any of these are not yet complete, you should complete them now before moving on.

Add Service Project Categories

Follow the same pattern from the learning activities to add a new EJS page for Service Project Categories.

  1. Create a new categories.ejs page.
  2. Add the following placeholder categories to your categories page:
    • Environmental
    • Educational
    • Community Service
    • Health and Wellness
  3. Make sure to use the same partials for the header and footer that you did for the other EJS pages.
  4. Update your site navigation in the header partial to include a link for Categories.
  5. Add a route to your Express server (/categories) to serve the new categories page. Make sure to follow all naming conventions defined in the learning activities.
  6. Test your site locally and make sure everything is working correctly.
  7. Deploy your updated site to Render.com and test it online.

Can I use AI?

Yes! You are welcome to use AI tools to help you create the EJS page and any other code you need for this assignment. But remember that you must understand every line of the code that you submit, so carefully review any generated code and ask AI questions about anything you are not completely comfortable with.

In addition, remember that your code must strictly match the requirements and naming conventions described in the learning activities. You may need to clean up AI generated code to follow these guidelines.

For more information on AI-use, please review the CSE 340: AI Policy.

Make your site look professional

Now that you have the basic functionality, the next step is to make your site look professional.

Complete the following:

  1. Use AI to generate a professional layout for your site. Replace your old stylesheet in your public/css directory.
    • You may use any AI tool you would like.
    • You may find it helpful to include the HTML content of one of your pages in your prompt so that it can know the elements and classes you have defined. To get the complete HTML for your site, when you view your rendered EJS page in a browser, right-click and select View Page Source to get all of the HTML at once
    • The new CSS should be responsive and look good on both desktop and mobile devices.
    • Make sure the colors, fonts, and layout are professional and visually appealing.
    • Make sure the site meets accessibility standards (e.g., sufficient color contrast, readable fonts, etc.).
  2. Look carefully at the CSS code that was generated. Make sure you understand and are comfortable with all of this code.
  3. Deploy your updated site to Render and test it online.

Requirements

The following are the requirements for this assignment:

  1. EJS Pages: Navigation and EJS pages exist for home, organizations, projects, and categories. The titles of these pages are EJS variables.
  2. EJS Partials: Header and footer EJS partials are used on all pages. The header inserts the page title variable into the HTML title and the footer includes a copyright.
  3. Static Files: CSS and images are in the public folder and render on the site. Server.js contains static middleware to serve the public folder.
  4. Code Organization and Standards: The .env file is not present at GitHub. All code standards are followed including the following:
    • const is used where possible.
    • camelCase is used for all variables.
    • All functions should use arrow notation (const xxx = () -> {} )
    • Async/await is used rather than promises or callbacks
    • ESM export/import syntax is used.
    • <%= %> rather than <%- %> should be used for all EJS data except the header and footer partials.
  5. Deployment and Professional Style: The site is deployed and working at Render.com. The CSS is professional in look and feel.

Score

In order to be marked complete and receive credit (100%), your assignment must meet all of the requirements. If any requirements are not met, your assignment will be marked incomplete (0%) and you will need to fix any issues and resubmit.

Why must the assignment be perfect to receive any points?

All future assignments will build on this initial site. If any part of this initial site is missing or incomplete, it will cause problems for future assignments. Therefore, it is critical that this initial site is fully complete before moving on.

In addition, when you are working as a software developer, this is the same expectation your company will have. If any of your requirements are not working correctly yet, you will need to fix them before you can move on to the next task.

Submission

Once you met the requirements, return to Canvas to submit the following:

Other Links: