/World_Data_Website

Practice for Web(HTML, CSS, JS)

Primary LanguageHTML


Logo

Table of Contents

About The Project

The project is for exercise task 1 and 2 of the course "Web and Multimediaengineering".
Learning goal: Basics client with side technologies: HTML5, CSS3 & JS and PHP
Basic construction for a website as an interface for world_data

Built With

  • HTML
  • CSS (Font Awesome Free, Webfont Roboto)
  • Java Script
  • PHP

Getting Started

Installation

Extract "WME_Aufgabe1_Kim" ZIP-Archive

Check List

Aufgabe 1

  • HTML, CSS and JavaScript only

  • Only selected libraries, frameworks, etc. include:

  • File coding / encoding: UTF 8 (and line end Unix LF)

  • Use valid HTML5 and CSS3, validator https://validator.w3.org/ org /)

  • HTML header information: at least title, description, author, keywords

  • HTML5 elements: header, footer, nav

  • Footer: First and last name

  • Note: Don't forget the readme

  • Base font: Roboto, 14px, line spacing: 145%, style: normal Icon font "Font Awesome" for nav and column sorting Hover for standard links: color and underline

  • Header with logo and 7 menu items / links

    • Color gradient in the header
    • "Clickable" logo with hover effect to colorless / gray
    • Unordered List (ul) for menu items
    • "Font Awesome" icon for menu items
    • Hover of menu items: Short animation for changing the background color in the header

  • Data display table

    • Use thead and tbody elements
    • Min. the following columns: ID and Country, as well as five attributes
    • Min. 25 countries (ID and Country) with any data (random, CSV, ...)
    • "Hide" functionality for five attribute columns
    • Sorting of the table (ascending and descending, without framework / plugin) according to country
    • "Font Awesome" icons in the Country column
    • Changing background color of the lines (e.g. # e0e0e0 for even lines)

  • Responsive design (e.g. "mobile first" approach)

    • three explicit, meaningful threshold values:
      • <768 phones
      • > = 768 and <1200 tablets
      • > = 1200 desktops: fixed container width (page wrapper) 1170px, centered left right

  • Responsive design: based on the above Threshold values ​​Adjustment of the number of columns for text boxes above the table (1/2/3 columns)

  • Responsive design for header / navigation:

    • Combine / collapse menu items

Aufgabe 2

  • Server-side parsing of a CSV file
  • Server-side creation of an XML file
  • Transformation from XML to HTML (XSLT processing)

License

The original web "world_data license is from the course "Web und Multimedia Engineering"

Contact

Taeeun Kim: taeeun.kim@mailbox.tu-dresden.de

Project Link: https://github.com/Taeeun-Kim/World_Data_Website/

Acknowledgements