Projects

Lecture 1 - First Website [Bonus Lab]

The goal for this exercise is to demonstrate our knowledge using the concepts from Lecture 1.
For this, I developed two versions of the same website:

In part I, I created an initial version
In Part II, I created a sophisticated version, where i made it look polish, professional.

Learning Outcomes

In this Assignment, I learned how to design a layout of any website. I acknowledged myself with various basic HTML tags like, < HTML > ,< head > ,< body > . Including this i got to know about Elements, Attributes, Headings, Paragraphs, Styles, Formatting, Quotations, Comments, Color, Links, Images, Tables from https://www.w3schools.com/html/default.asp

Download

Open Screenshot

Lecture 2 - Table Exercise - Employee Directory

The goal for this exercise is to demonstrate our knowledge using the HTML tags related to designing tables

The table must contain the following columns:

Photo | Image must be resized to either 32x32 or 64 x 64.
Name | Last name Bold
Postal Code | Must be links to Google Maps
email | Must be clickable to send an email; Custom Font: Courier New
Phone | Must be clickable to make a call
Salary | Custom Font: Courier New, Custom Font Size: 18pt, Green background

The table Layout was given below:

Learning Outcomes

In this assignment, I used many html tags a, attributes and CSS to design as per given table and data. I learned about the table format and other table tags.

Download

Open Screenshot

Lecture 3 - Best Practices on Visual Elements

In this exercise I worked on the design of a website.

I Picked two websites areas/functionalities to describe them. Found four websites that uses those areas/functionalities, which have similar content/services and the other two are on different contents/services.

Learning Outcomes

In this assignment, I have been taught how to analyse different websites and functionalitis to create my own website. How to decide the functionalities and design by getting inspiration of existing websites.

Download

Open Screenshot

Lecture 4 - Developing Survey using HTML Forms

I designed a webpage for a survey. My goal was to use all the HTML Input Types properly
I can customize the parameters and behaviour of each element, when possible.
Created your own question to collect the user’s personal information as below:
- Include multiple choice questions.
- Questions with single answer.
- Questions with multiple answer.

Learning Outcomes

In this assignment, I created a form with GET and POST method. which was created using various html form fields and submited the detail successfully.

Download

Open Screenshot

Lecture 7 - Javascript

I Developed a web page that contains a table element that will be modified dynamically using Javascript.

Added the tags <html> <head> <body>
Applied some style, aesthetics is important. External CSS file.
- Reasonable layout
- Positioning, centralization, whatever needed to make look good.
- Try to harmonize the colors.

Learning Outcomes

In this assignment, I created a form with various input tags. I submitted all the data and displayed the data to the table using javascript. I created some javascript functions and filled the data in table.

Download

Open Screenshot

Lecture 8,10 - Forms Validation using JS

I developed the SignUp form using javascript validations.

Learning Outcomes

In this assignment, I learned to add validation in javascript using different methods and varibles of javascript.

Download

Open Screenshot

Lecture 11 - Image Galery

I created an image gallery using flexbox layout. I added favourite image icon on the corner of each images.

Learning Outcomes

In this assignment, I learned the Flexbox layout and varios effects on image.

Download

Open Screenshot

Lecture 1 - First Website [Bonus Lab]

Lecture 2 - Table Exercise - Employee Directory

Lecture 3 - Best Practices on Visual Elements

Lecture 4 - Developing Survey using HTML Forms

Lecture 7 - Javascript

Lecture 8,10 - Forms Validation using JS

Lecture 11 - Image Galery

Assignment 1 Preview: HTML5 Website with CSS