prep-set-go

Prep, Set & Go!

Get started with your Website Template in minutes.

Instructions

Introduction

Thank you for taking the time to go through our
Prep, Set and Go! checklist. Spend the next
20 – 45 minutes with me and I’ll teach you the 4 most important steps in building a new website. The same steps that our own developers use when starting a new project.


Step1:

Download, Extract, Install and “Test”


Step2:

Planning and Preparation


Step3:

Creating pages


Step4:

Updating your Navigation and Library components

The “Difficulty Level” is set to “Beginner” but don’t shy away if you’re an experienced developer. Even some of our old ‘pros’ may find they can learn a thing or two. No matter what your experience level, the Prep, Set and Go checklist demonstrates the tasks that need to be completed no matter what your skill level, we just want to demonstrate the most effective way of doing this. Our

goal
is for you to
save time, and
avoid trouble ( a.k.a -
in the weeds! ). Poor planning and preparation is one of the 2 biggest time wasters. The other is making mistakes and having to ‘re-do’ your work. We’ve created a simple and effective step by step guide to get you started on the right path, it’s the same guide we use for client projects. It works for us, so it’ll work for you. By the end of this tutorial you’ll have completed the following:

  1. downloaded, extracted, installed and tested your new template in your web editor
  2. created a storyboard that determines the page names, button names, page layouts, SEO properties and navigation
  3. created your new pages, removed what you don’t need
  4. update the Navigation (menu) and Library (global) page components

By the time you’ve completed the checklist you’ll have a what we call a ‘shell’. All your pages will be created, linked together and the components that are shared amongst the pages will be updated. Your next steps will be as simple as adding content to your pages, or you can continue on to the ‘Next Steps’ and learn how to tweak and modify the components in your template to better suit your needs. ** You’ll see a (video) icon at the beginning and end of each step. The video takes all the steps described on the page and puts it neatly into one nice video demonstration for those that don’t like to read (me included!) … so if you want to skip all the reading and just watch the video you’ll get the same or better information, and a picture is worth a few thousands words.

Update your Software!

Before we start, let’s make sure our software is ‘up to date’. Working with current software will ensure a better result. Using older software such as FrontPage 2003 will NOT benefit your mobile and tablet users. You can update your web editor for FREE!!! Microsoft’s Expression Web 4 is now FREE. This is the best choice for Microsoft users.

Download Expression Web 4

If you’re still using FrontPage 2003 and don’t want to jump directly to EW4, you can move up to Sharepoint Designer 2007 instead. A better choice than FP2003 by a long shot just lacking in the CSS3 options of Expression Web 4.

Note:
FrontPage Extensions will not work with NUMO Web Plugins!

The template WILL work on a web server running with
or without FrontPage extensions, but in no way requires FP extensions to function.

However, if your template includes a UMO plugin you will need to deactivate your FP extensions, or NUMO will do it for you!



NOTE

: FP Extensions will not function once NUMO has been installed to your server, however, you won’t need FP extensions as they are currently 7 years out of date and no longer supported by Microsoft.

If this is your first time working with our templates…

If time permits I would encourage you to go through the entire Prep, Set and Go checklist while working with a ‘test’ web. You can download the template from your members page as often as you like. This allows you to create as many ‘test’ webs as you need to, scrap then start over with a fresh template. I would encourage you to experiment with the template first if you just want to wrap your head around the layouts, how it’s put together and how to make updates. This way you’ll gain some knowledge and experience, and the when you’re ready to build your ‘working’ website, it’ll be much faster as you’re experiences with the test web will significantly reduce the actual build time. If you’re on a time crunch and need the site up by yesterday, go through the Prep, Set and Go! checklist – don’t miss a step – don’t jump ahead! Far too many times I’ve encountered developers in a hurry to complete a project only to miss a deadline because they were focused on the smaller tasks instead of the bigger picture. The entire premise of the Prep, Set and Go checklist is to make sure the ‘basics’ are in place first before you attempt to fine tune the details. I know clients will often see the ‘details’ as being the most important part of the process, and it’s the details that will take up most of your time. Our goal is to help you save time by first building a ‘base’ to work from, then heavy lifting will be done, and you’ll have more ‘time’ to focus on the details with your clients. Let’s get started! We provide two types of instructions, video, and text. The video’s are listed first, followed by the text/screenshot instructions.

Step 1: Download, Extract, Install

Video Instructions

http://youtu.be/HN7tzAuD1nQ

Text Instructions

Step 1A: Find the Download Page

  1. Go to
    https://my.i3dthemes.com/account/login/ and login.
  2. Click the ‘
    Download‘ button
    screenshot
  3. Click the ‘
    Website Template‘ tab
    screenshot
  4. Click the ‘
    Download‘ tab
    screenshot

Step 1B: Selecting a Package Type

  1. Review the terms and conditions
  2. Click on the


    Agree to terms…
    links
    screenshot
  3. Click the ‘
    Choose Editor‘ drop down menu, and select the web editor you’ll be working with
  4. Select
    HTML5 or
    XHTML if you have a preference
  5. If selecting HTML5 for Expression Web 4 … make sure your software is up to date with the
    Service Pack 1 and
    Service Pack 2

Step 1C: Download

  1. Click the green ‘
    Download‘ button
    screenshot
  2. It may take a few minutes for the package to be assembled, the more add-on features, the longer it will take to assemble
  3. Download the template zip file to your Desktop

Video Instructions

http://youtu.be/UHUtBUNFY7c

Text Instructions

Windows includes a file compression, and extraction command.

  1. Locate your downloaded .zip file.

    It is easiest to find your zip file if you download the file to your desktop, or drag it to your desktop from your browsers default download location.
  2. Right-click on the downloaded .zip file.
  3. Click ‘Extract All…’
    screenshot
  4. Leave the extraction ‘path’ as it is, this will create a new folder on your desktop (or where ever you are extracting to)
  5. Click the Extract button
    screenshot
  6. A new folder will be created on your Desktop, using the same name as the .zip file

For Expression Web Users

Make sure to update your software with Service Pack 1 and Service Pack 2 for EW4. This will add the HTML5 functionality.


Download Service Pack 1 for EW4


Download Service Pack 2 for EW4

Video Instructions

http://youtu.be/QYx82sLAIc0

Text Instructions

In this section, we will demonstrate how to create a backup, then install and open your template in your web editor.

Things you should know!

Before you edit the site, make a copy (backup) of the original, un-edited “website” folder.

If you had any idea how much trouble you can save yourself by creating a copy of your original unedited template, and then by using regular ‘backups’ … well I can tell you how much trouble you’ll save yourself… LOTS. While working in the tech support department, the majority of the ‘fixes’ that we use had some sort of link back to the original unedited template ( copy ) or by simply resorting to importing files / or pages from the latest backup … truth be told there are more ways of screwing things up, than making them right. And in many cases it’s just so much more time efficient to just copy in a new page or file, and start again or copy your content from a mangled page into a new working page. Keeping a good copy of your template and making regular backups will save you hours and hours of wasted time trying to fix mistakes.



NOTE 1:

Correctly Defining / Opening your Template is


CRITICAL

to the function and operation of your template!



NOTE 2:

If you don’t


Open

or


Define

your site
correctly following our instructions below, the


components will not update.



NOTE 3:

You must FIRST extract your zip file, to create the working ‘website’ folder

Create a backup

  1. Locate the extracted template folder on your desktop (or your extraction location)
  2. Click into the folder, until you find the ‘website’ folder.
  3. Right click on the ‘website’ folder.
  4. Select “Copy”
    screenshot
  5. Right click, select “Paste”
    screenshot
  6. Right click on the newly copied folder, select “Rename”
    screenshot
  7. Rename to “website-original”
    screenshot

Now you have a copy of the original unedited website. You may need use the “website-original” copy later on. Example: if you delete a page or file and find you need to use it after all, or for troubleshooting if you find you need to replace a web page and start fresh.

Defining / Opening a New Site

Microsoft SharePoint Designer 2007/Expression Web 1/2
  1. Start/Open your SharePoint Designer 2007 / Expression Web 1/2.
  2. If you have an existing site already open]
    1. Click on the File Menu
    2. Click ‘Close’ or ‘Close Site’
      screenshot
  3. Click on the File menu (once again), this time click
    Open Site
    screenshot
  4. The ‘Open Site’ window will open.
  5. Click the ‘Desktop’ icon, or browse to the location where you extracted the file.
    screenshot
  6. Find the folder where your template files were extracted to, the folder name will the same as your template name.
    screenshot
  7. Click into the extracted template folder, then again until you find the ‘website’ folder.
    screenshot
  8. Click into the ‘website’ folder.
  9. Make sure the ‘website’ is defined both top and bottom and you see the
    Pages, Library, Site folders (you may have additional folders depending on your package).
    screenshot
  10. Click the ‘Open’ button.
    screenshot
  11. Your site is now open in SharePoint Designer 2007, or Expression Web 1/2 and ready for editing
Microsoft Expression Web 3/4
  1. Start/Open Expression Web 3/4
  2. Click on the Site Menu
  3. If you currently have a website open, click ‘Close’.
    screenshot
  4. Click on the Site Menu once again.
  5. Click on Open Site.
    screenshot
  6. Click the ‘Browse’ button located in the top right corner of the Open Site window.
    screenshot
  7. Click the ‘Desktop’ icon, or browse to the location where you extracted the template zip file.
    screenshot
  8. Click into the extracted template folder.
    screenshot
  9. Keep clicking until you find the ‘website’ folder.
    screenshot
  10. Click into the ‘website’ folder.
  11. Once ‘website’ is defined both top and bottom
    screenshot
  12. Cick the Open button.
    screenshot
  13. Then click on the ‘Open’ button in the (Open Site) window.
    screenshot
  14. Cick on the Site >> Site Settings.
    screenshot
  15. Make sure there is a check mark in the box referencing
    [ ]
    Maintain thesite using hidden meta files
    If this checkbox is not ‘checked’ you Library pages will not update correctly.
    screenshot

Video Instructions

http://youtu.be/-7kvyKl5Tmw

Text Instructions

In this section, we will demonstrate how to test your installation to make sure your Library components will update correctly. First thing we want to do is make sure the site will update and function correctly. In the previous chapter, we indicated that Opening and Defining your site is the most critical step of all, and to make sure we’ve followed all the steps, we’ll run a quick ‘test’ to make sure the pages update as expected. All we need to do is update one of the shared Library components, to make sure the template was correctly ‘Defined’ by your web editor. Some of the steps in this chapter will also help you form some good habits when updating your website.

Testing your Installation with the ‘copyright’ Test

  1. Start by previewing the
    index.htm page in a browser.
  2. Make sure your
    Folder List in in view (
    Alt+F1)
  3. Right click on the
    index.htm page
  4. Select
    Preview in Browser, or Preview in (
    Firefox / Chrome)
    screenshot
  5. If your index.htm page is open in your editor, close it by clicking the
    X located in the window ‘tab’.
    screenshot
  6. Expand the ‘
    Library‘ folder by clicking on the [ + ] symbol next to the folder name.
  7. Expand the ‘
    shared‘ folder.
    screenshot
  8. Open the ‘
    footer‘ Library page by double clicking on the page in the Folder list.
    screenshot
  9. Locate the

    Copyright 20XX.Company Inc. All Rights Reserved.
    text at the very bottom of the page.
    screenshot
  10. Change the year from 20XX to the current year.
    screenshot
  11. Save the Library page ( File menu >> Save ) or ( Ctrl + S ) on your keyboard.
    screenshot
  12. Switch BACK to your web browser, the one with the
    index.htm page in preview.
  13. Scroll to the bottom of the page in the browser, you should see the original copyright date of 20XX.
    screenshot
  14. Now press the (

    Refresh
    ) button in your browser, and watch the date ‘change’ to the current year.
    screenshot
  15. If the date did NOT update to the same date you entered into the ‘footer’ Library page:
    • the footer page was not saved
    • the index page was open in your editor and not saved
    • the site was not Defined or Opened correctly
    • the Site Settings were not enabled

    Go back through the ‘Installation’ chapter, this is where 99% of the issues with Library pages not updating arise from.

Video Instructions

http://youtu.be/M9uFuYpR4sM

Text Instructions

Before you build your website, create a Storyboard!

“Storyboarding” is a process of organizing information into a visual representation. If we were working in a marketing or design firm, we’d create some nice little sketches of our web pages that would give some idea of the layout for each page, the content, page names and how they all link together as in these
examples. For our purposes, we’ve already created the layouts so no need for sketching and drawing.. all you’ll need to is write or type. Our “Storyboard” will be our written ‘guideline’ used for creating the pages in our web site.

The “storyboard.htm” Page

We’ve included a blank ( storyboard.htm ) page in your template. The __storyboard.htm page includes 4 columns, and 10 rows. You can add more rows if you need to. Here’s an explanation of what each column is for.


Document Name:
this is where you’ll type the document or file name for your web pages. An example would be “index.htm”. This is a document or file name.

The document name you choose is VERY important as it affects the SEO of your website. There are 4 critical elements to naming a web page:

  1. always use lower case
  2. number or letters only
  3. connect multiple words / numbers with a hyphen of underscore
  4. be short AND descriptive

Here’s an example:

Anyone searching for information about Frazoo golf members will have a better chance of finding this page, because the search terms used in the search, are also part of the document name.


Page Name:
When thinking of a ‘page name’ keep in mind this is what we’ll also be using for menu buttons. Pick a short one or two word name that gets the information across quickly. With navigation less is more. People don’t read, they scan. Using multiple words in your menu button can often back fire. Stick to one or two words if you can.


Page Title:
The page title will be used for the <meta title> tag, which is the single most important meta tag for Search Engine Optimization.
Here’s some info on how to create effective Meta Tags

You can use as many or as few words as you like for your meta tag, however the more words you use, the less impact they will have to search engines. Try to use as few words as possible to describe to search engines what this web page is about. In this example, using just 3 words will have a much higher impact than dozens of variations

<title>Frazoo Golf Members</title>


Page Layout:
We’ll use this column to make note of the page layout from which we’ll be ‘copying’ or creating our new pages

from
. You can create a new page, using any of the existing pages. For example, you can make as many copies of the ‘catalog’ page as you like, and just change it up… it doesn’t need to be a catalog page, but you can use the layout for other things. So that’s an explanation of what the columns in your ‘storyboard’ page are for.

Creating your ‘Storyboard’

First thing we need to do is create a list of pages we want for our website. There are three things to consider.

  1. Which of the pages that came with the template package are we going to use:
    • as it comes in the template – or -
    • rename or repurpose
  2. Which of the pages are we going to delete.
  3. What new pages do we need to create.

Working with a storyboard or not, at some point you will need to write out what pages you want in your website. As the template includes some pre-designed pages we’ve already cut out some of the work you’d need to do anyways. Most folks figure this out by visiting their competitors websites, or by visiting similar websites, or just by brainstorming. You’ll probably be adding more pages as your site grows anyways, so just start with a list of pages you want in your website for ‘launch’ day.
Here’s an example of how to create a storyboard. Grab a piece of paper ( yes, paper, it still exists ), brainstorm, research or just spend a few minutes thinking about what pages you want in your website, and write them down. The example website we’ll be building is for a group of golfers named Frazoo. In thinking about what pages to include in the Frazoo website, I could ask the members what they want to see, visit similar websites, or just use my own imagination.. here’s what I started with:

  • home page
  • a contact frazoo admin page
  • a page with pictures of the team members
  • a page with a schedule of golf games and tee off times
  • a page with tournament results
  • a page for upcoming tournaments, dates and rules

Now I’ve created a short list of pages that I think I want for my Frazoo website, I can start to compare my list to the pages already provided in the template package. The template package contains many pre-designed pages, so lets figure out which of the pages in the template we’re going to keep (and rename for better SEO) and what pages we’ll delete. I want to preview each of my pages and first figure out if I want to keep this page for what it was intended ( catalog.htm to sell products, about.htm for information about the people, faqs.htm for questions ), or can it be used for something else ( check your list ). If no to both, you might as well just delete it! Start by previewing each of the pages in the template, in your web browser.

Ask yourself these 2 questions when previewing your pages:

  • could I use this page for what it is intended for?
  • could I use this page for something else?

If no to both questions, delete the page. You can always copy it back in, from your ‘backup’. By now you should have a rough list of pages for your site written down on a piece of paper, and you should have previewed each of the pages included in the template package. Now we start to fill in the ‘storyboard.htm’ columns.

Document name: type the names of the pages you want in your site. Start with the pre-designed pages, type the document names of the pages you plan on keeping as they are. We’ll tweak the document names a bit later on, just type the names of the pages as they are now

Now type the names from your written list, you can tweak this later on for better SEO, for now, just a page name that has meaning, and follows these rules:

  1. always use lower case
  2. number or letters only
  3. connect multiple words / numbers with a hyphen of underscore
  4. be short AND descriptive

IMPORTANT NOTE: You much keep your ‘index.htm’ page, and DO NOT rename it. This is your ‘home’ page, or landing page. When visitors go to your site via the web address (
www.i3dthemes.com) for example, they are actually going to (
www.i3dthemes.com/index.htm) . The server will always server the ‘index’ page when just the domain name is given. Now you have a rough list of pages you want in your site, we’ll need to add some polish and details.


Page Name:
This is what you’ll be using for your menu button names, that link to your web pages. Keep the names short and sweet. You want to make sure they fit, and as most people don’t really ‘read’ they ‘scan’ the more words you use, the more people you’ll loose. Here’s an example:


Page Title:
Here’s where we need to think a bit, as this information needs to be short and sweet as well, but we are also trying to match the words in the meta title to what we think most of our visitors will type into a search engine when looking for this web page. This is also what shows up in the web browsers ‘tab’ .. so too many words, most folks won’t even see them. Example:

You’ll see in the example, that I’ve include the word ‘Frazoo’ in all the page titles. This is because someone looking for information via search will most likely include the word Frazoo in their search query. It’s also a good idea to include the name of your city, state or province if think people will be looking for you locally.


Layout:
Now we determine which ‘layouts’ you want to use for your new pages. To create a new page, we just make a copy or duplicate of an existing page. By this step, you’ve already previewed each of your pages, and asked yourself if the page you previewed was one you wanted to keep, use for something else, ordelete. This is the ‘use for something else’ part of the equation. You only need to do this for any ‘new’ pages you’ll be creating. In the layouts column, type the name of the page that you’ll be using to create your new pages from. Although the template includes generic 1, 2, 3 column type of layouts, you may find one of the pre-designed pages will work better.

Here we’ve used some of the ‘generic’ layout pages as well as the ‘about.htm’ page, which we’ll create a copy of and name the copy
upcoming-tournements.htm because the layout of the about.htm page will suit our purposes better than any of the generic 1,2 or 3 column layouts. Great! Now you’ve done completed most of the planning, and most of the leg work! If you haven’t moved from the computer since the introduction, we’ve allotted a short 2 minute break for you. Take it now. Now for a short bit of insight on ‘why’ we go through this process or exercise when we could easily figure this out as we just create new pages. Here are a few reasons:

  1. You can’t beat planning ahead vs going at it on the fly, at least not consistently.
  2. With all your information typed onto a ‘storyboard.htm’ page, you can quickly ‘copy and paste’ information as you build your pages.. it’ll take WAY less time now that you’re organized.
  3. When typing information such as a document name, or Meta Title, into a web page your web editor will ‘spell check’ for you! When typing into the meta tag text field in the editor, or when typing a document name in the
    Folder List you must rely upon your ‘fingrs’ to “Spel Chek”.

“Type-O’s” account for over 50% of the cusomer support issues we encouter.

Video Instructions

http://youtu.be/RhLrNZckrcY

Text Instructions

Now we move onto creating your pages, and with your ‘storyboard’ complete, it should be a ‘snap’.

To create a new page:

  1. refer to your storyboard and select the page you want to create
  2. open the corresponding ( layout ) ( primary, secondary, minimized )
  3. click the ( File menu )
  4. click the ( Save as ) command
  5. copy the “document name” from your storyboard
  6. paste the “document name” into the [ File name: ] field
  7. copy the “Page title” from your storyboard
  8. press the “change title” button
  9. paste the “Page title” into the “set page title” popup box

Wash, rinse and repeat until you’ve create all your new pages. You may be asking yourself, but what if I like the layout of say, the ‘about.htm’ page, and I want more pages that look like that? You have 2 options.. you can ‘copy’ or ‘duplicate’ the ‘about.htm’ page just as you would create a new page from the primary, or secondary layout. OR, you can simply ‘copy’ the body content from one layout to the other. The beauty of the Bootstrapped templates is the ease in which you can copy ‘content snippets’ from one page to another, or from our ‘snippet’ examples page. You can quickly change the body content of your page from one layout to another with some ‘copy and paste’ action.



Learn how to copy and paste Bootstrap snippets.


Video Instructions

http://youtu.be/Hg-lx8bCRZo

Text Instructions

We’re in the final stretch … all that’s left to do before we add content to our new pages, is updating the Navigation components, and Library components. Your web pages include both shared components, and page specific content regions. The “shared components” are embedded into all your template pages. Shared components are basically ‘include’ pages. The ‘include or Library’ pages are dynamically added or embedded into your template pages via your web editor. Shared components allow you to quickly update common web page information such as a menu bar, copyright information, or the website name. You only need to update in one page, and your web editor will apply those updates to ‘all’ your pages.

Let’s start with the Navbar



Get into this habit:

when updating ANY page located in the “Library” folder, do this FIRST:

  1. Preview a web pages that contain the Library item you’ll be updating, and PREVIEW using Firefox or Chrome.
  2. Keep the page open in your browser as you make changes to your Library page.
  3. To view your changes and check your work, simply ‘save’ the Library page, then ‘Refresh’ the open browser page.
  4. Don’t close your Library page UNTIL you’re satisfied with your work, checked for errors, and tested your changes.

WHY is this habit important? Here is my reasoning:

  1. when you preview your work in a web browser, you see what your visitors see
  2. preview with Firefox or Chrome because these are the ‘best’ browsers for web developers
    • they do not have the caching issues that IE does
    • you can clear the cache quicker in these two browsers compared to other web browsers
    • they include troubleshooting tools which we’ll review in the ‘tutorial’ faq and troubleshooting sections.
    • they display Google fonts locally on unpublished web pages, IE does not.
  3. by keeping your Library page open UNTIL you’ve checked your work, you can easily
    Ctrl+Z to undo errors.
  4. once you ‘close’ a page, you can no longer use
    Ctrl+Z to undo, you must figure out your error and fix it, or start with a fresh Library page.

Updating the Navbar

Expand the [+] Library folder by clicking on the [+] beside the folder name. Expand the [+] shared folder. Double click on the “menu-top.htm” page to open.

At the very top of the page is the phone number, this is actually a dynamically included component, added to a dynamically Library page. When you update the ‘
phone‘ Library page, the phone number in the ‘menu-top’ Library page will also update. What you see is a regular bullet list, each item in the list is hyperlinked to a page. Refering back to your ‘storyboard’ you can now modify the ‘menu-top.htm’ page to display your ( Page name ) and link to your new pages. It’s a fairly simple process, but much easier to understand when watching a video demonstration. So for this exercise you should review the video at the beginning of this article.

The Contact Form

You may not want to use the Contact form so I’ll start by showing you how to remove it.

  1. in the ‘navbar’ folder, open the ‘contact.htm’ page
  2. click the <div.navbar> link located on the ‘Quick Tag Selector’ bar
  3. press ‘delete’ on your keyboard

To update the contact form, you only need to update the email address through your members page at my.i3dthemes.com. That too is covered in the video instructions above.

Shared Components

Now we move into the ‘shared’ components. Expand the ‘shared’ folder by clicking the [+] symbol next to the folder name. You’ll see a list of pages, an ‘icons’ folder, and an ‘inactive’ folder. The icons folder includes 50 or so additional icons you can use in your ‘social-icons’ component, or anywhere in your site for that matter. The inactive folder include Library pages that are embedded into your template pages, BUT do not currently have any content in them. These are optional. You can easily add content then position the content in your pages via the primary, secondary or minimized stylesheets located in the
Site/styles layouts folder of your web template. Let’s get started with updating our shared components.

To start:

  1. open the primary.htm page
  2. preview in browser

Next:

I like to start with the components displayed at the top of my web pages, and work my way down. As you look at the list of pages in the ‘shared’ folder, the names of the pages should make a fair bit of sense in regards to what content they contain. If you’re not sure you can open the page to see what’s on it, or view your ‘primary.htm’ page in the Design window, and try to ‘double click’ on a component. The double-click action will open a small popup window that will tell you which Library page the component is linked to. Typically I’ll start with the following:

  1. website-name.htm / graphic-logo.htm
  2. tagline.htm
  3. phone.htm
  4. textlinks.htm
  5. social-icons.htm
  6. google-search.htm
  7. footer.htm

Your template may have all of these items, or just a few, or you might have components not listed in the above example. The number and type of shared components varies template to template, you can update which ever pages you like and in what ever order. Just update ALL the Library pages located in your ‘shared’ folder and Preview the changes in your web browser as you go through each Library page. Here’s a list of individual tutorials, showing how to update each Library component in detail.

  • navbar
  • website name
  • tagline
  • graphic logo
  • phone
  • textlinks
  • social icons
  • google search
  • news carousel
  • footer

Now that you’ve updated the Library pages located in your “shared” folder, there are a few Library components used for specific layouts. You’ll find these Library pages located inside the
primary folder, or
secondary folders. The tutorials for these components can be found in the next chapter ‘Special Features and Components’. The complexity of updating some of these components varies from template to template, but it’s can be a bit beyond the scope of what I would call a ‘basic’ update as it may require changing images, or delving into the HTML of the page a wee bit. We want to make sure you have some sort of foundation in place before tacking the more advanced updates. This way you know you’ve made some progress, and not it’s the ‘fine tuning’ and ‘details’

Let’s Summarize

You’ve completed the Prep, Set and Go! checklist. Which means you now have a ‘shell’ to work from. And quite possibley most of your work is now done! Your pages are created, navbar linked to your new pages, and the shared components have been updated. You now have pages to add content to. You can even show this to a client or boss if you need to, and they’ll see you’ve making progress.

Introduction

Thanks for taking the time to go through our
Prep, Set and Go! checklist. Spend the next
20 – 45 minutes with me and I’ll teach you the 4 most important steps in building a new website. The same steps that our own developers use when starting a new project.


Step1:

Download, Extract, Install and “Test”


Step2:

Planning and Preparation


Step3:

Creating pages


Step4:

Updating your Navigation and Library components

The “Difficulty Level” is set to “Beginner” but don’t shy away if you’re an experienced developer. Even some of our old ‘pros’ may find they can learn a thing or two. No matter what your experience level, the Prep, Set and Go checklist demonstrates the tasks that need to be completed no matter what your skill level, we just want to demonstrate the most effective way of doing this. Our

goal
is for you to
save time, and
avoid trouble ( a.k.a -
in the weeds! ). Poor planning and preparation is one of the 2 biggest time wasters. The other is making mistakes and having to ‘re-do’ your work. We’ve created a simple and effective step by step guide to get you started on the right path, it’s the same guide we use for client projects. It works for us, so it’ll work for you. By the end of this tutorial you’ll have completed the following:

  1. downloaded, extracted, installed and tested your new template in your web editor
  2. created a storyboard that determines the page names, button names, page layouts, SEO properties and navigation
  3. created your new pages, removed what you don’t need
  4. update the Navigation (menu) and Library (global) page components

By the time you’ve completed the checklist you’ll have a what we call a ‘shell’. All your pages will be created, linked together and the components that are shared amongst the pages will be updated. Your next steps will be as simple as adding content to your pages, or you can continue on to the ‘Next Steps’ and learn how to tweak and modify the components in your template to better suit your needs. ** You’ll see a (video) icon at the beginning and end of each step. The video takes all the steps described on the page and puts it neatly into one nice video demonstration for those that don’t like to read (me included!) … so if you want to skip all the reading and just watch the video you’ll get the same or better information, and a picture is worth a few thousands words.

If this is your first time working with our templates…

If time permits I would encourage you to go through the entire Prep, Set and Go checklist while working with a ‘test’ web. You can download the template from your members page as often as you like. This allows you to create as many ‘test’ webs as you need to, scrap then start over with a fresh template. I would encourage you to experiment with the template first if you just want to wrap your head around the layouts, how it’s put together and how to make updates. This way you’ll gain some knowledge and experience, and the when you’re ready to build your ‘working’ website, it’ll be much faster as you’re experiences with the test web will significantly reduce the actual build time. If you’re on a time crunch and need the site up by yesterday, go through the Prep, Set and Go! checklist – don’t miss a step – don’t jump ahead! Far too many times I’ve encountered developers in a hurry to complete a project only to miss a deadline because they were focused on the smaller tasks instead of the bigger picture. The entire premise of the Prep, Set and Go checklist is to make sure the ‘basics’ are in place first before you attempt to fine tune the details. I know clients will often see the ‘details’ as being the most important part of the process, and it’s the details that will take up most of your time. Our goal is to help you save time by first building a ‘base’ to work from, then heavy lifting will be done, and you’ll have more ‘time’ to focus on the details with your clients. Let’s get started!

Step 1: Download, Extract, Install

Video Instructions

http://youtu.be/nytBBcZg8Hc

Text Instructions

Go To the Downloads Page

  1. Go to
    https://my.i3dthemes.com/account/login/ and login.
  2. Click the
    ‘Download’ button
  3. Click the ‘
    Website Template’ tab
  4. Click the ‘
    Download‘ tab

Selecting a package type

    1. Review the terms and conditions
    2. Click on the [ ]

      Agree to terms…
      links

  • Click the ‘
    Choose Editor‘ drop down menu, and select the web editor you’ll be working with
    select
    HTML5
  • click the green ‘
    Download‘ button
  • It may take a few minutes for the package to be assembled, the more add-on features, the longer it will take to assemble
  • Download the template zip file to your Desktop

 

Extracting with Windows

Windows includes a file compression, and extraction utility.

  1. Locate your downloaded .zip file.

    it’s easiest to find your zip file if you download the file to your desktop, or drag it to your desktop from your browsers default download location
  2. Right-click on the downloaded .zip file.
  3. Select ‘Extract All…’
  4. Leave the extraction ‘path’ as it is, this will create a new folder on your desktop (or wherever you are extracting too)
  5. Click the Extract button
  6. A new folder will be created on your Desktop, using the same name as the zip file

Decompressing with MAC

  1. Highlight and right-click the templates .zip file
  2. Choose
    Open. This will decompress the file or folder and place it in the same directory as the compressed file.
    Note: The compressed file is not deleted automatically and will remain in the directory also, so you’ll have a copy if you ever need to create a new folder.

In this section, we will demonstrate how to create a backup, then install and open your template in your web editor.

Things you should know!

Before you edit the site, make a copy (backup) of the original, un-edited “website” folder.

If you had any idea how much trouble you can save yourself by creating a copy of your original unedited template, and then by using regular ‘backups’ … well I can tell you how much trouble you’ll save yourself… LOTS. While working in the tech support department the majority of the ‘fixes’ that we use had some sort of link back to the original unedited template ( copy ) or by simply resorting to importing files / or pages from the latest backup … truth be told there are more ways of screwing things up, than making them right. And in many cases it’s just so much more time efficient to just copy in a new page or file, and start again or copy your content from a mangled page into a new working page. Keeping a good copy of your template and making regular backups will save you hours and hours of wasted time trying to fix mistakes.



NOTE 1:

Correctly Defining / Opening your Template is


CRITICAL

to the function and operation of your template!



NOTE 2:

If you don’t


Open

or


Define

your site
correctly following our instructions below, the


components will not update.



NOTE 3:

You must FIRST extract your zip file, to create the working ‘website’ folder

Create a backup

  1. Locate the extracted template folder on your desktop (or your extraction location)
  2. Click into the folder, until you find the ‘website’ folder.
  3. Right click on the ‘website’ folder.
  4. Select “Copy”
  5. Right click select Paste
  6. Right click on the newly copied folder.
  7. Select Rename
  8. Rename to “website-original”
  9. Now you have a copy of the original unedited website.

You may need use the ( website-original ) copy later on, if you delete a page or file and find you need to use it after all, or for troubleshooting if you find you need to replace a web page and start fresh.

Defining / Opening a New Site

  1. Start/Open your Website Editor
  2. Click on the “Site” menu
  3. Select “New Site”
  4. Switch to the ‘Advanced’ tab if you see one (older version of DW only)
  5. Enter a ‘Site Name’ into the site name field
  6. Click the ‘Folder’ icon to the right of the
    Local Site Folder field
  7. Click the ‘Desktop’ icon, or browse to the location where you extracted the file
  8. Click into the extracted template folder.
  9. Keep clicking in until you find the website folder.
  10. Click into the ‘website’ folder.
  11. Once ‘website’ is defined both top and bottom, click the Select button.
  12. NOTE: it’s critically important to have the ‘website’ folder defined both in the ( Select: ) field at the top and and the bottom, if not, your Library files will not update correctly
  13. Then click the ‘Save’ button

Your new website template is now correctly Defined by Dreamweaver and you’re ready to ‘test’ then build your website

In this section, we will demonstrate how to test your installation to make sure your Library components will update correctly. First thing we want to do is make sure the site will update and function correctly. The previous chapter suggested that Opening and Defining your site is the most critical step of all, and to make sure we’ve followed all the steps, we’ll run a quick ‘test’ to make sure the pages update as expected. All we need to do is update 1 of the shared Library components, to make sure the template was correctly ‘Defined’ by your web editor. Some of the steps in this chapter will also help you form some good habits when updating your website.

Testing your Installation with the ‘copyright’ test

  1. Start by previewing the ‘index.htm’ page in a browser
  2. Make sure your “Files” pane in view (F8)
  3. Right click on the ‘index.htm’ page
  4. Select Preview in Browser, or Preview in (Firefox/Chrome)
  5. If your index.htm page is open in your editor, close it by clicking the X located in the window ‘tab’
  6. Expand the ‘
    Library‘ folder by clicking on the [ + ] symbol next to the folder name
  7. Expand the ‘
    shared‘ folder
  8. open the ‘
    footer‘ Library page by double clicking on the page in the Folder list
  9. Locate the
    Copyright 20XX.Company Inc. All Rights Reserved. at the very bottom of the page
  10. change the year from 20XX to the current year
  11. Save the ‘footer.lbi’ Library page ( File menu >> Save ) or ( Ctrl + S ) on your keyboard
  12. Switch BACK to your web browser, the one with the ‘index.htm’ page in preview
  13. Scroll to the bottom of the page in the browser, you should see the original copyright date of 20XX
  14. now press the ( Refresh ) button in your browser, and watch the date ‘change’ to the current year
  15. If the date did NOT update to the same date you entered into the ‘footer’ Library page:
    • the footer page was not saved
    • the index open in your editor and not saved
    • the site was not Defined or Opened correctly

The installation test should help you find out right from the get go, if your site was opened correctly, and the Site Settings were enabled during installation.

Video Instructions

http://youtu.be/KeTZTkCCBtA

Text Instructions

Before you build your website, create a Storyboard!

“Storyboarding” is a process of organizing information into a visual representation. If we were working in a marketing or design firm, we’d create some nice little sketches of our web pages that would give some idea of the layout for each page, the content, page names and how they all link together as in these
examples. For our purposes, we’ve already created the layouts so no need for sketching and drawing.. all you’ll need to is write or type. Our “Storyboard” will be our written ‘guideline’ used for creating the pages in our web site.


The “storyboard.htm” page:

We’ve included a blank ( storyboard.htm ) page in your template. The __storyboard.htm page includes 4 columns, and 10 rows. You can add more rows if you need to. Here’s an explanation of what each column is for.


Document Name:
this is where you’ll type the document or file name for your web pages. An example would be “index.htm”. This is a document or file name.

The document name you choose is VERY important as it affects the SEO of your website. There are 4 critical elements to naming a web page:

  1. always use lower case
  2. number or letters only
  3. connect multiple words / numbers with a hyphen of underscore
  4. be short AND descriptive

Here’s an example:

Anyone searching for information about Frazoo golf members will have a better chance of finding this page, because the search terms used in the search, are also part of the document name.


Page Name:
When thinking of a ‘page name’ keep in mind this is what we’ll also be using for menu buttons. Pick a short one or two word name that gets the information across quickly. With navigation less is more. People don’t read, they scan. Using multiple words in your menu button can often back fire. Stick to one or two words if you can.


Page Title:
The page title will be used for the <meta title> tag, which is the single most important meta tag for Search Engine Optimization.
Here’s some info on how to create effective Meta Tags

You can use as many or as few words as you like for your meta tag, however the more words you use, the less impact they will have to search engines. Try to use as few words as possible to describe to search engines what this web page is about. In this example, using just 3 words will have a much higher impact than dozens of variations

<title>Frazoo Golf Members</title>


Page Layout:
We’ll use this column to make note of the page layout from which we’ll be ‘copying’ or creating our new pages

from
. You can create a new page, using any of the existing pages. For example, you can make as many copies of the ‘catalog’ page as you like, and just change it up… it doesn’t need to be a catalog page, but you can use the layout for other things. So that’s an explanation of what the columns in your ‘storyboard’ page are for.

Creating your ‘storyboard’.

First thing we need to do is create a list of pages we want for our website. There are three things to consider.

  1. Which of the pages that came with the template package are we going to use:
    • as it comes in the template – or -
    • rename or re-purpose
  2. Which of the pages are we going to delete.
  3. What new pages do we need to create.

Working with a storyboard or not, at some point you will need to write out what pages you want in your website. As the template includes some pre-designed pages we’ve already cut out some of the work you’d need to do anyways. Most folks figure this out by visiting their competitors websites, or by visiting similar websites, or just by brainstorming. You’ll probably be adding more pages as your site grows anyways, so just start with a list of pages you want in your website for ‘launch’ day.
Here’s an example of how to create a storyboard. Grab a piece of paper (yes, paper, it still exists), brainstorm, research or just spend a few minutes thinking about what pages you want in your website, and write them down. The example website we’ll be building is for a group of golfers named Frazoo. In thinking about what pages to include in the Frazoo website, I could ask the members what they want to see, visit similar websites, or just use my own imagination.. here’s what I started with:

  • home page
  • a contact frazoo admin page
  • a page with pictures of the team members
  • a page with a schedule of golf games and tee off times
  • a page with tournament results
  • a page for upcoming tournaments, dates and rules

Now I’ve created a short list of pages that I think I want for my Frazoo website, I can start to compare my list to the pages already provided in the template package. The template package contains many pre-designed pages, so lets figure out which of the pages in the template we’re going to keep (and rename for better SEO) and what pages we’ll delete. I want to preview each of my pages and first figure out if I want to keep this page for what it was intended ( catalog.htm to sell products, about.htm for information about the people, faqs.htm for questions ), or can it be used for something else (check your lis ). If no to both, you might as well just delete it! Start by previewing each of the pages in the template, in your web browser. The pages located in the ( Enhancements ) and ( Features ) folders are not required for the end result, these folders contain information about the extra add-ons and features you can ‘add’ to your website, you may as well delete these folders once you’ve had a look through the pages.

Ask yourself these 2 questions when previewing your pages:

  • could I use this page for what it’s intended for?
  • could I use this page for something else?

And keep this in mind, the more pages you have in your site, the longer it will take Dreamweaver to ‘update’ the Library assets. It takes about 1 second a page, so if you have 60 pages in your website, it will take 60 seconds to update the site when you make a change to a Library asset ( include page located in the Library folder ). If no to both questions, delete the page. You can always copy it back in, from your ‘backup’. By now you should have a rough list of pages for your site written down on a piece of paper, and you should have previewed each of the pages included in the template package. Now we start to fill in the ‘storyboard.htm’ columns.

Document name: type the names of the pages you want in your site. Start with the pre-designed pages, type the document names of the pages you plan on keeping as they are. We’ll tweak the document names a bit later on, just type the names of the pages as they are now

Now type the names from your written list, you can tweak this later on for better SEO, for now, just a page name that has meaning, and follows these rules:

  1. always use lower case
  2. number or letters only
  3. connect multiple words / numbers with a hyphen of underscore
  4. be short AND descriptive

IMPORTANT NOTE: You much keep your ‘index.htm’ page, and DO NOT rename it. This is your ‘home’ page, or landing page. When visitors go to your site via the web address
www.i3dthemes.comfor example, they are actually going to
www.i3dthemes.com/index.htm the server will always server the ‘index’ page when just the domain is given. Now you have a rough list of pages you want in your site, we’ll need to add some polish and details.


Page Name:
This is what you’ll be using for your menu button names, that link to your web pages. Keep the names short and sweet. You want to make sure they fit, and as most people don’t really ‘read’ they ‘scan’ the more words you use, the more people you’ll loose.

Here’s an example:


Page Title:
Here’s where we need to think a bit, as this information needs to be short and sweet as well, but we are also trying to match the words in the meta title to what we think most of our visitors will type into a search engine when looking for this web page. This is also what shows up in the web browsers ‘tab’ .. so too many words, most folks won’t even see them.

Example:

You’ll see in the example, that I’ve include the word ‘Frazoo’ in all the page titles. This is because someone looking for information via search will most likely include the word Frazoo in their search query. It’s also a good idea to include the name of your city, state or province if think people will be looking for you locally.


Layout:
Now we determine which ‘layouts’ you want to use for your new pages. To create a new page, we just make a copy or duplicate of an existing page. By this step, you’ve already previewed each of your pages, and asked yourself if the page you previewed was one you wanted to keep, use for something else, or delete. This is the ‘use for something else’ part of the equation. You only need to do this for any ‘new’ pages you’ll be creating. In the layouts column, type the name of the page that you’ll be using to create your new pages from. Although the template includes generic 1, 2, 3 column type of layouts, you may find one of the pre-designed pages will work better.

Here we’ve used some of the ‘generic’ layout pages as well as the ‘about.htm’ page, which we’ll create a copy of and name the copy
upcoming-tournements.htm because the layout of the about.htm page will suit our purposes better than any of the generic 1, 2 or 3 column layouts. Great! Now you’ve done completed most of the planning, and most of the leg work! If you haven’t moved from the computer since the introduction, we’ve allotted a short 2 minute break for you. Take it now. Now for a short bit of insight on ‘why’ we go through this process or exercise when we could easily figure this out as we just create new pages. Here are a few reasons:

  1. You can’t beat planning ahead vs going at it on the fly, at least not consistently.
  2. With all your information typed onto a ‘storyboard.htm’ page, you can quickly ‘copy and paste’ information as you build your pages.. it’ll take WAY less time now that you’re organized.
  3. When typing information such as a document name, or Meta Title, into a web page your web editor will ‘spell check’ for you! When typing into the meta tag text field in the editor, or when typing a document name in the Folder List you must rely upon your ‘fingrs’ to Spel Chek.

“Type-O’s” account for over 50% of the cusomer support issues we encouter.

Video Instructions

http://youtu.be/vPxk7frwQw4

Text Instructions

Now we move onto creating your pages, and with your ‘storyboard’ complete, it should be a ‘snap’. To create a new page: You just make a copy or duplicate of ‘any’ existing page, in your template package. You can make a new page based off any of the pages in the “root” folder ( where your index.htm page is located ) or make a new page based off of any of the pages located in the ( Pages, Sliders, Enhancements, Features ) folders. Preview your existing pages to help determine which page in the template will best ‘suit’ the layout for your new page, then duplicate/ copy it. If creating a new page by using our ( storyboard ), start by copying ( Ctrl+C ) the “document name” from your storyboard…

Open the page you’d like to copy or duplicate

Click the ( File menu ) Click the ( Save as ) command

paste the “document name” into the [ File name: ] field

Click the ‘Save’ button. Wash, rinse and repeat until you’ve create all your new pages. You may be asking yourself, but what if I like the layout of say, the ‘about.htm’ page, and I want more pages that look like that? You have 2 options.. you can ‘copy’ or ‘duplicate’ the about.htm’ page just as you would create a new page. OR, you can simply ‘copy’ the body content from one layout to the other. The beauty of the Bootstrapped templates is the ease in which you can copy ‘content snippets’ from one page to another, or from our ‘snippet’ examples page. You can quickly change the body content of your page from one layout to another with some ‘copy and paste’ action.


Learn how to copy and paste Bootstrap snippets.

Video Instructions

http://youtu.be/RYnCfJ29RUE

Text Instructions

We’re in the final stretch … all that’s left to do before we add content to our new pages, is updating the Navigation components, and Library components. Your web pages include both shared components, and page specific content regions. The “shared components” are embedded into all your template pages. Shared components are basically ‘include’ pages. The ‘include or Library’ pages are dynamically added or embedded into your template pages via your web editor. Shared components allow you to quickly update common web page information such as a menu bar, copyright information, or the website name. You only need to update in one page, and your web editor will apply those updates to ‘all’ your pages. Now, the GREAT news, you DO NOT ‘need’ to display all the shared library components in the template, you can remove what you don’t need. We include several components, but you don’t need to use them all. We’ll show you how to remove or disable them in the following tutorial.

Let’s start with the Navbar



Get into this habit:

when updating ANY page located in the “Library” folder, do this FIRST:

  1. Preview a web pages that contain the Library item you’ll be updating, and PREVIEW using Firefox or Chrome.
  2. Keep the page open in your browser as you make changes to your Library page.
  3. To view your changes and check your work, simply ‘save’ the Library page, then ‘Refresh’ the open browser page.
  4. Don’t close your Library page UNTIL you’re satisfied with your work, checked for errors, and tested your changes.

WHY is this habit important? Here’s my reasoning:

  1. when you preview your work in a web browser, you see what your visitors see
  2. preview with Firefox or Chrome because these are the ‘best’ browsers for web developers
    • they do not have the caching issues that IE does
    • you can clear the cache quicker in these two browsers compared to other web browsers
    • they include troubleshooting tools which we’ll review in the ‘tutorial’ faq and troubleshooting sections.
    • they display Google fonts locally on unpublished web pages, IE does not.
  3. by keeping your Library page open UNTIL you’ve checked your work, you can easily
    Ctrl+Z to undo errors.
  4. once you ‘close’ a page, you can no longer use
    Ctrl+Z to undo, you must figure out your error and fix it, or start with a fresh Library page.

Updating the Navbar

Expand the [+] Library folder by clicking on the [+] beside the folder name. Expand the [+] shared folder. Double click on the “menu-top.lbi” page to open.

At the very top of the page is the phone number, this is actually a dynamically included component, added to a dynamically Library page. When you update the ‘
phone‘ Library page, the phone number in the ‘menu-top’ Library page will also update. What you see is a regular bullet list, each item in the list is hyperlinked to a page. Referring back to your ‘storyboard’ you can now modify the ‘menu-top.lbi’ page to display your
Page name and link to your new pages. It’s a fairly simple process, but much easier to understand when watching a video demonstration. So for this exercise I’m including a video in place of written instructions. Review the video at the beginning of this article to learn more.

The Contact Form

You may not want to use the Contact form so I’ll start by showing you how to remove it.

  1. in the ‘navbar’ folder, open the ‘contact.htm’ page
  2. click the <div.navbar> link located on the ‘Quick Tag Selector’ bar
  3. press ‘delete’ on your keyboard

To update the contact for, you only need to update the email address through your members page at my.i3dthemes.com. Review the video instructions above to learn how.

Shared Components

Now we move into the ‘shared’ components. Expand the ‘shared’ folder by clicking the [+] symbol next to the folder name. You’ll see a list of pages, an ‘icons’ folder, and an ‘inactive’ folder. The icons folder includes 50 or so additional icons you can use in your ‘social-icons’ component, or anywhere in your site for that matter. The inactive folder include Library pages that are embedded into your template pages, BUT do not currently have any content in them. These are optional. You can easily add content then position the content in your pages via the ( primary, secondary or minimized ) stylesheets located in the “Site / styles ‘ layouts” folder of your web template. Let’s get started with updating our shared components shall we.

To start:

  1. open the index.htm page
  2. preview in browser, and keep this page ‘open’ in your browser so you can quickly ‘refresh’ and preview your updates.

Next:

I like to start with the components displayed at the top of my web pages, and work my way down. As you look at the list of pages in the ‘shared’ folder, the names of the pages should make a fair bit of sense in regards to what content they contain. If you’re not sure you can open the page to see what’s on it, or view your ‘primary.htm’ page in the Design window, and try to ‘double click’ on a component. The double-click action will open a small popup window that will tell you which Library page the component is linked to. Typically I’ll start with the following:

  1. website-name.lbi / graphic-logo.lbi
  2. tagline.lbi
  3. phone.lbi
  4. textlinks.lbi
  5. social-icons.lbi
  6. google-search.lbi
  7. footer.lbi

You’re template may have all of these items, or just a few, or you might have components not listed in the above example. The number and type of shared components varies template to template, you can update which ever pages you like and in what ever order. Just update ALL the Library pages located in your ‘shared’ folder and Preview the changes in your web browser as you go through each Library page. Here’s a video demonstration showing how this would be accomplished in a typical Bootstrapped template. Here’s a list of individual tutorials, showing how to update each Library component in detail.

  • navbar
  • website name
  • tagline
  • graphic logo
  • phone
  • textlinks
  • social icons
  • google search
  • news carousel
  • footer

Now that you’ve updated the Library pages located in your “shared” folder, there are a few Library components used for specific layouts. You’ll find these Library pages located inside the
Sliders folder. The tutorials for these components can be found on the ‘Instructions’ tab of your members page. The complexity of updating some of these components varies from template to template, but it’s can be a bit beyond the scope of what I would call a ‘basic’ update as it may require changing images, or delving into the HTML of the page a wee bit. We want to make sure you have some sort of foundation in place before tacking the more advanced updates. This way you know you’ve made some progress, and not it’s the ‘fine tuning’ and ‘details’ Let’s sum up. You’ve completed the Prep, Set and Go! checklist. Which means you now have a ‘shell’ to work from. And quite possibly most of your work is now done! Your pages are created, navbar linked to your new pages, and the shared components have been updated. You now have pages to add content to. You can even show this to a client or boss if you need to, and they’ll see you’ve making progress.

Save