Web Development Training

The Web Development Training Workshop was conducted by Mr. Haramrit Singh Khurana and held on 30th August 2018.

The purpose of this workshop was to train the ACM core team members to conduct a student friendly beginner web development workshop for the first-year students, which would serve as a pre-requisite for the more advanced ReactJS Workshop. The students were given PCs with proper setup i.e. (Sublime text editor, course content files, etc).

Phase 1: HTML
The students were first shown a complete website, purely based on HTML to give them an idea of what they were going to learn in HTML. The entire website was broken down into small parts that are easy for first timers to grasp. The core members were given some tips as to how to carry out the workshop in the most efficient way. The students were then taken step by step through the coding process until the final step i.e. the complete website was reached. In each step a few new lines of code were added and the meaning was explained to the students. The workflow of Phase 1 was as follows:
Part 1 - HTML Boilerplate
• boilerplate, html basic tags -> html, head, title, body
• adding a comment
Part 2 - Getting in touch with HTML code
• H1 to H6
Part 3 - Some common HTML tags(1)
• div, center, p
Part 4 - Some common HTML tags(2)
• br, footer
Part 5 - Some common HTML tags(3)
• nav, hr, a
Part 6 - Adding Images
• img
Part 7 - Navigating to Other Pages
• From previous part, they learnt adding image, now we are making it a
clickable link
• making a new page (laptop.html and mobile.html) and linking it via
<a href>,
• using <a href> to link to parts of a page using id attribute of div
• target = _blank (new tab) / _self (same tab)
Part 8 - Adding Videos and PDFs
• unordered list (ul) /ordered list (ol)
• Add video
• Add PDFs (optional, yet to be decided)
Part 9 - Tables
Part 10 – Basic form with one input
Part 11 - Other form inputs

Phase 2: JS
A basic JS file covering almost all important aspects of JavaScript was taken
as reference and broken down into tiny, easy-to-grasp, relevant parts. The core
members were explained each and every part properly. The content that was
prepared also had some mini exercises within it, in order to give the first-year
students some time to experiment with certain portions of the code.

Phase 3: CSS
A basic summary of CSS was provided to the core team members. The
course content was prepared a bit later, but the workshop instructors i.e. the core
team members were equipped with certain tips as to how the content should be,
how the flow of the CSS course should be, what topics to include/exclude, etc.

Add a Comment

Your email address will not be published. Required fields are marked *