Scribd
Upload
152 views24 pages

A Workshop On - Basic Web Design and Development in 2017

Uploaded by

Sakib Tanmoy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
152 views24 pages

A Workshop On - Basic Web Design and Development in 2017

Uploaded by

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

A Workshop on:

Basic Web Design and


Development in 2017

May 23, 2017


Bangladesh Army University of Science & Technology
(BAUST)
Md. Maheraj Uddin
Senior Software Engineer, Fox Rent A Car,
[email protected]
TOPICS:
➢ Getting Started - Web Starters

➢ Web Developer & Classification

➢ Web Design: front-end development

➢ Web Development: backend development


Web Starters
INTERNET

WWW

Web Browser: Chrome, Safari, Firefox

Web Server

URL - (protocol + host + port + path + [query string] + [anchor])

Text Editor - Notepad++, textmate, Sublime Text, Many More...

HTML
Web Starters
URL - (protocol + host + port + path + [query string] + [anchor])

https://www.google.com/search?q=maheraj+uddin&start=2
Web Developer
- Front End Developer

- HTML

- CSS: LESS, SASS

- JAVASCRIPT: Jquery, Angular JS, Node JS

- BackEnd Developer

- Server Side Language: PHP, .NET, JAVA, Phython, Ruby ...

- Database: MySql, Oracle …

- Full Stack Developer


Web Design: front-end web development
Front-end web development, is the practice of producing HTML, CSS and
JavaScript for a website or Web Application so that a user can see and
interact with them directly.

➢ HTML: HTML

➢ CSS: CSS

➢ JAVASCRIPT: JS
Hyper Text Markup Language (HTML)
- File Extension: .html

- Current version HTML5

- Old versions: 4, 3.2, 2.0, 1

- Official Page: https://www.w3.org/html

- Quick Learn:

- https://www.w3schools.com/html

- https://www.tutorialspoint.com/html

- http://html.com
Cascading Style Sheet (CSS)
- File Extension: .css

- Current Version: 3

- All Versions: 2, 1

- Official Page: https://www.w3.org/Style/CSS

- Quick Learn:

- https://www.w3schools.com

- https://www.tutorialspoint.com

- www.codecademy.com/learn/web
HTML With CSS
- Inline CSS

- Internal CSS

- External CSS
JavaScript
- File Extension: .js

- Official Page: https://www.javascript.com

- Quick Learn:

- https://www.javascript.com/try

- https://www.codecademy.com/learn/javascript

- https://www.w3schools.com/js/

- https://www.tutorialspoint.com/javascript/

- Code Examples:
HTML & CSS & Javascript
Code Example:
Professional Web Design
Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels

- Front-end web frameworks

- Twitter Bootstrap,

- Foundation
Bootstrap V4.0.0
- Bootstrap

- Installation/getting started

- Examples

- Documentation for layout design

- Layout

- Grid system

- Component

- Carousel
Server & Deployment
- Setup Local Server

- Apache, Nginx, IIS,

- Starter: XAMPP Server

- Setup Online Server: https://byet.host/free-hosting/news

- Deploy & test locally

- Deploy on remote server: using ftp client: FileZilla


Web Development: backend development
Let’s say you want to build an application for member registration and login for a program.

- Front-end Development

- You need to design a web site

- Backend Development

- You need to design the database

- Finally you need to implement server side programming which will connect to your
db to insert and update data coming from your website and view stored data from
db to your web site.
Server Side Programming Languages
- PHP

- Java

- Asp.net

- Perl

- Ruby

- Python

- Node.js (Javascript server side)


Servers
- Apache

- Nginx

- Microsoft-IIS

- Tomcat

- Many More ….
Login & Registration APP
- Try to find similar app in the web(github, etc...)

- Download and customize to meet your requirement.

- https://github.com/fethica/PHP-Login

- http://fosociety.byethost7.com/
Know Your Tools
- Operation System

- Linux

- OS X(Mac)

- Windows

- IDE

- IntelliJ IDEA

- Eclipse

- PhpStorm
Key to Success
- Team Player

- Excellent Communication skills

- Be Positive

- Using Existing Frameworks

- Helping out Colleagues & Respect for other’s work

- Patience

- Time is Money, Money is Time


Thank you for your patience.
You have already proven that you are
ready to become a web developer.
AND!!!
Do not miss it
American Genius Series 1 1of8 Jobs vs Gates (2015)

You might also like