Frontend Assignment

Part 1: Web Designing

Part 2: Advance JavaScript
Part 3: ReactJs
Module 1) – Foundation
Do search for web-site, http, URL etc given topics in lecture.
Module 2) Fundamentals of IT
Do search for domain, hosting, SEO etc.
Module 3) HTML
• Are the HTML tags and elements the same thing?
• What are tags and attributes in HTML?
• What are void elements in HTML? With Example.
• What are HTML Entities? With Example.
• What are different types of lists in HTML? With Example.
• What is the ‘class’ attribute in HTML? With Example.
• What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML
elements? With Example.
• What are the various formatting tags in HTML?
• How is Cell Padding different from Cell Spacing? With Example.
• How can we club two or more rows or columns into a single row or column in an HTML
table? With Example.
• What is the difference between a block-level element and an inline element?
• How to create a Hyperlink in HTML? With Example.
• What is the use of an iframe tag? With Example.
• What is the use of a span tag? Explain with example?
• How to insert a picture into a background image of a web page? With Example.
• How are active links different from normal links?
• What are the different tags to separate sections of text?
• What is SVG?
• What is difference between HTML and XHTML?
• What are logical and physical tags in HTML?
• Create below example using only HTML tags without CSS.
 Module 4) CSS and CSS 3

• What are the benefits of using CSS?

• What are the disadvantages of CSS?
• What is the difference between CSS2 and CSS3?
• Name a few CSS style components
• What do you understand by CSS opacity?
• How can the background color of an element be changed?
• How can image repetition of the backup be controlled?
• What is the use of the background-position property?
• Which property controls the image scroll in the background?
• Why should background and color be used as separate properties?
• How to center block elements using CSS1?
• How to maintain the CSS specifications?
• What are the ways to integrate CSS as a web page?
• What is embedded style sheets?
• What are the external style sheets?
• What are the advantages and disadvantages of using external style sheets?
• What is the meaning of the CSS selector?
• What are the media types allowed by CSS?
• What is the rule set?
• Create image gallery using display grid with responsive

• Create below example with the help of clip path

https://github.com/jay-amin-tops/TOPS_WD/blob/main/02CSS/TaskHeader.psd
• Multiple background one side bg-color other side contain image as bg

https://github.com/jay-amin-tops/TOPS_WD/blob/main/02CSS/Services.psd
• Create below example using css waves generator (https://getwaves.io/)

https://github.com/jay-amin-tops/TOPS_WD/blob/main/02CSS/Team.psd
• Create Layouts
• Create below example responsive media query (use given link figma file)

https://www.figma.com/file/THg3uvkrmtFxI49fZyeqki/Web_Mobile-%E2%80%94-
Template-Website-(Community)?type=design&node-
id=263%3A387&t=5kSwj12CLI7djPgw-1
Desktop -web Mobile
 Module 5) HTML5

• What are the new tags added in HTML5?

• How to embed audio and video in a webpage?
• Semantic element in HTML5?
• Canvas and SVG tags

Module 6) JAVASCRIPT BASIC & DOM

• What is JavaScript?
• What is the use of isNaN function?
• What is negative Infinity?
• Which company developed JavaScript?
• What are undeclared and undefined variables?
• Write the code for adding new elements dynamically?
• What is the difference between ViewState and SessionState?
• What is === operator?
• How can the style/class of an element be changed?
• How to read and write a file using JavaScript?
• What are all the looping structures in JavaScript?
• How can you convert the string of any base to an integer in JavaScript?
• What is the function of the delete operator?
• What are all the types of Pop up boxes available in JavaScript?
• What is the use of Void (0)?
• How can a page be forced to load another page in JavaScript?
• What are the disadvantages of using innerHTML in JavaScript?
• Create password field with show hide functionalities
• Create basic math operation in JS

• Create result
 • Create a slider using JavaScript

Module 7) JQuery Basic, Effects & Advanced

• What is jQuery?
• How to Apply CSS Using JQuery, How to Add Class and Remove Class in
Jquery, JQuery Animation?
• How to create slider with animation?
• Event bubbling tickling example
 Module 8) Bootstrap Basic & Advanced

• What are the advantages of Bootstrap?

• What is a Bootstrap Container, and how does it work?
• What are the default Bootstrap text settings?

• What do you know about the Bootstrap Grid System?

• What is the difference between Bootstrap 4 and Bootstrap 5

• What is a Button Group, and what is the class for a basic Button Group?

• How can you use Bootstrap to make thumbnails?

• In Bootstrap 4, what is flexbox?

• How can one create an alert in Bootstrap?

• What is a bootstrap card and how would you create one?

 Advance JavaScript for Front-End
Introduction and Code Quality
● Write a program to Show an alert
● What will be the result for these expressions?
1. 5 > 4
2. "apple" > "pineapple"
3. "2" > "12"
4. undefined == null
5. undefined === null
6. null == "\n0\n"
7. 7. null === +"\n0\n"
● Will alert be shown?
if ("0") { alert( 'Hello'); }
● What is the code below going to output? alert( null || 2 || undefined );
● The following function returns true if the parameter age is greater than
18. Otherwise it asks for a confirmation and returns its result:
function
checkAge(age)
{
if (age> 18) { return true; }
else {
// ...return confirm (‘did parents allow you?');
}
}
● Replace Function Expressions with arrow functions in the code below:
Function
ask(question, yes, no)
 { if (confirm(question))yes();
else
no();
}
ask("Do you agree?", function()
{ alert("You agreed."); },
function() {
alert("You canceled the execution."); }
}

Data Types and Objects

● Write the code, one line for each action:
a) Create an empty object user.
b) Add the property name with the value John.
c) Add the property surname with the value Smith.
d) Change the value of the name to Pete.
e) Remove the property name from the object.

● Is array copied?
let fruits = ["Apples", "Pear", "Orange"]; // push a new value into the "copy" let
shoppingCart = fruits; shoppingCart.push("Banana"); // what's in fruits?
alert( fruits.length ); // ?

● Map to names
let john = { name: "John", age: 25 }; let pete = { name: "Pete", age: 30 }; let mary =
{ name: "Mary", age: 28 }; let users = [ john, pete, mary ]; let names = /* ... your
code */ alert( names ); // John, Pete, Mary
● Map to objects
let john = { name: "John", surname: "Smith", id: 1 }; let pete = { name: "Pete",
surname: "Hunt", id: 2 }; let mary = { name: "Mary", surname: "Key", id: 3 }; let
users = [ john, pete, mary ]; let usersMapped = /* ... your code ... */
 /*
usersMapped = [
{ fullName: "John Smith", id: 1 },
{ fullName: "Pete Hunt", id: 2 },
{ fullName: "Mary Key", id: 3 }
]
*/ alert( usersMapped[0].id ) // 1 alert( usersMapped[0].fullName ) // John Smith
● Sum the properties There is a salaries object with arbitrary number of salaries. Write
the function sumSalaries(salaries) that returns the sum of all salaries using
Object.values and the for..of loop.If salaries is empty, then the result must be 0.
let salaries = {
"John": 100,
"Pete": 300,
"Mary": 250
};
alert( sumSalaries(salaries) ); // 650
● Destructuring assignment We have an object: Write the Destructuring assignment that
reads:
a) Name property into the variable name.
b) Year’s property into the variable age.
c) isAdmin property into the variable isAdmin (false, if no such property)
d) let user = { name: "John", years: 30};
● Turn the object into JSON and back Turn the user into JSON and then read it back
into another variable.
user = { name: "John Smith", age: 35};
 Document, Event and Controls

● Create a program to hide/show the password

● Create a program that will select all the classes and loop over and whenever i click the
button the alert should show
● Create a responsive header using proper JavaScript
● Create a form and validate using JavaScript
● Create a modal box using css and Js with three buttons
● Use external js library to show slider
● Prevent the browser when i click the form submit button

New Request
● What is JSON
● What is promises
● Write a program of promises and handle that promises also
● Use fetch method for calling an api https://fakestoreapi.com/products
● Display all the product from the api in your HTML page

JavaScript Essentials

• Calculate subtotal price of quantity in JavaScript?

• What is JavaScript Output method?

• How to used JavaScript Output method?
• How to used JavaScript Events to do all examples?
 ReactJs
MODULE: 9 ReactJs Intro
• What is React Js?
• What is NPM in React Js?
• What is Role of Node Js in react Js?
• What is CLI command In React Js?
• What is Components in React Js?
• What is Header and Content Components in React Js?
• How to install React Js on Windows, Linux Operating System? How to Install
NPM and How to check version of NPM?
• How to check version of React Js?
• How to change in components of React Js?
• How to Create a List View in React Js?

• Create Increment decrement state change by button click?

 MODULE: 10 List and Hooks
• Explain Life cycle in Class Component and functional component with Hooks

MODULE: 11 Styling & Advance React

● Create Shopping site home page with Styled- component

MODULE: 12 React Router

● Create React app with modules and lazy loading (Admin-user module with
child Router and outlet)
 MODULE: 13 React – Applying Redux

• What is Redux?
• What is Redux Thunk used for?
• What is Pure Component? When to use Pure Component over Component?

• What is the second argument that can optionally be passed tosetState and what is
its purpose?

• Create a Table and Search data from table using React Js?

● Create Login registration with CRUD Application using API (Redux)