Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

HTML and CSS Web Design Training - From Photoshop to Production Ready Layout

FollowAndrew via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to transform a Photoshop web design mockup into a fully functional, production-ready website using hand-coded HTML and CSS in this comprehensive 6-hour 44-minute course. Master practical web development techniques by converting a complete design from concept to code, covering essential skills including Photoshop slicing techniques for extracting web assets, creating semantic HTML wireframes, implementing CSS reset methodologies, and building responsive navigation systems with interactive rollover states. Develop proficiency in modern CSS layout methods including the clearfix hack for proper element positioning, multi-column content structures, and CSS3 enhancements that reduce reliance on bitmap images. Build complete page layouts featuring logo integration, featured content sliders, structured content boxes, sidebar elements with testimonials and call-to-action sections, and create multiple subpages for a full website experience. Gain hands-on experience with industry-standard practices including W3C code validation, proper semantic markup, and clean CSS organization techniques that prepare you for real-world web development projects.

Syllabus

01 HTML CSS Real World Intro
02 Photoshop Slicing Mockup
03 User Vs Auto Slices
04 Save Slices For Web
05 HTML Wireframe
06 Apply CSS Reset
07 CSS Wireframe
08 Logo CSS
09 Navigation Part 1
10 Navigation Part 2
11 Navigation Part 3
12 Background Image
13 Featured Slider
14 Content Columns
15 Clearfix Hack
16 Content Boxes
17 Content Boxes Part 2
18 Content Boxes Part 3
19 Callout Box Part 1
20 Callout Box Part 2
21 Content Copy
22 Sidebar Heading
23 Sidebar Well
24 Sidebar Testimonial
25 Subpage Prep
26 Create Subpage
27 Create Remaining Subpages
28 W3C Code Validator
29 HTML CSS Real World Outro
HTML Crash Course for Beginners
HTML & CSS VS Code Tips for Beginners
Pure CSS tree view with custom tree icons
I bet you haven't heard of this cool HTML tag & trick!
New DVH CSS Unit!!!
Is This The Future Of Education? AI Generated Flexbox CSS Tutorial

Taught by

FollowAndrew

Reviews

Start your review of HTML and CSS Web Design Training - From Photoshop to Production Ready Layout

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.