slide-1

Web Designing - HTML, CSS and Js

Ford and Lord International Pty Ltd


Web Designing

Virtual classes on Wednesdays at 18:30hrs (Sydney/Canberra - Australian Standard Time)


Week-1


Click here to join the virtual class

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>

Click here to access the sample webpage for this week


Week-2


Click here to join the virtual class

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

Click here to access the sample page for this week

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


Week-3


Click here to join the virtual class

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

Test Your Knowledge - MCQs

Click here to access the sample page for this week

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


Week-4


Click here to join the virtual class

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

Test Your Knowledge - MCQs

Click here to access the sample page for this week

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


Week-5


Click here to join the virtual class

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

Click here to access the sample page for this week

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


Week-6


Click here to join the virtual class

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

Click here to access the sample page for this week

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


Week-7


Click here to join the virtual class

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

Test Your Knowledge - MCQs

Click here to access the sample page for this week

Assignment - Add a navigation bar to your site




Week-8


Click here to join the virtual class

Objectives for today's class

Test Your Knowledge - MCQs

Click here to access the sample page for this week

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



Week-9

Click here to join the virtual class

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

Click here to access the sample page for this week

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



Week-10

Click here to join the virtual class

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

Click here to access the sample page for this week


Click here to access Random Number's webpage

Add a media query to your iframe element to make your linked video responsive





Week-11

Click here to join the virtual class

Objectives for today's class

  • How to create a Login & Registration Form
  • Use of form, lable, input and span tags to create a Registration Form
  • Use of multiple CSS techniques to format the Registration Form
  • border: none; & outline: none, CSS properties with input element
  • Box Shadow
  • Cursor Pointer
  • button:hover and button:focus pseudoclasses
  • Revision

Click here to access the sample page for this week


Add a Login and Registration Form to your website





Week-12

Click here to join the virtual class

Objectives for today's class

  • Creating multiple columns (publication style) on a webpage
  • New CSS properties display: flex and text-align: justify
  • New tags Bold, Italics and underline
  • Revision

Click here to access the sample page for this week


Add a muliple column page to your website




Week-13

Click here to join the virtual class

Objectives for today's class

  • Continue lesson on flexbox - Creating multiple rows and columns with the help of flexbox
  • New CSS properties flex-wrap: nowarp
  • New tags sup and sub
  • Revision

Click here to access the sample page for this week


Add a muliple rows and columns to your website




Week-14

Click here to join the virtual class

Objectives for today's class

  • Creating a table
  • New HTML tags - table, tr, th and td
  • New HTML tags sup and sub
  • Revision

Click here to access the sample page for this week


Add a new page with a table on your website




Week15

Click here to join the virtual class

Objectives for today's class

  • Design a modern website for a restaurant
  • Using external style sheet
  • How to use background images
  • Revision

Click here to access the sample page for this week


Recreate the first page for the restaurant website




Week16

Click here to join the virtual class

Objectives for today's class

  • Continue designing the website for the restaurant
  • How to fix background image
  • Adding two more Divs and fixing positions
  • How to fix an element on the webpage
  • Revision

Click here to access the sample page for this week


Modify your website as per class today




var font_color = "default"; setActiveStyleSheet(font_color);