Information on the Web is stored in documents, using the HTML (HyperText Markup Language) language. Web clients interpret HTML and display the documents to a user. The protocol that governs the exchange of information between the Web server and Web client is named HTTP.

This week, we will give you a brief introduction to the topics of HTTP and how it works.

The topics in specific you will be learning are:

• What are websites and how do they work? 
• How does the Internet work? 
• The browser and HTTP. 
• How have web applications evolved- Web 1.0, 2.0, 3.0? 
• HTTP session and session storage.
• Fundamentals of web application design- The N-tier architecture.
• Role of HTML, CSS, and JavaScript.
• Set up the software development environment you will use throughout the remainder of the course.

During the course of this week, you will be learning how to structure your webpage using HTML5. HTML5 is a programming language whose acronym stands for HyperText Markup Language. It allows the modification of the appearance of web pages. It is also used to structure and present content for the websites.

The topics taught in this week are:

• Valid document structure, anatomy of HTML syntax
• HTML5 semantic tags - Elements and attributes, Block and inline elements
• Essential HTML5 tags - headings, paragraph, styles, comments, colours
• HTML lists - unordered and ordered lists
• Inserting images using HTML 
• How to create hyperlinks using anchor tags
• HTML tables
• HTML forms and create a simple contact me form
• HTML Div-Layout and separate content for CSS styling
• Classes, ID
• HTML iFrames
• HTML Graphics
• HTML Media
• HTML APIs- Geolocation, Web Storage, Web Workers, Drag and Drop, SS Event
• HTML best practices- HTML vs XHTML

During this week, you will learn how to style your webpage. Styling a web page is vital as it impacts how the audience perceives your brand, product, or service. The first impression that they have on your website can make either stay on your page or migrate them to a competitor’s. This is where Cascaded Style Sheets(CSS) come into play.

During this week, you will learn:

• Basics of CSS3, CSS rules
• Comments, Colors, background, border, margin, padding, height and width
• CSS selectors and properties
• Inline, internal, and external CSS
• Font styling, web safe fonts - texts, icons, links
• The 'Box model'
• CSS sizing methods
• CSS static, relative, and absolute positioning systems
• CSS float and clear 
• Pseudo classes and pseudo elements
• Class vs. ID
• Opacity, Navigation bars, Dropdowns
• CSS rule conflict resolution. specificity, and implementing style hierarchy
• Images and forms styling
• Transitions, animations, pagination, 2D and 3D transforms
• Responsive web design 
• The grid system
• Flexbox, media queries
• CSS coding best practices

As the number of devices that are available to the general populace increases, your website will receive traffic from various forms of devices. Each of these devices has different screen sizes, different UIs, and other differing features. So, it is vital that you ensure that your website looks best regardless of the device it is viewed from. During the classes this week, you will learn about Bootstrap4. Bootstrap is an open-source front-end framework for faster and easier web development. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, models, image carousels and many other, as well as optional JavaScript plugins.

This week’s content will have:

• The mobile-first paradigm
• Wireframes in the design phase
• Twitter Bootstrap- Grid System
• How to install the Bootstrap framework
• Bootstrap containers to layout website easily
• Other Bootstrap components- buttons, tables, images, jumbotron, alerts, progress bars, spinners, dropdowns, forms, panels, modal, tooltip, popover, scrollspy, utilities, media objects and filters
• Bootstrap carousels
• Bootstrap cards 
• Bootstrap navigation bars
• Bootstrap themes
• Font awesome

A good User Interface (UI) is almost invisible to the user. It avoids unnecessary clutter and gets straight to the point. This is done by using a myriad of labels and visual aids. However, the most vital feature for a good UI are common UI elements. By integrating common elements in your UI, the users will feel more comfortable and will be able to get things done more quickly.

During the course of this week, you will learn:

• Web Design - Colours, typography
• Principles of a good User Interface (UI)
• Principles of a good User Experience (UX)
• Usability- Don’t make the user think
• Naturalness
• User Control
• Predictability
• Flexibility and efficiency
• Consistency
• Error prevention
• Clarity
• Visual hierarchy
• Progressive disclosure
• Accommodate all types of users
• Fitts' law
• Protect the user’s work
• Design for interaction
• Focus on one action
• Grouping and breakup
• Prioritise performance
• Principles- DRY, KIS, less is more, Responsive Web Design (RWD).
• Information architecture
• User research and usability testing
• Improving accessibility
• Implementing these principles on our website.

The most common usage for a website is in E-commerce. In general, an eCommerce website is considered to be highly dynamic with a lot of elements. That is why the student is being introduced to this particular type of website. It will help them handle almost any type of website thereafter.

During this week we will teach you how to:

• Interact with clients for creating their eCommerce website
  
• Building the website front end from scratch with the help of wireframes
• Code walkthrough

This week we will be taking our website to the next level with interactivity and reaction to page events such as page load, button clicks, mouse movements, keyboard input etc. We’ll dynamically alter the contents and style of a webpage. A big advantage of having a website which is actively interacting with the user is more user engagement. This will give more leads and in turn more revenue.

The topics we will be covering in detail during this week are:

• Variables, data types, operators in JavaScript 
  
• Statements, syntax, comments, and events
• Loops, control, and conditionals 
• JS forms
• Document Object Model (DOM)
• Browser Object Model (BOM)
• JS functions
• Scope and closures 
• Object-Oriented Programming (OOP) 
• JS objects and prototypes- keyword
• Cookies
• Exception handling
• Arrow functions
• Promises
• Template string, default parameters, spread and rest operators, destructuring, generators, set, map, weak set, weakmap 
• HTML APIs
• Separation of concerns, refactoring, debugging, and coding best practices

In computer programming, refactoring is generally done to improve the design, structure, and/or implementation of the software. All these actions are done while preserving its functionality.

During this week we will learn about:

• Installing and using the jQuery framework
  
• jQuery syntax, selectors, events and functions
• Manipulate text, styles and attributes with jQuery
• Create animations and customizations with jQuery
• Responding to user-initiated events with jQuery
• Traversing - ancestors, descendants, siblings, filtering

We will learn how to code your eCommerce website with the help of JavaScript. The importance of JavaScript as a web technology can be determined from the fact that it is currently used by 94.5% of all websites. As a client-side programming language, JavaScript helps web developers to make web pages dynamic and interactive by implementing custom client-side scripts. The topics we will be discussing are 

• Possibilities with JS 
  
• Animating our website
• Code walkthrough

We will be learning how to serve and retrieve data using 3 data types- AJAX, JSON and XML.

We will be covering:

• Serving and retrieving data to a web site
• Asynchronous loading - Set up and handle AJAX requests and responses. 
• JSON
• XML
• Processing JSON data
• JSON vs. XML

Now that we have covered the major parts of the course, we will now be moving on to the concluding week.

During this week, we will be 

• Building final parts of the eCommerce site UI
• Adding asynchronous calls to the website and Data transfer using JSON
• Summary
• What next?
• Motivational tips