CSCE242 - Web Applications

Projects By: Josue F

Course Description

Firstly, students will learn the fundamentals of front-end web development by learning to structure their websites with HTML, style their websites through CSS, and add interactivity to their websites using JavaScript. Lastly, they will learn back-end development by learning NodeJS and MongoDB.

Assignments Projects

1. Assignment 01 - Basic HTML

   

   Using basic HTML elements like headers, paragraphs, images, a list, a table, and external links.

2. Assignment 02 - Basic CSS

   

   Building a navigation bar, and other HTML elements and giving them proper styling with CSS.

3. Assignment 03 - Layout

   

   Showing how you can use flexbox to create a clean layout for your webpage.

4. Assignment 04 - Recreate

   

   Recreating a page from the University of South Carolina's website.

5. Assignment 05 - Basic JS

   

   Using basic event handlers to show interactivity with some elements.

6. Assignment 06 - Conditionals

   

   Displaying content based on user input and tab selection.

7. Assignment 07 - Loops

   

   Using loops to generate elements and run functions multiple times.

8. Assignment 08 - Arrays

   

   Structuring arrays to help display interactive data in a modal.

9. Assignment 09 - Classes

   

   Creating a class to display a gallery of similar items and modals.

Assignment Setup 02



Github Repo Live Demo

10. Part 01 - Topic Selection

    

    A description of each page in the project and its features.

11. Part 02 - Wireframe

    

    A wireframe to show the basic layout and user flow.

12. Part 03 - HTML & CSS

    

    The HTML & CSS of each page from the wireframe.

13. Part 04 - Images

    

    The website with all images, text, & color scheme.

14. Part 05 - JavaScript

    

    Intermediate JavaScript to fetch data & sort the gallery page.

15. Part 06 - Update Data

    

    Updating JSON data and sorting features.

16. Part 07 - Form & iFrame

    

    Adding iFrames and accepting contact form submissions.

Part 08 - Migrate to React



Github Repo Live Demo