Virginia State University Implement a Web Application Computer Programming Task

FINAL PROJECTFor the final project, you need to implement a web application for creating/store/retrieving flash cards of six
different web programming technologies. These technologies are three frontend programming: HTML, CSS, and
JavaScript and three backend programming languages: Python, Django, and Nodejs.
STEP 1: HOME PAGE (20 POINTS)
At this step you should design a homepage for the final project as shown at the Figure 1.
Figure 1:homepage
NOTES:
1- Use following background for header
background: linear-gradient(to right, #659999 0%, #f4791f 100%);
2- background color for the frontend is
background-color: #00ffff80;
3- background color for the cards inside the frontend is
background-color: #0000ff26;
4- background color for the backend is
background-color: #7fffd48a;
5- background color for the cards inside the backend is
background-color: #00c58321;
6- background color for the footer is
background: linear-gradient(to bottom, #bdc3c7, #2c3e50);
7- Use the following text for the html card:
HTML, or HyperText Markup Language, allows web users to create and structure sections, paragraphs, and
links using elements, tags, and attributes. However, it’s worth noting that HTML is not considered a
programming language as it can’t create dynamic functionality.
8- Use the following text for the css card:
CSS (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the
hood? CSS can be used for very basic document text styling — like changing the color and size of headings.
It can be used to create layout and ffects such as animation.
9- Use the following text for the Javascript card:
JavaScript is a scripting or programming language that allows you to implement complex features on web
pages — every time a web page does more than just sit there and display static information for you to
look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, etc.
10- Use the following text for the python card:
Python is an interpreted, object-oriented, high-level programming language with dynamic semantics. Its
high-level built in data structures, combined with dynamic typing and dynamic binding, make it very
attractive for Rapid Application Development, as well as for use as a scripting or glue language to connect
existing components together.
11- Use the following text for the django card:
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic
design. Built by experienced developers, it takes care of much of the hassle of web development, so you
can focus on writing your app without needing to reinvent the wheel. It’s free and open source.
12- Use the following text for the Nodejs card:
Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for
almost any kind of project! Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of
the browser. This allows Node.js to be very performant.
13- Use the following box-shadow for the shadow of cards:
box-shadow: 10px 10px 20px gray;
14- Use the border radius of 30px for each card.
STEP 2: LOGIN PAGE (10 POINTS)
At this step, you should design a login page as shown at the Figure 2.
Figure 2: sign in form
NOTES:
1234-
Use the same header background color as the homepage
Both of inputs email and password are required
Maximum length of characters in both the email and password fields are 50
You can use the form that you designed for the homework 3
STEP 3: REGISTRATION FORM (10 POINTS)
At the third step, you should design a registration form as shown at the Figure 3.
Figure 3: registration form
NOTES
1- Use a similar style of the sign-in form
STEP 4: FLASHCARD PAGE (60 POINTS)
At the fourth step, you should design a flashcard form for each one of the cards HTML, CSS, JavaScript, Python,
Django and the Nodejs. As an example, Figure 4 shows the flashcard related to HTML card of the home page.
Figure 4:Flashcard page
NOTES:
1- Background color of the Html, Css, JavaScript pages should be #00ffff80
2- Background color of the Python, Django, and Nodejs pages should be #00c58321
3- Figure 5 shows the components of a flashcard
4- Figure 6 shows the control panel:
5678-
All the users’ flashcards store into the local database of your browser.
Whenever a user login, the flashcards related to that user should show up.
Whenever a user deletes some flashcards, those flashcards should be deleted from local database as well.
Whenever a user saves the flashcards, not only the content of flashcards, but also the style of flash cards
also should be stored (for example the color of the flashcard) in the local database. In this case the next
time the user login, the same style of flashcards should show up to him.