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