/LearnHTML

LearnHTML - Redesign an exsiting website about learning HTML

Primary LanguageHTML

Project 0

Web Programming with Python and JavaScript

Author

Kit-p

Description

Deployed in GitHub Pages: https://kit-p.github.io/LearnHTML/

This project intends to re-design an online HTML learning web page offered by Wired Women's Studies at University of York. The original website is old and not visually-appealing to the readers. This project provides a fresh and modern design for the web page and offers potential readers a enjoyable learning experience.

Objectives

  1. Use HTML and CSS to create a website with multiple pages.
  2. Make use of tools like Bootstrap and SASS to improve efficiency.
  3. Understand the basic usage of Git and GitHub.
  4. Setting up the very first GitHub Pages.

Files

index.html
This is the home page of the project.
It contains description and objective of the HTML learning materials.
It contains a panel leading to the list of lessons.
----------Tasks Accomplished----------

  • Included 1 image.
  • Used Bootstrap 4.
  • Used 3 Bootstrap components button, jumbotron, and card.
  • Used more than 2 columns of Bootstrap grid model.

index.css
This is used to style the .html files.
----------Tasks Accomplished----------

  • Contained 1 stylesheet.
  • Used more than 5 different CSS properties.
  • Used #id selector.
  • Used .class selector.
  • Used more than 5 different CSS selectors.
  • Used @media query.

index.scss
This is the source code of index.css.
----------Tasks Accomplished----------

  • Used SCSS variables.
  • Used SCSS nesting.
  • Used SCSS inheritance.

lesson0.html
This is the Lesson0 page.
It introduces basic HTML tags.
----------Tasks Accomplished----------

  • Included 1 unordered list.
  • Included 1 table.

lesson1.html
This is the Lesson1 page.
It introduces simple formatting.

lesson2.html
This is the Lesson2 page.
It introduces linking web texts.

lesson3.html
This is the Lesson3 page.
It introduces images.
----------Tasks Accomplished----------

  • Contained more than 4 .html pages.
  • Able to access all pages from any page with hyperlinks.

README.md
This is the current file.
It describes the project and all other files.
----------Tasks Accomplished----------

  • Described project.
  • Described each file.