Richard's Web Design 2026 Page

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

If you need help with basic HTML coding (using older videos)...

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 & all other notes (guides)	review (look at) as many websites as possible	video_22_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_22_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
index.psd	- download images - create folders & all other notes (guides) - updated - bootstrap 5 grid psd template download (with guides) this step takes a long time - index.psd after video_22_003 - index.psd after video_22_005 - index.psd after video_22_006 - index.psd after video_22_007 - index.psd after video_22_008 - index.psd after video_22_009 - jump-side-kick.psd - index.psd after video_22_010 - jump-side-kick-solid-color.psd - logo.psd - logo-output.psd - index.psd after video_22_011 - contact-us after video_22_011 - index.psd after video_22_012 - index.psd after video_22_013 - contact-us after video_22_013	video_22_003 guides video_22_004 color palette video_22_005 background video_22_006 top navigation video_22_007 boxes at the back video_22_008 top banners video_22_009 top banners & kick photos video_22_010 top banners & logo video_22_011 top banners & logo video_22_012 content & footer video_22_013 contact us page
show design image to client	hopefully they won't make too many changes - index.jpg - contact-us.jpg

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

Objective	Description	Video
index.psd	slice image, export - index.psd after video_22_015 - contact-us.psd after video_22_015	video_22_014 slicing 1 video_22_015 slicing 2
bootstrap framework	bootstrap framework
bootstrap 5 grid system	bootstrap 5 grid system is a bit different from Bootstrap 4 grid system.
index.htm	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_22_017 - style.css after video_22_017 - index.htm after video_22_018 - style.css after video_22_018 - index.htm after video_22_019 - style.css after video_22_019 - index.htm after video_22_020 - style.css after video_22_020 - index.htm after video_22_022 - style.css after video_22_022 Finally, last ones: - index.htm after video_22_023 - contact-us.htm after video_22_023 - style.css after video_22_023	video_22_016 htm css 1 video_22_017 html css 2 video_22_018 html css 3 video_22_019 html css 4 video_22_020 html css 5 video_22_21 html css 6 video_22_022 html css 7 video_22_023 html css 8
	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).