Richard's Web Design 2024 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 (screen captures)

create folders

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_20_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_20_002 sketch
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 (we can use it for bootstrap 5 design)

this step takes a long time

- index.psd after video_20_003
- index.psd after video_20_004
- index.psd after video_20_005
- index.psd after video_20_006
- index.psd after video_20_007
- index.psd after video_20_008
- index.psd after video_20_009
- index.psd after video_20_011
- index.psd after video_20_013

video_20_003 guides

video_20_004 guides

video_20_005 rectangle bevel

video_20_006 top banner

video_20_007 top title

video_20_008 navigation

video_20_009 one button

video_20_010 all frames

video_20_011 all buttons

video_20_012 content

video_20_013 curtain

index.htm first page with only a jpg file and background color
- copy the code for index.htm here
- index.htm with image only
- background.psd
video 20_014 jpg only page
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_016

video_20_015 slicing 1

video_20_016 slicing 2

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

eg001.htm bootstrap v5 template

eg010.htm bootstrap v5 navigation template


code html & css, with image files
"view">"source" in web browser
- index.htm after video_20_017 (blank)
- style.css after video_20_017

- index.htm after video_20_018
- style.css after video_20_018

- index.htm after video_20_019
- style.css after video_20_019

- index.htm after video_20_020
- style.css after video_20_020

- index.htm after video_20_022
- style.css after video_20_022

- index.htm after video_20_023
- style.css after video_20_023

video_20_017 htm css 1

video_20_018 html css 2

video_20_019 html css 3

video_20_020 html css 4

video_20_021 html css 5

video_20_22 html css 6

video_20_023 html css 7




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

video_20_024 html css 8

video_20_025 html css 9

  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).