Project Introduction

We have already laid out the plan for how this website will work, but now it’s time to get it coded! Using Dreamweaver, you will do the actual design work for our Landing Page, and give our future clients a place to download our upcoming app for either Android or Apple devices.

Our Landing Page is going to be one of the toughest challenges you have faced yet, because it needs to actually work. Hopefully, all of the videos and tutorials on Dreamweaver have sunk in, because you will need to use every skill you have learned in order to get this project done on time. 

Don’t forget, this landing page needs to be fully responsive! If you don’t know what that is at this point, or are terrified of it… take a look at the easy to follow video (at the end of this page) from the Bring Your Own Laptop channel on YouTube.

Your website needs to include the following elements:

1. 2 Working Links: Have a button designed for downloading the app for both Google Play, and the App Store for IOS devices. The links should go to where the example links go, since our app is not actually REAL or able to be downloaded. Your links just need to WORK.
2. Responsive Breakpoints: Your Landing page needs to have Responsive Breakpoints for Screen, Tablet and Smartphone layouts. These breakpoints will be tested using a Google Chrome window.
3. 1 Animated Element: Most websites have some very subtle animation effects, such as button rollover or hover style. Your design must incorporate at least one element of animation.
4. Exported into a ZIP file: You will manually bring the ZIP file to the Instructor, ready to be extracted and opened in a Google Chrome tab. It needs to include all of your source files in order to work, so be sure you know HOW to export it before you hand it in!

“Making your first WORKING website via Dreamweaver may seem like a daunting task at first. Just keep in mind that so long as your landing page is kept VERY SIMPLE, there should be no problem being able to produce this by the end of the week. If your design is over complicated or too complex, then maybe re-think it.” – GD

Sample Landing Page Design

Of obvious reason, I cannot provide a fully working example of this project due to the limitations of our WordPress website here. However, the layout and general design should explain more than enough. Keep in mind, my design is far more complex and complicated than yours needs to be in order to satisfy this project, so feel free to ask me for more examples of what you could do if you need it.

Project Requirements & Helpful Links

• You will submit your final ZIP file via flash drive in person, directly to the Instructor and present your work to the class. Your Portfolio portion for this project should only include screenshots and mockups of your design, which will be emailed to the Instructor as normal along with any other assignments for the week.
  • Landing Page Requirements
    • Minimum of 2 working hyperlinks, to the correct websites.
    • Responsive design and functionality for Screen, Tablet and Smartphone breakpoints as dictated by the Wireframe designs from the previous week.
    • Minimum of 1 attractive animated element working properly.
    • Correctly Exported and Delivered, in a cleanly organized folder.
  • More Examples and whatnot!
    • If you are still struggling with how this Landing Page should look, head over to colorlib.com and see some of the App Landing Page examples there. BE CAREFUL THOUGH! Your design needs to match all of the branding up to this point! You can’t just copy someone else here! Get crackin’!
• Once again, this project should be done to a fully professional standard using HTML, CSS and multiple elements. You can not simply embed a large jpg file into Dreamweaver and call it a day. This will result in a ZERO on the project.

---

Project Grading Rubric

The grade for this project is weighted heavily on the full extent of work done. Not only must the minimum requirements that the website have working links and functional breakpoints, but the design itself is also being graded as part of the project. If the website does not work at all, then a poor grade will given, no matter how attractive it is. If the website functions, but is poorly designed and unattractive, then a poor grade will be given. Only students who can showcase mastery over the subject matter will receive grades above poor, based on industry standard level submissions.

AMAZING 90-100	GREAT 80-89	GOOD 70-79	SUB PAR 60-69	POOR <60
You showcased an complete mastery over this project with a well designed landing page, that was fully functional.	Student was able to make the website work and meet the requirements, but did not design an industry ready landing page.	Student did make the website function as required, but the design was not at all strong enough to be considered professional level.	Student did the absolute bare minimum, and failed to provide an attractive functional webste.	Student did not follow directions, did not produce remotely acceptable work, or didn’t cover all the requirements.