The document outlines a front-end web development assignment involving creating pages for a content management system using HTML, CSS, Bootstrap, JavaScript, and jQuery. It includes specifications for login, registration, profile editing, content forms, and viewing pages. Validation is required to ensure fields are filled and data is correct. Asynchronous JavaScript is to be used to load pages and update profile information without reloading. The assignment aims to teach front-end concepts and skills like responsive design, Bootstrap, DOM manipulation, and AJAX.
The document outlines a front-end web development assignment involving creating pages for a content management system using HTML, CSS, Bootstrap, JavaScript, and jQuery. It includes specifications for login, registration, profile editing, content forms, and viewing pages. Validation is required to ensure fields are filled and data is correct. Asynchronous JavaScript is to be used to load pages and update profile information without reloading. The assignment aims to teach front-end concepts and skills like responsive design, Bootstrap, DOM manipulation, and AJAX.
The document outlines a front-end web development assignment involving creating pages for a content management system using HTML, CSS, Bootstrap, JavaScript, and jQuery. It includes specifications for login, registration, profile editing, content forms, and viewing pages. Validation is required to ensure fields are filled and data is correct. Asynchronous JavaScript is to be used to load pages and update profile information without reloading. The assignment aims to teach front-end concepts and skills like responsive design, Bootstrap, DOM manipulation, and AJAX.
The document outlines a front-end web development assignment involving creating pages for a content management system using HTML, CSS, Bootstrap, JavaScript, and jQuery. It includes specifications for login, registration, profile editing, content forms, and viewing pages. Validation is required to ensure fields are filled and data is correct. Asynchronous JavaScript is to be used to load pages and update profile information without reloading. The assignment aims to teach front-end concepts and skills like responsive design, Bootstrap, DOM manipulation, and AJAX.
Project Assignment Objectives Understand the basic concepts of Web Design (HTML, CSS, JS) Understand web design guidelines and process which you can apply to real world web projects Understand the syntax of HTML Element Understand important HTML Forms elements such as: form, form group, from control, submit Understand responsive web design by using CSS @media query Able use HTML and CSS to create a responsive web page Understand the core concepts of Bootstrap (layout, rows, grid, flex, components: buttons, alerts, utilities) Able to create complex, beautiful, responsive webpage with Bootstrap Understand the core concepts of JavaScript programming language Understand basic concept of DOM Able to add behavior to make web site dynamic using JavaScript (DOM) Understand jQuery (selector, onclick, add/remove attribute, toggle, insert, remove class, GET, POST) and AJAX
Technical Requirements Must use HTML, CSS, Bootstrap 4 Must use JavaScript and jQuery Day1-2: Specifications 1 You have to create the 5 pages for a CMS (Content Management System), the design for each page is as below: Login page
Functional Requirement: Background color of all button must be green. Placeholder text in inputs must be in light gray color. You have to define the placeholder for each input text with same value as above figures. Add a new file called styles.css to customize the default CSS style of Bootstrap 4. Estimated time: 3 hours
Day3-4: Specifications 2 Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server. JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions. In this assignment, we must validate data in the list item definition: Login Page Screen:
Use Ajax: Click on item in left menu, it will be loading in 5 seconds, after that it will call corresponding HTML page. Loading screen will be show in 5 seconds.
After that, it will show View Content screen. When clicking on pagination, the View Content only displays 5 records per page. If the number of pages is extensive, we only display 3 pages (For example: 1,2,3,4,5 => 1,2,…5). In terms of searching, we will search by many different criteria such as Title, Brief or Date.
In the Edit profile, if click to Submit button, it will call to update your information via Ajax.
Functional Requirement: The form must be checked to make sure all the mandatory fields are filled in the input tag. It would require just a loop through each field in the form and check for data. The data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data. Show evidence of loading when click left menu Use Ajax to load View Content page and update information at Edit Profile. Estimated time: 180 minutes
