Front-End Web Development Class Final Project

A fully-responsive, custom-coded website for the SUNY Adirondack Front-End Web Development class.

Read the specifics of the project, programming and design.

View both sites by clicking the links below:

Final site | Test site

FINAL SITE

TEST SITE

CPR-Test-site

Creative Property Resolutions website

Built with:

  • GIT
  • Visual Studio Code
  • Dreamweaver
  • Adobe Photoshop – image adjustment for resolution, color and clarity
  • Adobe Illustrator – logo design
  • CSS
  • Javascript
  • HTML
  • Browser Developer Tools
  • Team communication using Slack
  • Deconstructed an html5 template from templated.co
    • Designed and programmed a responsive logo using scalable svg
  • Used code from cssscript.com for the read more/read less function and modified to fit site design

Features:

  • Server-side includes using .shtml for easy implementation and upkeep of header, navigation menu, footer and scripts
  • Customized design
  • Mobile responsive, custom-designed logo added to header in place of logotype
  • Mobile Responsive menu with dropdown – code taken from snippet and reprogrammed to match current design and added search box to the nav menu
  • ADA Compliant (alt tags, raw text, etc.)
    • Tested with ANDI, webaccessibility.com, and other tools on www.w3c.org/WAI/ER/tools/
  • Custom URL and hosting with external source
  • FAQs with Read More/Read Less functionality
  • Pop-up chat window, with custom image (non-functional)
    • Added code to change to smaller icon for phones upon load or resize and used transparent icon from Shutterstock with edits
    • Added a CSS shadow to the pop-up chat box and mobile icon for better visibility
    • Utilized z-index code to ensure top position
  • Search box in navigation (non-functional)
  • Contact form (non-functional)
  • Use of bulleted and numbered lists
  • Utilized Flex display for alignment

Reference sites:

  • https://www.w3schools.com/howto/ (CSS tutorials)
  • www.cssscript.com (Read more/ Read less function and sliding nav menu code)
  • https://templated.co/intensify (base template)
  • https://templatemo.com/tm-529-ramayana (sidebar drop-downs)
  • https://1stwebdesigner.com/responsive-website-tutorial/ (code tutorials)
  • https://www.w3schools.com/howto/howto_js_popup_chat.asp (pop-up chat window)
Skip to toolbar