Starting from:
$25
Learning Management System using HTML, CSS, JavaScript and PHP Solution
Design and implement a professional website for a Learning Management System using HTML, CSS, JavaScript and PHP. The site could hold Notes, pictures, videos, artwork or anything else that the Students at the University could find Information. Your Site could contain the Facility Allocation including Lecture Hall, Labs and other resources and Useful information for Student Societies, Clubs and Student Activities. The Application can also contain Event Management Facilities, sending of invitations to Students to participate for events.
Requirements
· Use HTML & CSS – the major part of your work should be HTML & CSS written by your team
o You may use JavaScript and JS libraries to simplify your work
o You may use PHP or other server-side scripting
o You may use CSS preprocessors like SASS and LESS
o You may use CSS frameworks like Bootstrap and Skeleton
· Work in team – all team members should contribute
o Use GitHub as project collaboration platform
o Each team member should have commitments to the project
· Create original content – your content should be written / created by your team, not copy-pasted
o You may take and adopt ideas from other sites, but avoid direct copy / paste of their content
· Web design
o Using your own web design (creative art work) is allowed but not required
o You may use portions of other site's design, but don't copy paste them entirely
· Data Driven Development
o You are expected to design and develop a database using MySQL or any standard DBMS
o Basic database operations such as Insert, Update, Delete and Viewing should be incorporated to your application
· Valid and high-quality HTML and CSS
o Validate (when possible) your HTML (http://validator.w3.org) and CSS code (http://css-validator.org)
o Put "Valid HTML" + "Valid CSS" banners in the footer of your site with link to the validators:
o Follow the best practices for high-quality HTML and CSS: good formatting, good code structure, consistent naming, semantic HTML, correct usage of classes, etc.
· Responsive design – your site should open correctly and be functional at any modern device
o Standard desktop Web browser (computer / laptop)
o Tablets (Android, iPad, Windows, Linux)
o Smartphones (Android, iPhone, Windows Phone)
o Typical screen widths to support: 1600px, 1024px, 960px, 768px, 640px, 480px, 320px.
· Usability and UX
o Your site should be easy-to-use, with intuitive UI, with good usability
o You may follow some usability guide / checklist (search in Google): https://www.google.com/search?q=web+site+usability+checklist
· Target all major modern browsers
o Use HTML5 and CSS3, not HTML 4.01 and CSS 2.1
o Ensure your site works correctly in the latest HTML5-compatible browsers: Chrome, Firefox, IE, Opera, Safari (latest versions, desktop and mobile versions)
o You do not need to support old browsers like IE9
Forbidden Techniques and Tools
· Using HTML and CSS site templates from Internet is forbidden
o Your HTML and CSS should be written by your team members
· Using CMS systems (like WordPress, Drupal and Joomla) is forbidden
o Your site should be HTML & CSS written by your team, not a WordPress site with some free theme
· Using site authoring tools and site generators (like Adobe Edge, Microsoft Expression Design, Adobe Dreamweaver, etc.) is forbidden
o Write your HTML and CSS code in a text editor. Don't use code generators!
Deliverables
Put the following in a ZIP archive and submit it (each team member submits the same file):
· The complete source code of your project (HTML, CSS, images, scripts and other files).
· A presentation of your project (e.g. PowerPoint slides) or other brief documentation (1-2 pages) of your project. It should provide the following information:
o Project name and purpose – what you have created?
o Team name, list of team members
o Contributions of each team member
· Any other information (optionally)
Public Project Defense
Each team will have to deliver a public defense of its work in front of the other students. Teams will have only 10 minutes for the following:
· Demonstrate the site (very shortly).
· Show the source code and explain how it works.
· Demonstrate the site in different screen sizes (responsive design).
· Demonstrate that your HTML and CSS code validates correctly.
· Explain how each team member have contributed: display the commit logs in GitHub.
· Optionally you might prepare a presentation (3-4 slides).
Please be strict in timing! Be well prepared for presenting maximum of your work for minimum time. Bring your own laptop. Test it preliminary with the multimedia projector. Open the project assets beforehand to save time.
Assessment Criteria
This module is weighted 30% and be evaluated in the following criteria
· Site (structure, technical implementation, layout, design, usability)
· Content (quality of content)
· Responsive design (site behaves correctly in all devices, browsers and platforms)
· Validation and quality of HTML and CSS
· Team work (GitHub used; each team member contributed in 5 different days)
· Dynamic Content
Requirements
· Use HTML & CSS – the major part of your work should be HTML & CSS written by your team
o You may use JavaScript and JS libraries to simplify your work
o You may use PHP or other server-side scripting
o You may use CSS preprocessors like SASS and LESS
o You may use CSS frameworks like Bootstrap and Skeleton
· Work in team – all team members should contribute
o Use GitHub as project collaboration platform
o Each team member should have commitments to the project
· Create original content – your content should be written / created by your team, not copy-pasted
o You may take and adopt ideas from other sites, but avoid direct copy / paste of their content
· Web design
o Using your own web design (creative art work) is allowed but not required
o You may use portions of other site's design, but don't copy paste them entirely
· Data Driven Development
o You are expected to design and develop a database using MySQL or any standard DBMS
o Basic database operations such as Insert, Update, Delete and Viewing should be incorporated to your application
· Valid and high-quality HTML and CSS
o Validate (when possible) your HTML (http://validator.w3.org) and CSS code (http://css-validator.org)
o Put "Valid HTML" + "Valid CSS" banners in the footer of your site with link to the validators:
o Follow the best practices for high-quality HTML and CSS: good formatting, good code structure, consistent naming, semantic HTML, correct usage of classes, etc.
· Responsive design – your site should open correctly and be functional at any modern device
o Standard desktop Web browser (computer / laptop)
o Tablets (Android, iPad, Windows, Linux)
o Smartphones (Android, iPhone, Windows Phone)
o Typical screen widths to support: 1600px, 1024px, 960px, 768px, 640px, 480px, 320px.
· Usability and UX
o Your site should be easy-to-use, with intuitive UI, with good usability
o You may follow some usability guide / checklist (search in Google): https://www.google.com/search?q=web+site+usability+checklist
· Target all major modern browsers
o Use HTML5 and CSS3, not HTML 4.01 and CSS 2.1
o Ensure your site works correctly in the latest HTML5-compatible browsers: Chrome, Firefox, IE, Opera, Safari (latest versions, desktop and mobile versions)
o You do not need to support old browsers like IE9
Forbidden Techniques and Tools
· Using HTML and CSS site templates from Internet is forbidden
o Your HTML and CSS should be written by your team members
· Using CMS systems (like WordPress, Drupal and Joomla) is forbidden
o Your site should be HTML & CSS written by your team, not a WordPress site with some free theme
· Using site authoring tools and site generators (like Adobe Edge, Microsoft Expression Design, Adobe Dreamweaver, etc.) is forbidden
o Write your HTML and CSS code in a text editor. Don't use code generators!
Deliverables
Put the following in a ZIP archive and submit it (each team member submits the same file):
· The complete source code of your project (HTML, CSS, images, scripts and other files).
· A presentation of your project (e.g. PowerPoint slides) or other brief documentation (1-2 pages) of your project. It should provide the following information:
o Project name and purpose – what you have created?
o Team name, list of team members
o Contributions of each team member
· Any other information (optionally)
Public Project Defense
Each team will have to deliver a public defense of its work in front of the other students. Teams will have only 10 minutes for the following:
· Demonstrate the site (very shortly).
· Show the source code and explain how it works.
· Demonstrate the site in different screen sizes (responsive design).
· Demonstrate that your HTML and CSS code validates correctly.
· Explain how each team member have contributed: display the commit logs in GitHub.
· Optionally you might prepare a presentation (3-4 slides).
Please be strict in timing! Be well prepared for presenting maximum of your work for minimum time. Bring your own laptop. Test it preliminary with the multimedia projector. Open the project assets beforehand to save time.
Assessment Criteria
This module is weighted 30% and be evaluated in the following criteria
· Site (structure, technical implementation, layout, design, usability)
· Content (quality of content)
· Responsive design (site behaves correctly in all devices, browsers and platforms)
· Validation and quality of HTML and CSS
· Team work (GitHub used; each team member contributed in 5 different days)
· Dynamic Content
1 file (6.5MB)
