SiteBase2

Description:

Set up your local development environment by creating a basic folder structure and file system containing only the core essential boilerplate code required for a bare-bones, no content starter setup suitable for any simple static site project.

1. Create a "base-boilerplate" root folder
2. Create "css" and "js" sub folders
3. Add an index.html file
   • Add boilerplate markup
4. Link to a style.css file
   • Add sample css table of contents
5. Link to a script.js file

Screenshot:

View Demo View Video Lesson

Description:

A general best-practice is to set any global-level (site-wide) styling at the top of your style.css document. This approach allows for the writing of DRY ("Don't Repeat Yourself") code and takes advantage of helpful CSS features such as inheritance via the cascade (The "C" is "CSS"). Examples of global settings include site-wide resets (e.g. the removal of body margins and setting the box-sizing defaults for all elements), css custom properties (defining any reusable site-wide variables such as commonly used colors, fonts, and spacing units), and any high-level/site-wide styles for commonly used elements, such as the body background and text colors, link colors, and font settings for headings that will be commonly re-used across the site.

1. Duplicate your "base-boilerplate" folder and rename it to "base-globals"
2. Delete your "js" folder and link to it (we will add it back later)
3. OPTIONAL: Delete your meta description and keywords from your html head for now. YOu should add these back in for client work production sites.
4. Add some temporary initial starter content to your index.html file that will allow you to see the impact of your global styles to your style.css file:
   • Temporary starter content:
     • A paragraph containing commonly used inline text markup, such as links, bold text, and italic text.
   • Global Styles to include
     • Global variables: define a basic starter set of commonly used custom properties that you will likley need, such as site-wide colors and fonts.
     • Global resets: remove the default body margins and set the box-sizing defaults for all elements to border-box.
     • Global colors: set the colors for common elements such as the body background color, text color, and link colors.

Screenshot:

View Demo View Video Lesson

Description:

If "Content is King" then Typography is the Queen, so a good way to start designing coding content is to set your type. Define your base-level typographic style settings and associated rules (e.g. your default body font size and leading, heading sizes using a typographic scale, etc). Next, define base-level styles for commonly used content, such as images (e.g. responsive images), along with core essential UI components (e.g. buttons) .

1. Duplicate your "base-globals" folder and rename it to "base-content"
2. Add more starter/base content markup to your index.html file and accompanying base content styles to your style.css file:
   • Base Typography
     • Add all headings h1-h6 and manually set the default typographic scale.
     • Add two sets of lists: unordered and ordered (no styling needed).
   • Base Media (Responsive)
     • Add an inline image with global styling for all images to be responsive by default.
   • Base Components
     • Buttons (it is optional to add an alternate style/version).

Screenshot:

View Demo View Video Lesson

Description:

Make your base responsive by setting up media queries targeting different screen sizes and use a simple grid for the layout of your content.

1. Duplicate your "base-content" folder and rename it to "base-layout"
2. Remove all content from index.html and add "demo" grid markup
3. Add a basic set of media queries and a simple grid to your style.css file
   • Media Queries (with body font-size settings and a "container" with a fixed width for large screens and fluid for small screens)
   • Custom Grid (multiple columns for large screens, stacked columns for small screens)

Screenshot:

View Demo View Video Lesson

Description:

Use semantic HTML5 elements to set up a common site structure including a site header, footer, navigation, and main content area.

1. Duplicate your "base-layout" folder and rename it to "base-structure"
2. Remove all content from index.html and add base structural site markup:
   • Header, Footer, Navigation, Main Content Areas (e.g. Hero Section, 3-Column placeholder content)
3. Add base structural site styling your style.css file
   • Base Site Structure
     • Header, Logo, Footer, Sections
   • Base Navigation
     • Header Nav, Footer Nav

Screenshot:

View Demo View Video Lesson

Description:

Use Javascript to make a a simple toggle-style main navigation for small screen sizes.

1. Duplicate your "base-structure" folder and rename it to "base-togglenav"
2. Add back a "js" folder and script.js file
3. Add a "menu" element to your main navigation.
4. Add a custom JavaScript function that will change the value of a custom data-attribute from "open" to "closed" to open and close the main navigation on smaller screens.
5. Style the menu to look like a three-bar navicon.

Screenshot:

View Demo View Video Lesson

Description:

Create a single page web site with multiple sub sections that can be accessed via the inline page anchors in the site navigation or by scrolling the long, vertical layout of the page.

1. Duplicate your "base-togglenav" folder and rename it to "base-singlepagesite"
2. Working with one main index.html file, update the site navigation to link to page anchors (ID's) for each of the main sub sections (e.g. a href="#section1" or href="#about")
3. Add sub sections with ID's and headings for each major sub sections (e.g. section id="section1" or id="about")
4. Create sub sections that are commonly found and well suited for single page websites, such as a short about section, a brief overview of services section, and a brief contact section with basic contact information.

Screenshot:

Description:

Create sub pages that are commonly used and well suited for specific content, such as a standalone about page, a services or products listing page, and a contact page with a cust contact form. Other sub pages to consider would be article pages or blog posts with longer form content, or a traditional two-column sub page with a main content area and sidebar with a sub nav.

1. Duplicate your "base-singlepagesite" folder and rename it to "base-multiplepagesite"
2. Update the index.html page site navigation to link to the following example sub pages;
   • about.html, contact.html (optional: products.html, product-detail.html)
3. Duplicate the index.html page and to create each of the above example sub pages
4. Potential new features/components to consider when adding sub pages and sub page content:
   • Custom hero sections for each page, custom forms with custom styling, common content layouts such as responsive grids for lists and thumbnail images, and other popular design patterns and UI components such as module tabs, overlays/modlas, carousels, and accordians/collapsible panels.

Screenshot:

Home Pg Demo About Pg Demo Contact Pg Demo View Multi Page Site Video Lesson