Scribd
Upload
15 views

UI SetUp

Uploaded by

krishnapadaghosh8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

UI SetUp

Uploaded by

krishnapadaghosh8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

1.

Front End Syllabus


===============================
- HTML
- CSS
- Bootstrap
- JavaScript [ES5, ES6, ES7]
- jQuery
- Sass
- TypeScript
- Introduction to Angular and React js.

Setup Environment for Web Development


================================================================
1. Download and Install Node.js on your PC.
- We are downloading and Installing node.js for a "Package Manager"
called "NPM"
- You can also use other package manager tools like
- Yarn
- Bower
- GRUNT
- RubyGems
- NuGet
- We will use "NPM" as package manager.

Ex:
- visit "www.nodejs.org"
- download 16x version
- Open Installer and follow steps

2. Test node and npm


- Open your command prompt
run -> cmd
- Type the following commands

C:\> node -v
C:\> npm -v

Note: Make sure that you have node 12+ and npm 6+ version.

FAQ: What is Package Manager?


Ans : It is a software tool used for installing various libraries
required
for project.

3. Download and Install an Editor on your PC


- Editor provides an IDE [Integrated Development Environment].
- You can build, debug, test and deploy applications.
- We will use the editor "Visual Studio Code".

https://code.visualstudio.com/

- Download and Install

Not - Visual Studio


It is - Visual Studio Code

4. You have to download few extentions for VS Code

- Live Server [Ritwik Dey]


- Vscode-icons
- Intellisense for CSS class names in HTML

Summary
- - - - - - - - - - - - - - - - - - - - - - - - -
- Install Node.js
- Install Visual Studio Code
- Install Extentions
Live Server
Vscode-icons
Intellisense for CSS class names in HTML

How to set up Windows default Web Server IIS ?


===================================================

IIS [Internet Information Services Manager] = Locate Web Server


on your Windows PC.

- Open Window Control Panel


- Switch to "Large Icons"
- Go to "Administrative Tools"
- Look for "Internet Information Services Manager".

Test Web Server


Open any Browser: IE, Edge, Chrome, FireBox, Safari Address:
http://127.0.0.1 (or) http://localhost

How to create a new Project (Web Application)


=========================================================================
=======
1. Open any PC location and create a folder for project.

D:\Amazon-Shopping

2. Open project folder in Visual Studio Code

- Go to "File Menu"
- Open Folder
- Select
D:\Amazon-Shopping

3. Go to Terminal Menu and Select "New Terminal" or use shortcut [Ctrl


+ Shift + ` ]
(` this is BackTick before 1 button)

4. Change the default terminal from "Power Shall" to "Command Prompt".

5. Type the following command in terminal

D:\Amazon-Shopping> npm init -y

[ npm = Node Package Manager


init = Initalization of Project
-y = Accept all project meta data
]
This will generate "package.json" file.

FAQ: What is package.json?


Ans: It is project initialization file, it contains meta data.
Meta data is information about project.
- Project Name
- Version
- Copyrights
- License
- Dependencies etc..

6. Add following folders into project


- public
- src

Public : Comprises of static resources like-


html, images, text documents, audio, video etc..

Src : Comprises of dynamic resources like


css, scss, js, ts, etc..

Add "index.html" file into public folder.


Note : Every porject start with a file "index.html". It is Startup
page.

You might also like