Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
fonts
img
js
ref
.DS_Store
.gitattributes
README.md
favicon.ico
index.html

README.md

RexyDog

This site is all about my dog, Rex. He's a Border Terrier and he's totally cool.

Background

As a junior developer, I needed a project to draw together some of the front-end fundamentals that I've been learning, putting the theory into practice.

I've also found layout customisation frustrating in the past (i.e. floats, clears etc. always felt like more of a 'workaround'), and was intrigued by the introduction of CSS Grid.

This project was a great opportunity to get to grips with the key concepts and syntax.

Core Technologies

  • HTML5
  • CSS3
  • CSS Grid
  • CSS Effects
  • jQuery
  • Lightbox 2 (credit to Lokesh Dhakar)
  • Font Awesome
  • iFrame

Key Features

In this project I explored the following:

  • Basic markup
  • HTML5 semantic layout
  • Single-page design
  • CSS style experimentation
  • Mobile first design
  • CSS Grid manipulation
  • Nested grids
  • Responsive layout with media queries
  • JS Lightbox modals
  • Image overlays

Recycle

Please feel free to reference the structure, styling or JS in your own projects.