Creating a Mobile-First Design Template for Your PHP Project
This demo will give you guidance in styling a web page with HTML5 markup from a mobile-first design approach. It covers the following concepts, principles, and methods:
- the php/html starter file’s proper markup
- how to add Google Fonts to a design
- using a viewport/device-width meta tag
- removing native browser styling with a ‘reset’ css file
- using @viewport and @-ms-viewport in CSS
- designing for smallest screens in mind first
- using @media queries to alter layout on larger screens
- styling a baseline for very commonly used elements
To follow along with these videos using the exact same markup, download the template. After downloading, unzip and place the unzipped folder into your “htdocs/” folder to work on the files.
Creating a Mobile-First Responsive Site Template
(7-Part Video Demo Playlist BELOW)
Approximately 2.5 hours of demo. Expect the work you do to create your own base design template to take a minimum of 8 hours.
00 – Getting Started (19:37)
01 – Start Styling (27:49)
02 – Styling the Banner (24:46)
03 – Styling the Banner’s NAV (22:25)
04 – Styling the Baseline Content (20:53)
05 – Styling the Baseline Content (Continued 14:26)
06 – Styling the Footer / Using Additional Breakpoints (22:51)
To speed these videos up, use the Youtube gear icon in the lower right corner of the video player. I would rather that you speed the videos up than skip sections!
Want to learn more about using Google Web Fonts?
Check this video out.
Useful Project Resources
- Mobile-First Responsive Web Design (good article by Brad Frost)
- CSS Reset: http://www.cssreset.com/
- Font Shorthand Order
- CSS3 Transitions
- CSS3 Generator (tool that helps you generate box shadows, text shadows, gradients, button styles, etc.