Weekly Schedule

From Full-Stack Web Development (CS371)
Jump to: navigation, search

Week 1: HTML5

Lecture 1 (2 hours)

Lecture

  • Introduction to Full-Stack Development: Powerpoint presentation where I present a survey of main Web technologies


Lecture 2 (2 hours)

Lecture

  • HTML 5 part 01: live demonstration from w3schools from HOME to STYLE

In-Classroom Activities

  • Activity 1: build personal homepage (after finishing the BASIC HTML introduction page) to apply the concepts
  • Activity 2: improve the layout of your personal homepage using styles (after finishing the STYLE)

Home Activities

Practicing HTML exercises at home to review the concepts of the last lectures on w3schools.
HTML Exercises: From Attributes to Styles
You need to do from HTML Attributes until HTML Styles.

  • Estimated Time: 15 minutes.
  • Grade: Not Graded (review and practice - must be done).


Week2: HTML5

Lecture 3 (2 hours)

Lecture

In-Classroom Activities

  • Activity 1: Make a table of your class schedule. The table must use different colors for different courses. use inline style and also CSS style in head and external style sheet. Some guidelines:
    • put images into an images folder
    • put css into a css folder
    • your page must be called index.html
    • try to make the best design possible - as much as you can for formatting using basic CSS style (try inline, internal and external)

Home Activities

Practicing HTML exercises at home to review the concepts of the last lectures on w3schools.
HTML Exercises: From COMMENTS to TABLE (the end)]
You need to do from COMMENTS until TABLE (the end).

  • Estimated Time: 30 minutes.
  • Grade: Not Graded (review and practice - must be done).


Lecture 4 (2 hours)

Lecture

  • HTML 5 part 03: live demonstration from w3schools from TABLE to URL ENCODE

In-Classroom Activities

  • Activity 1: add relevant information into HEAD section of their webpage. Make your page response to the screen size. Add some comments to your HTML page.
  • Activity 2: Create a list that describes your hobbies: give brief description for every hobby.
  • Activity 3: write a javascript instruction that when you click on a button it changes, your element of your name to "Button Clicked" and the font-size of the text to 30 px. Refer to this link.

Home Activities

Practicing HTML exercises at home to review the concepts of the last lectures on w3schools.
HTML Exercises: From TABLE to FORM ATTRIBUTE (the end)]
You need to do from TABLE until FORM ATTRIBUTE (the end).

  • Estimated Time: 30 minutes.
  • Grade: Not Graded (review and practice - must be done).



Week3: HTML5

Lecture 5 (2 hours)

Lecture

  • HTML 5 part 03: live demonstration from w3schools from FORMS

In-Classroom Activities

  • Activity 1: Assignment 01: Table and Forms

Home Activities

Complete Assignment 01 Table and Forms at home and submit through LMS


Lecture 6 (2 hours)

Lecture

  • CSS part 01: live demonstration from w3schools from HOME to []

Useful Resources

In-Classroom Activities

  • Activity 1:

Home Activities

CSS Assignment 02


Week4: CSS

Lecture 7 (2 hours)

Lecture

  • CSS part 02

In-Classroom Activities

  • No activities

Home Activities

CSS Assignment 03


Lecture 8 (2 hours)

Lecture

  • CSS part 03

Useful Resources

In-Classroom Activities

  • Activity 1:

Home Activities

CSS Assignment 04: Design of Webshop


Week5: CSS and Bootstrap

Lecture 9 (2 hours)

Lecture

  • Combinators
  • Pseudo-Classes
  • Pseudo-Elements
  • Attribute Selectors
  • Navigation Bar
  • Dropdown
  • Grid View

In-Classroom Activities

  • No activities

Home Activities

These are selected CSS exercises to do before next lecture

Doing these exercises is important to master the concepts. Some questions in exam might be related to these concepts.
Grading: not graded but mandatory


Lecture 10 (2 hours)

Lecture

Useful Resources

In-Classroom Activities

  • None

Home Activities

  • Developing a Website with Bootstrap: In this assignment, you will design a professional website for the Webshop using pure Bootstrap template. You should not use any existing Bootstrap themes or template, but the basic theme as it is presented in https://www.w3schools.com/bootstrap/default.asp

Keep the same fonts, styles, contextual colors, ... The objective is to apply the basic concepts of Bootstrap to improve the design of Webshop website that you did in the previous assignment.



Week6: CSS

Lecture 11 (2 hours)

Lecture

In-Classroom Activities

  • No activities

Home Activities

These are selected CSS exercises to do before next lecture


Lecture 12 (2 hours)

Lecture

  • 'PHP:

Useful Resources

In-Classroom Activities

  • None

Home Activities