Richard's Web Design 2018 Page

Richard Ricardo's example page of designing webpages using Bootstrap framework.

if you need some help with basic html coding...

Objective Description Video
preparation show file extensions in Windows 8/8.1 video 00_001
  install notepad++ video 00_002
  create screen captures, save as PDF files video 00_003

html Review

html/css page

JavaScript page

first HTML 5 file - html 5, notepad++, W3C markup validator video html_ex001_basic
  linking HTML & CSS files video html_ex003_selector


step 1. content research, visual research, sketches

Objective Description Video
visual Research review (look at) as many websites as possible
I did not put up the screen captures, due to potential copyright issues. Refer to video...
video_10_001 visual research & structure
talk to your client, to decide site structure talk to them, find out what they want, show possible design templates, come out with draft site structure  
sketch web user interface after client chose design, sketch layout on paper, show sketch to client again
- bootstrap sketch paper template
video_10_002 sketch & color
produce color palette decide the color scheme for website, show color palette to client  

photo / image collection

- download images

choose and select main photos / images to be used in step 2



step 2. create design prototype, produce Photoshop psd file

Objective Description Video

- download images

- some notes

- bootstrap 4 grid psd template download

this step takes a long time

- index.psd after video_10_004
- index.psd after video_10_005
- index.psd after video_10_006
- index.psd after video_10_007
- index.psd after video_10_008
- index.psd after video_10_009
- index.psd after video_10_010
- index.psd after video_10_011
- index.psd after video_10_012
- index.psd after video_10_013

video_10_003 guides

video_10_004 guides

video_10_005 rectangle bevel

video_10_006 top banner

video_10_007 top title

video_10_008 navigation

video_10_009 one button

video_10_010 all frames

video_10_011 all buttons

video_10_012 content

video_10_013 curtain

index.htm first page with only a jpg file and background color
- index.htm with image only
- background.psd
video 10_014
show design to client hopefully they won't make too many changes  


step 3. slice image, code html & css, produce

Objective Description Video
index.psd slice image, export
- index.psd after video_10_015

video_10_015 slicing 1

video_10_016 slicing 2

bootstrap framework bootstrap framework  
bootstrap 4 grid system bootstrap 4 grid system is a bit different from Bootstrap 3 grid system.  

eg017.htm bootstrap v4 beta template

eg018.htm bootstrap v4 beta navigation template


code html & css, with image files
"view">"source" in web browser
- index.htm after video_10_017
(does not work, only used for copying code)

- index.htm after video_10_018
- style.css after video_10_018

- index.htm after video_10_019
- style.css after video_10_019

- index.htm after video_10_020
- style.css after video_10_020

- index.htm after video_10_021
- style.css after video_10_021

- index.htm after video_10_022
- style.css after video_10_022

- index.htm after video_10_023
- style.css after video_10_023

- index.html after video_10_024
- style.css after video_10_024

- index.html after video_10_025 (this one works)
- style.css after video_10_025

video_10_017 htm css 1

video_10_018 html css 2

video_10_019 html css 3

video_10_020 html css 4

video_10_021 html css 5

video_10_22 html css 6

video_10_023 html css 7

video_10_024 html css 8

video_10_025 html css 8



create top navigation menu
run W3C html & css validator
- index.htm after video_10_26
- style.css after video_10_26

- video_10_026 top navigation menu

  run W3C html & css validator  


step 4, convert file to php (or other server side language) - for the future

Objective Description Video
index.php create file common to all pages (e.g. navigation), using php include statement  
  add php code for programmable module, link to backend database  
  that is not part of web design, if you want to learn those stuff, refer to this PHP page (will be updated constantly, if I forgot to update this link, I apologize).