SlideShare a Scribd company logo
BASIC WEB PAGE 
DESIGNING 
SIFAT MOMEN, PHD 
ASSISTANT PROFESSOR 
& 
AHSAN HABIB 
SENIOR LECTURER 
Skills for Life - 2014 
1
Skills for Life - 2014 
2 
Dr. Sifat Momen 
Assistant Professor, CSE 
Md Ahsan Habib 
Sr. Lecturer, CSE 
Shakil Mahmood 
Teaching Assistant, CSE
WHY SHOULD I HAVE 
A WEBSITE 
 It is cool!! 
 You can share your story with the outside world. 
 You can create your own portrait 
 You can connect with others who has the same interest as 
that of you. 
 Business (E-commerce) 
 Document your stuffs and use them on the fly 
 Most employers nowadays look at your websites to 
assess if you are the right candidate for a job 
Skills for Life - 2014 
3
WHY A PERSONAL WEBSITE 
Skills for Life - 2014 
4
SO, WHAT DO YOU NEED 
TO BUILD A WEBSITE 
There are many tools depending on what do you want to 
achieve. 
 HTML 
 Javascript 
 PHP 
 AJAX 
 CSS 
 Ruby on Rails … 
Skills for Life - 2014 
5
WORDPRESS 
 WordPress is a free and open source web-software 
that you can use to create beautiful 
website or blog. 
 WordPress was used by more than 22.0% of the 
top 10 million websites as of August 2013 
 The core software is built by hundreds of 
community volunteers, and when you’re ready 
for more there are thousands of plugins and 
themes available to transform your site into 
almost anything you can imagine 
Skills for Life - 2014 
6
WHY WORDPRESS? 
 It is free and stays that way 
 Easy to use 
 It is web-based – so you can get it to anywhere 
 Very easy to add contents 
 It gives you control which saves you money 
 All kinds of widgets make it easy to add features 
 Themes – let you style your site 
 Secure and easy to update 
 You are never out of date 
Skills for Life - 2014 
7
CREATING A WEB SITE(STAGE 1) 
You need to have an email address (You need to remember 
email address and password) 
Go to www.wordpress.com 
Skills for Life - 2014 
8
CREATING A WEB SITE(STAGE 1) 
Skills for Life - 2014 
9
CREATING A WEB 
SITE(STAGE 1) 
Fill up the page and create a site 
Skills for Life - 2014 
10
DASHBOARD (STAGE 2) 
Skills for Life - 2014 
11
APPEARANCE (STAGE 3) 
 There are many many themes in wordpress. 
Some are free and some you need to pay in 
order to use. 
 Hover over the theme which allows you to see 
theme details, preview your web page in the 
chosen theme and activate the theme. 
 For today, choose the superhero theme. 
 My suggestion is you start with the superhero 
theme and then after you build some pages, play 
with different themes and then decide which one 
you like. You can change from time to time. 
Skills for Life - 2014 
12
WIDGET (STAGE 4) 
In computing, a web widget is a software widget for the 
web. It's a small application with limited functionality 
that can be installed and executed within a web page 
by an end user. 
In Wordpress, the widget you can use is limited by 
theme you chose. 
Some interesting widgets include: 
• Search 
• Calendar 
• Music Player 
Skills for Life - 2014 
13
WIDGET (CONT…) 
Skills for Life - 2014 
14
NOW IT’S YOUR TURN 
• Create a website of 4 pages with the 
following information 
• Home: A summary of your adventure in 
skills for life till now. This should be the 
default page 
• About: Should contain details about you 
• Description of two classes in skills for life 
Skills for Life - 2014 
15
Thank you 
Skills for Life - 2014 
16

More Related Content

What's hot

Adding Content to your WordPress Website
Adding Content to your WordPress WebsiteAdding Content to your WordPress Website
Adding Content to your WordPress Website
RiceDesign
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
How word press themes work 2.19.18
How word press themes work 2.19.18How word press themes work 2.19.18
How word press themes work 2.19.18
HandsOnWP.com
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
Robert J. Stein
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010canarymason
 
Harness the power of wordpress
Harness the power of wordpressHarness the power of wordpress
Harness the power of wordpressJustin Ferrell
 
Wordpress Profitability for Agencies, Firms, and Freelancers
Wordpress Profitability for Agencies, Firms, and FreelancersWordpress Profitability for Agencies, Firms, and Freelancers
Wordpress Profitability for Agencies, Firms, and FreelancersCotton Rohrscheib
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Campcanarymason
 
FUSEe(β)で技術書プリティ化計画 公開版
FUSEe(β)で技術書プリティ化計画 公開版FUSEe(β)で技術書プリティ化計画 公開版
FUSEe(β)で技術書プリティ化計画 公開版Shunsuke Ito
 
EndLess Possibilities With Wordpress
EndLess Possibilities With WordpressEndLess Possibilities With Wordpress
EndLess Possibilities With Wordpress
Imanuel Gittens
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphiacanarymason
 
Getting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmetaGetting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmeta
Will Haire
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentalsMike Bradshaw
 
Cine scope
Cine scopeCine scope
Cine scope
Mayuresh Wadekar
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Eric Greene
 
.Less - CSS done right
.Less - CSS done right.Less - CSS done right
.Less - CSS done right
Daniel Hölbling
 
NYC PUG WordPress Presentation | The Photographer's Blogger | August 2014
NYC PUG WordPress Presentation | The Photographer's Blogger | August 2014NYC PUG WordPress Presentation | The Photographer's Blogger | August 2014
NYC PUG WordPress Presentation | The Photographer's Blogger | August 2014
Rachel Avery Conley
 
Introduction to word press
Introduction to word pressIntroduction to word press
Introduction to word press
petraukeh
 
"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai
webcat
 
Basic guide to SEO
Basic guide to SEOBasic guide to SEO
Basic guide to SEO
Shruti Goel
 

What's hot (20)

Adding Content to your WordPress Website
Adding Content to your WordPress WebsiteAdding Content to your WordPress Website
Adding Content to your WordPress Website
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
How word press themes work 2.19.18
How word press themes work 2.19.18How word press themes work 2.19.18
How word press themes work 2.19.18
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
 
Harness the power of wordpress
Harness the power of wordpressHarness the power of wordpress
Harness the power of wordpress
 
Wordpress Profitability for Agencies, Firms, and Freelancers
Wordpress Profitability for Agencies, Firms, and FreelancersWordpress Profitability for Agencies, Firms, and Freelancers
Wordpress Profitability for Agencies, Firms, and Freelancers
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Camp
 
FUSEe(β)で技術書プリティ化計画 公開版
FUSEe(β)で技術書プリティ化計画 公開版FUSEe(β)で技術書プリティ化計画 公開版
FUSEe(β)で技術書プリティ化計画 公開版
 
EndLess Possibilities With Wordpress
EndLess Possibilities With WordpressEndLess Possibilities With Wordpress
EndLess Possibilities With Wordpress
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphia
 
Getting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmetaGetting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmeta
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentals
 
Cine scope
Cine scopeCine scope
Cine scope
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
 
.Less - CSS done right
.Less - CSS done right.Less - CSS done right
.Less - CSS done right
 
NYC PUG WordPress Presentation | The Photographer's Blogger | August 2014
NYC PUG WordPress Presentation | The Photographer's Blogger | August 2014NYC PUG WordPress Presentation | The Photographer's Blogger | August 2014
NYC PUG WordPress Presentation | The Photographer's Blogger | August 2014
 
Introduction to word press
Introduction to word pressIntroduction to word press
Introduction to word press
 
"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai
 
Basic guide to SEO
Basic guide to SEOBasic guide to SEO
Basic guide to SEO
 

Similar to Basic web page designing

simple basic wordpress ppt .pptx
simple basic wordpress ppt .pptxsimple basic wordpress ppt .pptx
simple basic wordpress ppt .pptx
DeepikaAdhikari7
 
Adobe Dreamweaver cs5–Features of Adobe Dreamweaver cs5?
Adobe Dreamweaver cs5–Features of Adobe Dreamweaver cs5?Adobe Dreamweaver cs5–Features of Adobe Dreamweaver cs5?
Adobe Dreamweaver cs5–Features of Adobe Dreamweaver cs5?
Zabeel Institute
 
Difference Between WordPress and PHP Websites.pdf
Difference Between WordPress and PHP Websites.pdfDifference Between WordPress and PHP Websites.pdf
Difference Between WordPress and PHP Websites.pdf
Host It Smart
 
Amin-Shahrokhi-Resume-Edited
Amin-Shahrokhi-Resume-EditedAmin-Shahrokhi-Resume-Edited
Amin-Shahrokhi-Resume-EditedAmin Shahrokhi
 
Loving That Thing You Love: How to Contribute to WordPress
Loving That Thing You Love: How to Contribute to WordPressLoving That Thing You Love: How to Contribute to WordPress
Loving That Thing You Love: How to Contribute to WordPress
Raymund Mitchell
 
Wordpress hacks
Wordpress hacksWordpress hacks
Wordpress hacks
With in Health
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018
Noor Muhammad Khan
 
Best Digital Marketing Course in Hyderabad
Best Digital Marketing Course in HyderabadBest Digital Marketing Course in Hyderabad
Best Digital Marketing Course in Hyderabad
VidyaG26
 
Top 7 web design myths
Top 7 web design mythsTop 7 web design myths
Top 7 web design myths
Innomedia Technologies
 
ALL ABOUT WORDPRESS WEBSITE
ALL ABOUT WORDPRESS WEBSITE ALL ABOUT WORDPRESS WEBSITE
ALL ABOUT WORDPRESS WEBSITE
mehwishazam8
 
Smash.wordpress
Smash.wordpressSmash.wordpress
Smash.wordpress
Ashley Thompson
 
Up and Running in 5 mins with WordPress
Up and Running in 5 mins with WordPressUp and Running in 5 mins with WordPress
Up and Running in 5 mins with WordPressSennza Design
 
5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App
Pixel Crayons
 
web development course | web development training in Pune India
web development course | web development training in Pune Indiaweb development course | web development training in Pune India
web development course | web development training in Pune India
Continued Learning
 
Web development Course, Web development training, Learn With Continued-Learning
Web development Course, Web development training, Learn With Continued-LearningWeb development Course, Web development training, Learn With Continued-Learning
Web development Course, Web development training, Learn With Continued-Learning
continuedlearning
 
web -development- course - Continued - Learning
web -development- course - Continued - Learningweb -development- course - Continued - Learning
web -development- course - Continued - LearningContinued Learning
 
Content Management System and WordPress
Content Management System and WordPressContent Management System and WordPress
Content Management System and WordPress
Bretz Harllynne Moltio
 

Similar to Basic web page designing (20)

Amin-Shahrokhi-Resume
Amin-Shahrokhi-ResumeAmin-Shahrokhi-Resume
Amin-Shahrokhi-Resume
 
Dreamweaver the most popular web designing tool and its features
Dreamweaver   the most popular web designing tool and its featuresDreamweaver   the most popular web designing tool and its features
Dreamweaver the most popular web designing tool and its features
 
simple basic wordpress ppt .pptx
simple basic wordpress ppt .pptxsimple basic wordpress ppt .pptx
simple basic wordpress ppt .pptx
 
Adobe Dreamweaver cs5–Features of Adobe Dreamweaver cs5?
Adobe Dreamweaver cs5–Features of Adobe Dreamweaver cs5?Adobe Dreamweaver cs5–Features of Adobe Dreamweaver cs5?
Adobe Dreamweaver cs5–Features of Adobe Dreamweaver cs5?
 
Get
Get Get
Get
 
Difference Between WordPress and PHP Websites.pdf
Difference Between WordPress and PHP Websites.pdfDifference Between WordPress and PHP Websites.pdf
Difference Between WordPress and PHP Websites.pdf
 
Amin-Shahrokhi-Resume-Edited
Amin-Shahrokhi-Resume-EditedAmin-Shahrokhi-Resume-Edited
Amin-Shahrokhi-Resume-Edited
 
Loving That Thing You Love: How to Contribute to WordPress
Loving That Thing You Love: How to Contribute to WordPressLoving That Thing You Love: How to Contribute to WordPress
Loving That Thing You Love: How to Contribute to WordPress
 
Wordpress hacks
Wordpress hacksWordpress hacks
Wordpress hacks
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018
 
Best Digital Marketing Course in Hyderabad
Best Digital Marketing Course in HyderabadBest Digital Marketing Course in Hyderabad
Best Digital Marketing Course in Hyderabad
 
Top 7 web design myths
Top 7 web design mythsTop 7 web design myths
Top 7 web design myths
 
ALL ABOUT WORDPRESS WEBSITE
ALL ABOUT WORDPRESS WEBSITE ALL ABOUT WORDPRESS WEBSITE
ALL ABOUT WORDPRESS WEBSITE
 
Smash.wordpress
Smash.wordpressSmash.wordpress
Smash.wordpress
 
Up and Running in 5 mins with WordPress
Up and Running in 5 mins with WordPressUp and Running in 5 mins with WordPress
Up and Running in 5 mins with WordPress
 
5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App
 
web development course | web development training in Pune India
web development course | web development training in Pune Indiaweb development course | web development training in Pune India
web development course | web development training in Pune India
 
Web development Course, Web development training, Learn With Continued-Learning
Web development Course, Web development training, Learn With Continued-LearningWeb development Course, Web development training, Learn With Continued-Learning
Web development Course, Web development training, Learn With Continued-Learning
 
web -development- course - Continued - Learning
web -development- course - Continued - Learningweb -development- course - Continued - Learning
web -development- course - Continued - Learning
 
Content Management System and WordPress
Content Management System and WordPressContent Management System and WordPress
Content Management System and WordPress
 

Recently uploaded

Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 

Recently uploaded (20)

Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 

Basic web page designing

  • 1. BASIC WEB PAGE DESIGNING SIFAT MOMEN, PHD ASSISTANT PROFESSOR & AHSAN HABIB SENIOR LECTURER Skills for Life - 2014 1
  • 2. Skills for Life - 2014 2 Dr. Sifat Momen Assistant Professor, CSE Md Ahsan Habib Sr. Lecturer, CSE Shakil Mahmood Teaching Assistant, CSE
  • 3. WHY SHOULD I HAVE A WEBSITE  It is cool!!  You can share your story with the outside world.  You can create your own portrait  You can connect with others who has the same interest as that of you.  Business (E-commerce)  Document your stuffs and use them on the fly  Most employers nowadays look at your websites to assess if you are the right candidate for a job Skills for Life - 2014 3
  • 4. WHY A PERSONAL WEBSITE Skills for Life - 2014 4
  • 5. SO, WHAT DO YOU NEED TO BUILD A WEBSITE There are many tools depending on what do you want to achieve.  HTML  Javascript  PHP  AJAX  CSS  Ruby on Rails … Skills for Life - 2014 5
  • 6. WORDPRESS  WordPress is a free and open source web-software that you can use to create beautiful website or blog.  WordPress was used by more than 22.0% of the top 10 million websites as of August 2013  The core software is built by hundreds of community volunteers, and when you’re ready for more there are thousands of plugins and themes available to transform your site into almost anything you can imagine Skills for Life - 2014 6
  • 7. WHY WORDPRESS?  It is free and stays that way  Easy to use  It is web-based – so you can get it to anywhere  Very easy to add contents  It gives you control which saves you money  All kinds of widgets make it easy to add features  Themes – let you style your site  Secure and easy to update  You are never out of date Skills for Life - 2014 7
  • 8. CREATING A WEB SITE(STAGE 1) You need to have an email address (You need to remember email address and password) Go to www.wordpress.com Skills for Life - 2014 8
  • 9. CREATING A WEB SITE(STAGE 1) Skills for Life - 2014 9
  • 10. CREATING A WEB SITE(STAGE 1) Fill up the page and create a site Skills for Life - 2014 10
  • 11. DASHBOARD (STAGE 2) Skills for Life - 2014 11
  • 12. APPEARANCE (STAGE 3)  There are many many themes in wordpress. Some are free and some you need to pay in order to use.  Hover over the theme which allows you to see theme details, preview your web page in the chosen theme and activate the theme.  For today, choose the superhero theme.  My suggestion is you start with the superhero theme and then after you build some pages, play with different themes and then decide which one you like. You can change from time to time. Skills for Life - 2014 12
  • 13. WIDGET (STAGE 4) In computing, a web widget is a software widget for the web. It's a small application with limited functionality that can be installed and executed within a web page by an end user. In Wordpress, the widget you can use is limited by theme you chose. Some interesting widgets include: • Search • Calendar • Music Player Skills for Life - 2014 13
  • 14. WIDGET (CONT…) Skills for Life - 2014 14
  • 15. NOW IT’S YOUR TURN • Create a website of 4 pages with the following information • Home: A summary of your adventure in skills for life till now. This should be the default page • About: Should contain details about you • Description of two classes in skills for life Skills for Life - 2014 15
  • 16. Thank you Skills for Life - 2014 16