This repository contains some of my personal demos for HTML, CSS, and JavaScript. I use it to learn and practice features in these languages. It also contains some of my personal small functional webpages.
This is a simple demo of flexbox. In this demo, 4 cards are displayed on the page, with display attribute set to flex. The cards are responsive to the screen size. If the screen width is large enough, 4 cards will be displayed in a row. If the screen width is not large enough, the cards on the right will be moved to the next row. The cards are also responsive to the screen height.
This is a simple demo of flexbox and @media. In this demo, a signup form is displayed on the page with some common-to-see fields in the form. The form is responsive to the screen size. When the screen width is narrower than 580px, the form width will be narrowed. Many different types of input labels are used in this demo, which include textInput, radio, and checkbox.A drop down menu is also used in this demo.
This is a simple demo of CSS grid. In this demo, 4 cards are displayed on the page, with display attribute set to grid. The cards are responsive to the screen size. If the screen width is large enough, 3 cards will be displayed in a row with another card in the next row. If the screen width is not large enough, the cards will firstly shrink, then the card on the right will be moved to the next row and the size of cards will be changed back to default.
This page was designed for UQ course INFS3202/7202 Web Information Systems. Since I am working as a tutor for this course in this semester, I created this page for, first, practising my HTML, CSS and JavaScript skills, and second, showing the instructions and a working timer to students. This web page has an integreted timer. The timer takes the target time as input, and will then automatically calculate the time span between current time and given time and start counting. A progress bar is also used to show the time span. Target time can be updated at anytime and the timer and progress bar will be updated accordingly. The timer will stop counting when the target time is reached. Timer can be stopped and resumed at anytime. Note that the target time will be postponed accordingly when the timer is stopped. For instance, if the target time is 10:00:00 and the timer is stopped for 1 minute, the target time will be 10:01:00 after it is resumed. Timer can be reset at anytime.
This repository is being frequently updated. More demos and projects will be added in the future.