[Solved] Learning Management System using HTML, CSS, JavaScript and PHP

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
  • You may use JavaScript and JS libraries to simplify your work
  • You may use PHP or other server-side scripting
  • You may use CSS preprocessors like SASS and LESS
  • You may use CSS frameworks like Bootstrap and Skeleton
• Work in team all team members should contribute
  • Use GitHub as project collaboration platform
  • Each team member should have commitments to the project
• Create original content your content should be written / created by your team, not copy-pasted
  • You may take and adopt ideas from other sites, but avoid direct copy / paste of their content
• Web design
  • Using your own web design (creative art work) is allowed but not required
  • You may use portions of other sites design, but dont copy paste them entirely
• Data Driven Development
  • You are expected to design and develop a database using MySQL or any standard DBMS
  • Basic database operations such as Insert, Update, Delete and Viewing should be incorporated to your application
• Valid and high-quality HTML and CSS
  • Validate (when possible) your HTML (http://validator.w3.org) and CSS code (http://css-validator.org)
  • Put Valid HTML + Valid CSS banners in the footer of your site with link to the validators:
  • 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
  • Standard desktop Web browser (computer / laptop)
  • Tablets (Android, iPad, Windows, Linux)
  • Smartphones (Android, iPhone, Windows Phone)
  • Typical screen widths to support: 1600px, 1024px, 960px, 768px, 640px, 480px, 320px.
• Usability and UX
  • Your site should be easy-to-use, with intuitive UI, with good usability
  • 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
  • Use HTML5 and CSS3, not HTML 4.01 and CSS 2.1
  • Ensure your site works correctly in the latest HTML5-compatible browsers: Chrome, Firefox, IE, Opera, Safari (latest versions, desktop and mobile versions)
  • You do not need to support old browsers like IE9

Forbidden Techniques and Tools

• Using HTML and CSS site templates from Internet is forbidden
  • Your HTML and CSS should be written by your team members
• Using CMS systems (like WordPress, Drupal and Joomla) is forbidden
  • 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
  • Write your HTML and CSS code in a text editor. Dont 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:
  • Project name and purpose what you have created?
  • Team name, list of team members
  • 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
• 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