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
index.psd	- 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.
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_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).