Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/whyisjake/front-end-web-programming

ISDN 599 - Front End Web Programming - Iovine and Young Academy - USC
https://github.com/whyisjake/front-end-web-programming

Last synced: 29 days ago
JSON representation

ISDN 599 - Front End Web Programming - Iovine and Young Academy - USC

Awesome Lists containing this project

README 

        
# ISDN 599 - Front End Web Programming



Iovine and Young Academy - USC



## Course Description

The World Wide Web has become one of the dominant ways for individuals and companies to communicate with others. It started with web pages. Then came along eCommerce. In the United States in 2019, eCommerce was about 14% of all commerce. Experts predict that eCommerce will be 22% of all commerce by 2023. More recently, the Web has allowed the creation and rise of social media of multiple types. This course will teach you how to create interactive web pages that form the front-end basis of all Web pages that allow you to enter data.



## Learning Objectives and Outcomes



By the end of this course, students should be able to:

* Create interactive HTML documents using HTML forms

* Use Cascading Stylesheets to control the look and feel of your HTML documents

* Program in Javascript to create interactivity in your HTML documents

* Augment your Javascript with the jQuery library

* Learn how to use the React Javascript library

* Gain familiarity with Next.js

* Use popular frameworks for deploying web applications.

  * Example: GitHub and Vercel



## Recommended Preparation

* IDSN 530: Technology Essentials

* Having some HTML/CSS knowledge will be very important for this class.

* We are going to be jumping headfirst into concepts that are covered in IDSN: 530.



# Assignments/Labs



## GitHub and Deployment



### Lab 1: Javascript Data Types



*Deliverable:* Submitted document

*Details:* Create a document that details the primitive data types and structures that are found in JavaScript. Requirements: This should include the following and explanations for use.

* Null

* Undefined

* Boolean

* Number

* BigInt

* String

* Objects

* Arrays



### Lab 2: GitHub Deployment



*Deliverable:* Website hosted on GitHub.

*Details:* Deploy a website to GitHub as a static site.

*Requirements:* Deploy a website or application to a new GitHub repository. This is done by utilizing GitHub pages. We will use this frequently this semester for deploying projects, so we will use this project to get in the habit of using Git for version control and deployment.



## Node Projects



### Lab 3: Mad Libs Project



*Deliverable:* Build a webpage that takes 10+ inputs and submits them into a Mad Libs style story. Syllabus for IDSN 599, Page 3

*Details:* There are a few ways to do this but leveraging jQuery to collect the form values and then populate the story is the ideal outcome. We shouldn’t need to do any form processing on the server side. Consider something fun.



### Lab 4: Dependency Management – HR Directory



*Deliverable:* Convert a CSV file into an HR directory.

*Details:* In this project we are going to be leaning into dependency management and open source tooling. We will learn about how to setup a node project and using NPM install tools to modify content. We will convert a CSV file into a webpage that has all of the relevant details including images.



### Lab 5: Browser APIs – TODO app

*Deliverable:* Build a simple TODO app that leverages local storage.

*Details:*

* This application should be able leverage browser APIs for storage.

* A user should be able to create, read, update, and destroy items in the TODO list.

* A user should be able to mark an item in the list as done.

* A user should be able to close the page and then return to the existing state.



## Remote APIs



### Lab 6: Remote Data



*Deliverable:* Build a user profile page.

*Details:* Using data from randomuser.me, build a profile page that loads user information from the remote data API. This code should include error handling if the API fails. Consider a layout like a Twitter or Facebook profile that includes Name/Username/Photo/etc.



## Regular Expressions



### Lab 7: Regular Expressions

*Deliverable:* Submit the message that is hidden in this code with the regular expression that you used to parse this string. Also available [here](https://gist.github.com/whyisjake/ba2d2bfa13dcce01f39ab521dfc1ca6c).

*Details:*

```

lorem ipsum Wolor sit amet, consectetur adipiscing elit. fusce et felis ac libero semper hendrerit. mEuris ornare leo eget velit lobortis, maximus pharetra felis lobortis. donec convallis placerat tortor, Lac pellentesque turpis consectetur vitae. mauris viverra ante a elit posuere, at finibus diCm pellentesque. duis lectus dui, luctus at massa vitae, efficitur rhoncus ourpis. donec sit amet tempor urna. aenean suscipit mattis suscipit. maecenas vehicula odio enim, pretium facilOisis orci egestas suscipiM. phasEllus preTium ligul lectus, eO bibendum pUrus ultrieS eu. in Ced tempor quam. aliquam pretium ipsum eget varius tempor. proin non nisl nec neque dapibus pellentesque. quisque at lacus a augue egestas tempus ut at nulla. duis sit amet dapibus nulla.

ut tincidunt ex eget placerat laoreet. phasellus vel magna odio. aenean volutpat volutpat suscipit. ut lobortis nulla nulla, sit amet FinIbus ante conGue ac. pHasellus dui nulla, loborTis vitae ullamcOrper coNsequat, lacinia et mauris. nulla ligula elit, congue viverra elit eu, accumsan finibus mi. maecenas vulputate, odio non porta pulvinar, sapien metus rhoncus risus, eu pulvinar sem est sit amet lorem. duis pulvinar, neque id dignissim fermentum, tortor dolor egestas lectus, vel eleifend justo felis vel est.

```



## React



### Lab 8: Create React App

*Deliverable:* Take an existing web project and convert the HTML to React JSX. Publish this to GitHub. Syllabus for IDSN 599, Page 4

*Details:* This should be an existing project, and ideally be broken into several components. Use Create React App as a starter. As an example, you should have several pages that share components. Each of these components would have props that could be passed to change the dynamic content. (Page titles in the header, as an example.)

#### Pages:

* Home

* About

* Contact

* Gallery



#### Components

* Header

* Footer

* Navbars

* Etc.



### Lab 9: React Routing

*Deliverable:* Add client-side routing to the project from Lab 8.



## Final Project



### Assignment 1.1: Pitch Deck

*Deliverable:* Document (proposal), including screenshots/wireframes

*Details:* Written (text, narrative) proposal of the website, as well as mock-ups, wireframes, and/or screenshots of a version of the landing page.

Each student will present their proposal in class in week 11.



### Assignment 1.2: Application and Layout

*Deliverable:* Application homepage

*Details:* With this deliverable, you should be making progress towards the look and feel of your application. The root functionality of the application should be in working order and you should be ironing out the details towards the final functionality.



### Assignment 1.3: Completed Project and Presentation

*Deliverable:* Final application, and presentation about lessons learned from the course of the project.