Web Designing - HTML, CSS and Js

Click here to access the sample webpage for this week

Course Introduction

PPS

Assignment - Download and install the Visual Studio Code (vscode) on your personal computer/laptop

Redesign the sample web page that was desinged in the class using the following tags

<div>
<img>
radio- <input>
<button>

Week-2

Objectives for today's class

Learn how to display an image as a header
Learn how to make image responsive for all screen sizes - i.e. the image should change it's size according to the size of the screen
Learn the difference between tags and elements
Brief introduction to CSS
Learn how to change font family for a particular element

Assignment - Design a single page informative website - Topic "Boeing 747" using the knowledge from today's lesson

Week-3

Objectives for today's class

What is <!DOCTYPE html>
Difference between tags and elements
Parents elements, children elements and grandchildren elements
Revision - Elements that we already have used in our sample website
New elements to use for the first time on our website - <input> and <textarea>
Display business name on the image
What is a placehlder
How to view source of a website

Assignment - Improve the design and use new elements from today's lesson in your sample website

Week-4

Objectives for today's class

Revision - Elements that we already have used in our sample website
What are attributes
Learn about new HMTL elements and tags
New elements to use for the first time on our website - <a> with "href" attribute and <embed>
How to create links to other websites using <a>tag
How to open a link in a new window

Revision

What is a placehlder
How to view source of a website

Assignment - Improve the design and use new elements from today's lesson in your sample website

Week-5

Objectives for today's class

Position text over an image
Decrease or increase the size of the text
Fixed text size vs responsive text size
Absolute and relative postions
Change the size of the textarea
New elements - <video> and <iframe>

Revision

Assignment - Improve the design and use new elements from today's lesson in your sample website

Week-6

Objectives for today's class

A brief introduction to JavaScript

Since students now have a basic understanding of HTML and CSS, it is now time to understand a bit about JavaScript. As an introduction, we will create an interesting quiz using JavaScript. The intention is only to showcase the functionality and purpose of JavaScript. You are not required to memorize or try to learn anything from this demo. However, please watch carefully, you will certainly enjoy it. The title of the quiz is, "How many tigers?". Detailed lessons will be provided in the future for you to be able to understand how to create this script.

Revision

Practice recreating HTML(Wedpage) from last few lessons. Practice makes the man perfect.

Week-7

Objectives for today's class

Introduction to navigation bar
New HTML element - <nav>
Creating mulitple <a> tags within <nav> element
Apply CSS to navigation bar
Troubleshooting - Identify and fix overlapping elements
Target selected <a>elements - with 'nav a' CSS
a:hover CSS pseudo-class

Revision

Assignment - Add a navigation bar to your site

Week-8

Click here to access code for navbar from W3schools website

Objectives for today's class

Introduction to Bootstrap
Introduction and use of libraries via CDN (Content Delivery Networks)
Introduction to W3schools
Creating a responsive navigation bar using th code from W3schools website and CDN library

Revision

Assignment - Add a responsive navigation bar to your site using the method taught in the class

Week-9

Objectives for today's class

Introduction to ul and li tags
The difference between ul and li tags
How to remove bullets from li tags
Nested li tags
Using custom desinged images as bullets(liststyles)
How many liststyles available in CSS

Revision

Add all the new tags in your website and submit your sample webiste by the end of the week

Week-10

Objectives for today's class

CSS Media Queries
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types
Add media query to add responsiveness to the linked video in the sample website
Chang background colour using media query for different screen sizes
New Challenge & New Project
Dispaly a random number in the center of the webpage - Learning Basics again - CSS and JavaScript tricks

Revision