I I I

Web Design Projects

~ Follow along as I learn to code ~

To visit a project's website click on the large project title

Personal Projects

plateWise

leave the healthy nutrition balancing act to us

plateWise is a design, html, css and javascript project created in 2021

  • plateWise helps plant-based eaters easily get all of their essential vitamins and minerals whilst eating a wide variety of wholefoods
  • The user inputs their weekly grocery items and is returned an in-depth report of their diet's nutritional quality
  • This project is in the build stage with emphasis on the types of features it will offer users
  • It isn't yet connected to a database so I've linked to one of my own nutrition reports

foxterrier.co.nz is a design, html and css project created in 2021

  • Showcases Tamsam Fox Terrier dog breeding kennels
  • Gallery photos provided by Karen Plimmer Photography

Codecademy Projects

  • Codecademy projects were created as part of the front-end developer course
  • Projects are listed with the most recent first

What have I been learning?

Module 12

  • Javascript
    • classes

Karen Plimmer

this webpage

Build a personal portfolio website to show projects completed during the front-end engineer path

  • Developed competence in GIT version control, Git Hub Pages and file navigation
  • Imprinted knowledge of CSS grid, flexbox, positioning, transitions and media queries
  • Became fluent in styling with chrome developer tools
  • Created a javascript slide-out mobile menu with an animated open-close icon
  • This webpage will be updated as I progress through the codecademy course
  • Created 25 September 2021; module 11/29

What have I been learning?

Modules 5-10

  • Javascript
    • conditionals, functions and scope
    • arrays, objects, loops and iterators
    • debugging
    • document object model
  • HTML forms introducing form validation
  • Website accessibility
  • CSS transitions and animation
  • Command line, Git and GitHub

Create a home page for a company using flex-box

Karen Plimmer

style guide

A website style guide that can be used for future web design projects

  • Colours, fonts, lists, links, layout styles and more!
  • Motivated a complete overhaul of my css files, removing redundant or incorrect rules
  • Prompted restructuring of my html files to have semantic headings with no levels skipped
  • Created javascript functions to build default html and css files
  • Practiced DOM manipulations using buttons and tabs to alter page content
  • Enhanced my competence in using chrome web developer tools to build very clean stylesheets
  • Created 7 September 2021 (ongoing project); module 3/29

Cheat sheet

Coming soon

Build your own cheat sheet

  • Builds a reference cheat sheet for a HTML or CSS feature
  • Created 6 September 2021; module 2/29

Dasmoto Arts & Crafts is a single webpage for a fictional arts and crafts store

  • Html and css project created from a designer's specs
  • Introduces off-platform project creation utilising Visual Studio Code
  • Created 2 September 2021; module 2/29

Skills