Web Site development project

Project # 4 - (Major semester Project) 

Create your own Website

Responsive design (see above graphic - example)

Preamble (software options for you to complete this project) 

Software that you could use for this project  (Visual studio, or Notepad ++) - You might have to conduct an install on your computer. You might require my admin privileges for this aspect. Please see me if needed. 

Brackets   or  Visual Studio   OR  Notepad ++  Or 

Getting started Visual Studio

• How to get started with Visual Studio for web site development / 

• How to add in ill sense in HTML / another related link / add live server (to view site as you make it!) 

• Getting started with Visual studio for web development (no we're not using the bootstrap extensions)

Getting Started with Notepad ++ / Brackets

• How to use Notepad ++

• How to Use Brackets for Web Development

Other IMPORTANT resources to get started..."setting the stage"...

1. Image resizing / page layout / All about wrappers for sizing site content 

2. parallax scrolling / Make a Parallax Scrolling  Feature in Five Minutes (video)   / How to make your project "responsive" (so it can be viewed correctly on a variety of platforms

3. Make a video parallax scrolling effect (see this example) 

trimming a video for use as a video parallax scrolling option 

4. how to make an image cover a page 

5. How to make your image folder accessible - mapping the folder 'pathway' correctly  (if you don't map the subfolder's location - eg image folder - the folder's contents will not display. Other option is to put images on the same 'level' as the index page! 

Project Overview

• • • • • • Create a project folder (once you make this DO not move the files around later) 

          • Create an HTML file (index.html) - with the basic structure elements copy and pasted

          • Create a CSS style sheet (stylesheet.css) - with a basic structure copy and pasted

          • Create a .JS page - be sure to reference both CSS and JS in the header section

          • Decide on a topic - What is your site going to be about? 

          • Decide on a layout for web site and colour scheme and design features.

          • Add in a navigation bar (either an "inline" style tag" or you can parse it out between .html /  .css and possibly .js (see examples)

          • Add a home page (index.html) AND four correctly linked sub pages accessible from a navigation bar

          • Add in some JavaScript libraries and functionality at the end of the unit before we host these projects live on the web!

          • Save -  videos / images / other related site content all in the same folder.

Web site Build Criteria

• Create a web site project that contains a minimum of FIVE separate HTML pages  (an index page and a nav. bar going to FOUR linked pages)

• A separate linked .CSS page / A separate linked .JS (JavaScript file) - OR you can use a Internal Script tag to "embed" the JavaScript (easier option)

• A working navigation bar with a sophisticated design and functionality

• A parallax scrolling feature (i.e. text floats in front of the graphics or video)

• A first rate home page with a simple impactful design / a high resolution hero image / effective colour scheme / some essential content (but not very much on the home page)  

• All the linked HTML pages should have some relevant content that contributes to the quality , functionality and usability of the web site 

• Each page, in addition to parallax scrolling, should have at least ONE image with a hover feature (you may put ALL your image hover functions on ONE page (total of say FIVE) in one image gallery if you wish!

• At least one video that is embedded in an I-frame format Or a slide show feature OR an image gallery with hover features.

• At least three additional site features as described in part Five and Six of this site (or choose your own)

• FTP - use free host to transfer your project to the web (will do this part after project is complete and ready for 'prime time') Your hosted project URL is ALL that you will be submitting for this project. 

Suggested Web Site Topic list: 

A restaurant / a fashion or photography site / a sports related web site / travel destinations / inspirational quotes or poetry / trends in technology / …(a topic that lends itself to a strong 'visual appeal' is ideal) 

Before you commence please read through the following links:

1. Making a website - explained   You may use one or more of these as a template. Feel free to "cut and paste" into your project! 

2. Unit of Measurements in Web development - Using 'em' or px  or % but....px is recommended because...

" The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use. "

Step one - Setting up folders and files - Use Brackets or Visual Studio or NotePad ++ 

web site example one 

Here are a couple of good links to help you work with the Visual Studio software for web development 

How to Add in the 'view in web browser' extension for Visual Studio (Live Server extension!) /  How to use Visual Studio for Web Development  / How to use "intellisense" to speed up coding workflow with both HTML and CSS 

Part A - set up a linked HTML page (for future duplication)

• Locate and download a collection of great quality and impactful images to use on your website. Also make list of URL's with related site content that will help you later on fill out the web site

• Next, set up a project folder in your one-drive storage drive or a place where your work is secure and you won't have to MOVE the files while we build our website. Call this folder "My web site project"

• Open up brackets (or other text editor

• Create an "index.html" (home page file) AND a separate external "stylesheet.css" page AND a "myscripts.js "

• See this example (how to reference a CSS page and a JavaScript page in the header section - example)

• You may also copy the html and css3 template outline into your brackets page from this site! 

Part B - Set up a basic CSS page in which you will build out styling elements

• Please read - A great site that outlines the creation of a CSS page!

• You may use all three types of "CSS - inline / internal / external " in your project; depending on the uniqueness of the styling (the differences are explained here)

• An HTML page is better organized if you specify the "body" content into its general area on the page. For example, you might want a separate 'header section, hero image, feature section, footer etc. (how to do this is explained here)

To add in a specific JavaScript function to an HTML page (sometimes using the scripts.js approach doesn't work) do the following:

"You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML, in the <body> section, or after the </body> close tag, depending on when you want the JavaScript to load...."

Step Two - Make a navigation bar on your index.html 

You are now ready to start making your home page (index.html). You will be either using and MODIFYING an existing navigation bar (copying most of the code from the links below) or if you are ambitious writing a navigation bar totally from scratch. Many of the examples have some html / CSS AND JavaScript built in to them. Therefore it is very important for you to ensure that these pages have already been made as outlined in the previous section!

1. Navigation Bar - Option one - copy and paste and then you MUST personalize the look and feel of the navigation bar (colors / font type / font space / margins / name of links....)

2. Copy and paste code to the HTML page and then modify your script to personalize the look of it.

3. Copy and paste and then modify the navigation bar code from one of the links below. Be sure to personalize it and make it your own.

Navigation bar code links options - or you can make one completely yourself

1) Select the navigation bar code from this link / A shopping centre of navigation bar choices

2)  Try these beautiful navigation bar designs that have great response - more advanced 

3) Code-pen examples: Responsive Navigation Bar:  example one , example two, example three, example four, or look for your own from this link

How to make your navigation bar 'sticky' so that it stays at the top of the page when you 'scroll'. 

Navigation Bar - Option two  Create your own navigation bar from scratch (more advanced but a worthy challenge :) ) (*)Note: if you chose to make your own, then please add a 'developer' comment' in your html structure page - so I know

• Build your own responsive navigation bar built by you from scratch /  Alternate coding instructions for this task / W3schools - how to make your own nav bar feature

Step Three - Complete your index.html page and prepare for duplication

In the next part of the project, you are going to complete your index page with all HTML page structures (tables, image locations, side menus and any other CSS style elements (site colour scheme, parallax scrolling, image hover features, slide shows and other "look and feel" elements to your site).

Once you have completed the look and feel of your home page we are then going to be moving on to building out the basic FULL site structure and linking up the new pages to your navigation bar (see next step)

To ensure your website views the SAME on different sized screens like tablets and IPADS then add in a "responsive design" feature. (optional feature but would be great to include) 

If you want your page to have a "jump" to feature you can follow use the following procedure: 

"Jump down" procedure

Here is a sample script that has been verified to work! (responsive CSS classes) 

Make a Parallax Scrolling Feature in Five Minutes (video) / how to layer graphics and texts

Step Four - Create your full site structure with LINKED Navigation bar pages

In this next step in the process, you will be "copying and pasting your index.html" page, matching the number of links on your navigation bar to the number of copied pages. You will then rename each of these copied pages to match the name of the page as explained on the navigation bar link (eg. if I build an electric car website, one link might be called TESLA and therefore there must be one html page called TESLA.html). Once you have renamed all your files in your root folder to match the names of your navigation bar links. 

(*) The reason for this of course is to save you some time and to ensure that EVERY PAGE from your site has the same 'look and feel' 

However, when we are working on files locally BEFORE they get hosted on the server, we must use a local pathway or else our links won't show up. For example, if my project was LOCALLY placed in this file my href= would read " R:/student resource/ tlinburg / index.html" It is only when your web site is HOSTED on the server that it would look like the image below!

However, you may also use "relative" links instead so that you don't have to remap the links in your project.

This process is discussed here

You will also need to go into each of the HTML pages and change the navigation bar links so that they link back to the other pages successfully.

To make your website view-able on any device of any size use this "HTML Responsive Web Design"

Step Five - Build out your web site content with interactive features and unique CSS functions

Now that you have created your full web site structure with all your html pages / navigation bar / linked CSS and JavaScript pages, you will now get to have some fun being creative adding in exciting site features such as parallax scrolling / image galleries / interactive animations / image hover features / CSS animations / (JavaScript) buttons, forms and countless other exciting site features and add ons!

Part I - Enhanced CSS

Please add a minimum of 3 of these project enhancements (or use your own!)

• Enhanced Parallax Scrolling                                                   Video parallax scrolling  / "mother-lode" of examples :) / Video describing how to make it work with CSS / code pen image hover feature 

• A dynamic photo gallery (image hover features)    Instructions / code here  / how to code image gallery with flexbox

• CSS colour gradients                                                   Colour gradients for backgrounds

• CSS animations and transformations                      CSS animations / 2 D transforms / 3 D transforms

• CSS transitions                                                             CSS transitions Part I

• Pure CSS transitions for on - off view                      CSS transitions part II

• CSS animatables (@keyframe rules)                        An incredible "grab bag" of slick CSS functions! (scroll down for list!)

• Other suggestions: CSS animation colour gradients / change background size / image colour border modifications / box shadow / animation of font size / transform of origin / word space (way cool :) )

Step Six - Adding additional site features by harnessing the power of JavaScript 

Introduction

Now its time to use our website coding 'superpowers' to take your site content to the next level. How can we, as budding developers, accomplish such a feat? Well read on!

What are the ways one might to add JavaScript code snippets to a web site project? This link describes your options

Part I - JavaScript add-ons (the 'behaviour' of web design)

Here are a collection of basic JavaScript code snippets that you can simply cut and paste into your website on either an EXTERNAL JavaScript page or build it as an INLINE code snippet. JavaScript is famous for its 'portable' scripting libraries - self contained code enhancements 

 (see link)          JavaScript snippet site 

• • an alert box

  • showing date and time when the page loads

  • animating the background colour

  • Adding text in JavaScript

  • Adding a fillable input form

  • JavaScript form linked to a specific database

  • A scroll banner

OR

Part II - JavaScript - code snippets (dramatic project 'add ons')

CODE PEN (a collection of very unique JavaScript code 'add-ons')

• Code Pen (a few of my favourites) example one (the fabric of reality)

• example two (cloth simulator)

• example three (character animator)

• example four (robot army)

• Example five flags blowing in the wind

• Make a button to turn a light bulb on (W3.org Schools site)

Course Project Resource Help Area

Adding in a video as a parallax scrolling feature :   

An example showing how to add in a video parallax feature/ another/ #3 / working example of a video parallax scrolling feature / free footage web site to use for video parallax /  How to maintain video aspect ratio - responsive design / make a responsive slide show / parallax scrolling  

Other functions and cool features: 

How to use float to text wrap an image                 Exploring the concept of "floating an image" and the use of "clear"

Controlling image opacity                                    Controlling Image opacity (right click mouse look at source code for opacity)

How to make link jump to specific page section    Here is a discussion of the topic

Background coverage                                                 Discussion of topic

How to have images sit "side by side"                     Method # 1 / Method # 2 (excellent discussion of topic)

How to use float "align left"/Align "right" CSS          Use this to align specific elements such as pictures or buttons L or R

How to make a "top of the page" button                 Top of the page with J Query

How to add in an image                                              Image location discussed

Here are all the colour codes for your projects      HTML colour code chart 

To jump down the page                                             To jump down a page! How to open link on ANOTHER page

to set up a image class                                               How to make images responsive when linked with CSS image class

Making an image relative size                                 Code for making an image relative (scroll down to "original answer")

Make your navbar "sticky" staying at top              Keeping your nav bar at top working in concert with parallax scrolling

How to soften image edges in Photoshop            Softening edges in Photoshop for Parallax scrolling / after effects

Flex box features                                                      Discussion of Flex Wrap feature in CSS / Flex box functions and uses

Other helpful Resource Links section (specific information for specific issues)

A completed project sample

The essentials of good web design and structure  /  HTML essential building blocks listed by code type  /   How to code a HTML and CSS site /   Important information related to containers and layouts /  A wrapper Using tables to space out elements such as a collection of hypertext links!  /  How to format a hero image and text (CSS and HTML) /  An "i frame" clock /   To create a page length feature using a variety of strategies - mainly CSS and HTML  / Line height versus using br code for spacing content   / Make image or text appear and disappear via JavaScript button / A finished working website sample