/dog-party-website

Turing Module 1 Dog Party Assignment

Primary LanguageCSS

Dog Party Project

Table of contents

General Info

Dog Party Logo

A project for practicing HTML, CSS, and a touch of JS for Turing's Front-End Engineering course, Module 1.

Motivation

Dog Party is a project I was assigned as a new student at Turing. We were given a static comp with limited styling details (e.g. a few color hex codes) to reproduce from scratch in code. This was primarily working with HTML and CSS, and we also had a chance to experiment with form functionality using JavaScript and CSS media queries for making the design responsive. See the comp here.

Built With

  • HTML5
  • CSS3
  • A touch of JavaScript

Screenshots

Website screenshot on desktop

Top of website on mobile

Website columns on mobile

Features

  • Altering page content via input field (JS)
  • Responsive (CSS Media Query for navigation and page columns)
  • Pictures of adorable doggos
  • One-page design
  • Pictures of adorable kitties
  • Link destinations

How to Use

  1. Try naming the doggo by entering what name you'd like into the input at the top and pressing the "Name your dog" button!

  2. See how the page responds to different screen sizes by viewing on mobile or resizing your browser window to less than 680px wide!

Setup

View here on my GitHub.

OR

Download and unzip the dog-party-website.zip file, and open the index.html file to view the website.

License

All credit goes to Turing School of Software for providing the project specifications and website design.