Category Archives: Dreamweaver

CSS – Creating a Mobile-First Design Template

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, you can download the template ‘project1’ folder in a zipped file. After downloading, unzip and place the unzipped folder into your “htdocs/dev/” folder to work on the files.

Project1 – 00 Getting Started 14:57


Project1 – 01 Start Styling 14:36


Project1 – 02 Styling the Banner 14:26


Project1 – 03 Styling the Banner NAV 12:02


Project1 – 04 Styling the Banner NAV Media Query 13:02


Project1 – 05 Styling the Baseline Content 14:59


Project1 – 06 Styling the Footer 14:56


 

Useful Project Resources