Introduction to front end web development
This course is currently offered only as part of a larger course. Please book this course instead:
Introduction to full stack web development
You are free to pay for and attend just the first half of the course, which deals with front-end web development only.
2 weekends (Saturdays or Sundays) of intensive onsite lectures and tutorials on. Offline work and teacher assessments take place in between classes.
There are no Academic requirements for this course
Students are encouraged to attend the class with their own laptops as additional costs would apply for use of in-house computers. Furthermore, students are required to do off-site tutorials which would require the use of a computer.
Basic Training: For people who would like to have a good grounding in Internet technologies, web building and/or software development. This course does not involve any examinations or issue any certification.
It is ideal for: Enthusiasts who would like to know more about building and software development; Company bosses and managers who would want a better understanding of IT and how it can be applied to their business. Students who would like to use this as a stepping stone for a certification or a degree course etc etc.
*** Week 1: HTML/CSS (FRONT END) ****
(0) Introducing the tutors
(1) What the course covers
(2) What materials are required and what you get from the course
(3) Brief history of HTML and browsers
(4) BROWSER WARS: IE Vs the others
(4) Question and answer session
(6) Basic 'Hello World page' [OO]
(7) HTML Links [OO]
(8) HTML Forms [OO]
(9) HTML Images [OO]
(10) Advanced HTML tags [OO]
(11) Question and answer session
(12) Introduction to CSS
(13) Inline CSS
(14) Internal CSS
(15) Classes, IDs, DIVs and Styles
(16) External CSS and why they are useful
(17) Precedence in CSS conflicts commands (ie which one hold sway when there is a conflict)
(18) Comments for HTML and CSS!!!!
(19) colours: just 'search HTML colour codes' in Google ** or go to: http://htmlcolorcodes.com/
(20) Debugging with chrome
(21) Question and answer session
(22) Tools: The importance of text editors: all students to download and install Notepad++ and view all their pages on it.
(23) Homework 1: give students a list of HTML and CSS tags to study, test and understand
(24) Homework 2: give students a pdf of a basic HTML/CSS page that they must replicate and upload for assessment before the next class [VA TO DO]
* use something with forms etc etc....
(1) Tutorial: resolve any problems with the HTML/CSS assignment.
(2) Question and answer session
(3) Any spillovers from last week
(4) Opening talk with graphics: the rise of responsive/Adaptive web page
(5) Build a basic responsive and/or adaptive page for mobile phones from scratch
* Lengthy, hands-on lecture. Must include: Home page; Registration page, Login page; profile page; profile amendment page; contact us page
(11) Creating external .js files
(12) Strings and String Methods,
(13) Arrays and Array methods,
(14) loops and breaks (important),
(15) debugging with console.log() (as opposed to alert),
(16) arguments in functions
(17) Adding event handlers outside the HTML (eg document.getElementById("myElement").onclick = myFunction ... )
DOM Object (they must be ale to use features like getEtlementById("myElement").innerHTML='xyz' )
* hands-on with onBlur, onClick and name validation..
(19) Question and answer session
(21) Homework 2: An old-style email validation exercise.
What to expect from the course: