Project # 4 - (Major semester Project)
Final Submisson Due: April 15th (Tuesday)
Please write your project using one of the following text editor options. For Visual Studio Code, you might need to install an HTML / CSS 'extensions' to write the project
Brackets or Visual Studio Code (Add in 'live server' extension for Visual Studio)
Introduction to Visual Studio
How to get started with Visual Studio for web site development
Other plug ins that go with Visual Studio:
add live server (to view site as you make it!) / How to add in ill sense in HTML / Another related link
Setting up a web site project in Visual Studio - introductory (video)
Getting Started with Brackets
Web Development Project Outline
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 Global CSS style sheet (stylesheet.css) - with a basic structure copy and pasted
Responsive Design - Create a project that loooks great on a collection of different display screens!
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 - A Fully Proficent Project
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 "GLOBAL" .CSS page / 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!
A half page of differentiated content on EACH 'linked 'subpage' (The pages linked to the nav. bar)
At least one video that is embedded in an I-frame format AND an image gallery with hover features (see these examples)
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 via 000 Web Host (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.
Optional Project Enhancements (Extended learning - more advanced)
Intro to Responsive Design / Project Fully responsive Design (in-depth)
Letter Layer Mask video loop (add a script tag in the html to add the JavaScript snippet)
(*) You may choose some of your own outside of this list as well!.
Suggested Web Site Topic list - something visually appealing...
A restaurant / a fashion or photography site / a sports related web site / travel destinations / inspirational quotes or poetry / trends in technology / …
...incorporate a topic with strong 'visual appeal'
Pre Project Mandatory Reading:
Making a website - explained You may use one or more of these as a template. Feel free to "cut and paste" into your project!
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 Code (only)
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 "intellisense" to speed up coding workflow with both HTML and CSS
Part A - Getting started...build your Index.html homepage...
Locate and download a collection of great quality and impactful high resolution 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
See this example (how to reference a CSS page in the header section - example)
You may also copy the html and css3 template outline into your brackets page from this site!
Please include a 'wrapper' if you can - it is all explained here! :) / How to centre content (use the text align) / w 3 schools - use of the align feature and flex box explained! / how to add an image and text side by side / how to manage parent / child elements / adding a wrapper class / How to Position TEXT over an IMAGE
Part B - Set up your GLOBAL CSS style page from which you will be building 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 please wrap them in an embedded script tag <script> </script>
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 MODIFYING an existing navigation bar (copying most of the code from the links below) or if you are feeling ambitious, then write a navigation bar from scratch. Many of 'premade' navigation bars come with some CSS AND JavaScript built in to them. You should add the navigation bar CSS into your global style sheet but the JavaScript should be embedded directly into the HTML structure page (as described in this link).
Option ONE - Navigation bar related links
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 an image a 'link'
Option TWO - Build your Own navigation bar
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
(*) Note: add a developer comment in the structure page IF you created a quality completely on your own. You will be awarded some extra points for putting in that extra coding effort!
Add a Background HERO Image
You will need to add in a HERO image into your project. This Image should cover the entire page and be of a high resolution and quality. As well, you might want to add some site title into this as well that goes OVER the image.
This link describes the steps! Hero Image with Title text
Step Three Create a parallax scrolling feature / responsive design / complete your index.html page / prepare for 'replication'
Add a 'Hero' Image
Background images explained / How to Add an Image and Backround in HTML / to adjust the order of the stacked items so that the hero image doesn't go in front of Nav bar - see this link (adjust the Z- Value) / ALL about placement of Images in HTML
Parallax Scrolling feature
A great guide to making a parallax scrollling feature / example
Parallax Scrolling (what is it?) coding description (W3 schools)
How to do the coding for a Parallax scrolling page (Video discussion) / another video on Parallax scrolling!
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
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)
(*) Try to get the following features to work but if you can't then try to just get the 'anchorded Nav Bar to function! :)
'Sticky' Navigation Bar
Make your Navigation bar 'Stick' to the top of the page OR Anchored to the top while content scrolls underneath.
You have THREE OPTIONS for this!
Make your Navigation Bar Sticky - using CSS and JavaScript (gold)
How to make your navigation bar 'sticky' so that it stays at the top of the page when you 'scroll'.
Step by step guide to make your nav bar 'sticky'
Make your Navigation Bar Sticky - using JUST CSS (silver)
Creating a Sticky Navigation Bar with CSS ONLY
Make your Navigation Bar Anchored to the top of the Page (bronze)
make it anchored to the top of the page.
Responsive Design
To ensure your website views the SAME on different sized screens like tablets and IPADS then add in a "responsive design" feature. (ADVANCED feature but would be great to include)
Responsive Design video discussion
"HTML Responsive Web Design" / How to Make your Nav Bar responsive with CSS and JavaScript
Once you have 'attempted' to make your website 'responsive' use the Chrome 'inspect' tools to get a preview of your website on a tablet or a mobile device!
Other Index Page Optional 'add on' options:
If you want your page to have a "jump" to feature you can follow use the following procedure:
How to add an image that is INSIDE of a folder in your web site folder (eg if you have your images in a seperate folder - you must tell the browser to look INSIDE a folder) "
"Jump down" the page - procedure
Add an image gallery (without responsive design) /
Image Gallery with responsive design (resize the window too see how this works)
Step Four - Replicate your index home page / rename subpages / link to the Navigation Bar
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.
As described in Code Academy I would use "relative" links to map the location of the relevant files (same goes for images etc. - if they are inside a folder)
This process for mapping relative links are 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.
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 , you will now get a chance to personalize your site and add in some unique site features - to make it stand out from the crowd.
Some cool project enhancements might include:
Unique image hover features / A video parallax scrolling / colour gradients / CSS animations / JavaScript 'on-click event buttons' / box shadows / animated titles / cool title effects (codepen) / background colour switching / ...seriously the list is endless :)
Have fun!
Part I - Enhanced CSS
Please add a minimum of 3 of these project enhancements. Here is a starter database to hopefully inspire you...
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!)
More Examples - yes the list is endless...
CSS animation colour gradients
image colour border modifications
word space (way cool :) )
Step Six - Adding additional site features by harnessing the power of JavaScript (Optional)
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 some 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 (will be updated as the Unit Progresses)
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)
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 / Web site example one