You could find the detialed docuemnt of Day's on https://docs.google.com/document/d/1BxSVqurnJbbfR0dZf2hPqQ6EhsysygEXMLgNH1It8Rc/edit?usp=sharing
Day 1 The objective of today's activities is to help you get familiar with HTML. Sessions Introduction to SVN. Introduction to web architecture (client-server basics). Research
- Group the following applications into any of the 3 categories below. Give reasons for your answer. An Internet-enabled application. An Internet application. A desktop application. Yahoo Messenger, Google Mail, Outlook Express, Facebook, Tally, Adobe Photoshop, Microsoft Internet Information Server.
- What is HTML? List a few important tags in HTML. What is the importance of ‘meta’ tag, ‘link’ tag and ‘script’ tag?
- What is a DocType and what is its importance? What type of document is an HTML page? Below is the list of elements you should be familiar with by the end of this exercise. table, hr, head, body, p, span, div, line breaks, a, input, select, form, button, img, link, style, script, meta, title, ul, ol, li, label, canvas. Programming Create the “Employee Input Form” shown below:
- Write the Html code to display an image. Add a tooltip to the image, which reads “My favorite bird”.
- Create a link as follows: Search on Google. When this element is clicked, redirect the user to http://google.com.
Day 2-3 The objective of this activity is to understand what CSS is and how it can be used to make web applications with good interfaces. Sessions (mid-day on Day 2) Creating a website. Creating HTML, CSS, JS files Introduction to CSS. Why use CSS? What are the important properties of CSS? How should one go about integrating CSS into their web apps? Research (day 2 till mid-day) What is CSS? Distinguish between CSS2 and CSS3. What are the different ways of including CSS to your page? Why is the external style sheet useful? What are the uses of embedded style sheet? How to use CSS selector? Explain the three main ways to target elements. What is box model ? Explain the term Responsive web design. What is CSS flexbox? Explain the concept of pseudo-elements in CSS. Write all the position states used in CSS. Differentiate between inline and block elements. How would you use media queries in a mobile-first approach? How do you handle browser differences in your user base? Programming Que 1. Create an HTML page as per following specifications: It should be responsive. Html code should same for all the responsive screens. Use Flex layout to develop this assignment. On hover address label, it should have a curve border around it. Design for Desktop Design for mobile Que 2.Create an html page Take dummy images from internet
Day 4 The objective of the current day’s task is to learn about common HTML elements, their properties and associated events, and introduction to the JavaScript HTML DOM. Session About HTML DOM structure and associated events. Research
- What is the difference between a client-side scripting language and a server-side scripting language?
- What are .js files? How would you include one or more .js files from within your web pages? Programming Que 1. Write a program that has the following characteristics - Contains two text boxes that allow the user to type in his first-name and surname. Contains a button that when clicked displays the complete name of the user in a message box. Remember that the page should not be submitted to the server. Que 2. Create an Employee Form as given below and handle following validation: The First Name field should have focus by default. Name of Spouse is editable only when Marital Status is set to Married. When the RESET button is pressed all the fields are cleared. When the SAVE button is pressed following validation should be done: If any field is empty, alert the message “Please enter a [field name]” and set focus to the appropriate element. Check that the name and spouse name does not contain any white spaces. If one or more of these fields are incorrectly entered, show an appropriate message and set the focus to the first incorrectly filled-up field. If all the rules are followed, display the message “Thank You”
Day 5 The objective of the current day’s task is to learn how to manipulate data within the client's browser, using JavaScript. Research How do you open a popup window in your browser? How does the Location Object work? How does the Browser History works? Programming Que 1. Create an HTML page with an OPEN POPUP and a CLOSE POPUP button. When you click on open a popup window is opened in the center of the screen. The new window contains the text “I am child window” in bold. The height of the child window is 400px and the width is 200 pixels. The window should not be resizable and should not have a title bar. When you click on close in the parent window, the child window should be closed. Q2. Create the following HTML page: Calculate the character left and Sms Per customer count dynamically. Handle all copy/paste events. SMS Per Customer should be restricted to 3 only and after that alert should be shown “Maximum limit reached”.
Day 6 The objective of the current day’s task is to learn how to manipulate data within the client's browser, using JavaScript, basic regular expressions. Research Read the programming tasks for the day, given below. Carefully identify ALL the JavaScript functions and properties you will need to use, BEFORE writing any code. Make a list of the functions and properties you plan to use, with a one-line description. Show this list to the persons you are reporting to before proceeding with the programming. As far as possible, write clean & optimal javascript. What are Regular Expressions? Why are they used? How can you use regular expressions in JavaScript? Programming Reuse the “Employee Input Form” you created on Day 4. On clicking the Save button, add the user's details to a javascript array and clear all fields so that you can take the details for another employee. The javascript array stores the details of multiple employees. Reprogram your validation functions from Day-4 to use Regular expressions. Add Show and Hide button to the page. When the user clicks this button, display the data from the javascript array in a table on the page as shown in the figure below. Place the table 100 px below the Save button. As user submits the form and table is shown the entries should be added to the table with animation each row element should fade in the respective cell. Alternate records should be in alternate colors as shown. The table should have a fixed height. A scroll bar should appear only when needed. When View button is clicked and there are no records in the array, the 1st row should show the message “No records found”.
Day 7-8 Today you will learn about JSON, JavaScript and JavaScript classes. Session JSON Mutable v/s Immutable Pass by value / Pass by reference Usage of global vars. What is “this”? JavaScript optimization. JavaScript classes and prototypes. Research What is the difference between Function Declarations and Function Expressions. What is hoisting (in JavaScript). Programming Que 1. Create 5 button elements using JavaScript in 'for loop'. Add click event listener to them (in the same 'for loop'). On clicking, they should alert their index. Append these buttons into DOM. Buttons should be shown in a slider. On clicking the arrows respective buttons should be shown with slide animation. Que 2. Create an HTML page with a button as Add Timer. On adding the timer an instance of the timer should be created with Start/Stop/Pause/Reset Buttons. The Seconds hand should turn red when the timer reaches 10 seconds.
Day 9-10 Today you will learn about Jquery, CSS3 and Ajax Research What is jquery? List and explain different jquery selectors. What is Request/Response? What is Ajax? How will you handle success, failure of Ajax response? What are the statuses of serve response? Programming Que 1. Name Place Animal Thing - Drag and Drop Activity with basics of JSON notation and Jquery. A drag and drop activity emulating the classical Name-Place-Animal-Thing game is to be developed. It should consist of several drag items, which are to be classified into Name, Place, Animal or Thing, by dragging and dropping them into their respective Drop Slots. Que 2. Read a json file and fill a form accordingly. Show “loading...” text in the browser when user hit request and hide it when you get response. If request failed show text “Server Error ...”. Use the website http://myjson.com to host your JSON file.
Day 11-12 Today you will learn about AngularJs. Research What is MV* in Javascript? MV* is Model-View-wildcard architecture. MV* Frameworks are designed to make our code easier to maintain , easier to Test(E2E , UnitTest) and to improve the user experience.MV* framework popular patterns Model-View-Controller(MVC) Model-View-View Model(MVVM) by Microsoft Model-View-Presenter(MVP) AngularJS , BackboneJS , KnockoutJS, EmberJS , Meteor, ExtJS some of the famous MV* framework libraries. What is AngularJs? Why AngularJs? Two-way binding,templating, RESTful api handling, modularization, AJAX handling, dependency injection etc What is Module, Controller , Directives in AngularJs? Read AngularJs API What is Routes in AngularJS? Html5 localstorage ? Bootstrap.css ? Difference between AngularJS and Angular ? Programming Que 1. Create a page with 2 buttons in the centre Add Customer and Manage Customers. On Add customer button a modal should open with required details to be filled and a separate customer listing page. Fields to be included:- Country* Mobile Number* Name* Alternate Number Email PAN Pincode* Address* Area Landmark Field marked with * are mandatory to add a customer Listing Page should be responsive Customer form will have all the validations Pagination functionality should be implemented To store customer information use localstorage User should be able to edit/Delete customer On clicking on customer row (on listing page), information should be prefilled on customer form (Use the angular route parameters to prefill the edit customer form) Use Angular service to get/update customer information Add a checkbox for every customer row on listing page, so that a user can delete multiple user There should be a check fox in header of listing page to select/unselect all the customers (on the page) On hover or select show should be shown.
Day 13-14 Research How to implement custom directives? How to use Angular Factory and Service? Programming Write a program to implement custom auto-suggest when you start typing in an input text box. Autosuggestion should be displayed after 3 char in the input box. Keyboard navigation should work like google autosuggest. Create directive for mobile number input box.