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:
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)