Home Work

Christopher T. Guy

Welcome

Welcome to the "Home Work" page, the first of two supplimentary web pages for my Portfolio.

Anyone who has gone down the Self-Taught route knows you build a lot of projects during that process. After awhile I started making my own templates for the projects, I included a <header> & <footer> for myself. I then put whatever project I'm working on in the <main> tag. I then started to create the templates using the DOM for practice.

In the end I ended up with a lot of different little projects. So I decided to make an environment to display all of my projects on one page. I created the "Home Work" web site to display the small projects and skills that I was learning, I further divided the page into chapters that contain similar concepts, they also have different experience levels and skills included.

I hope you enjoy and find something that interests you. This site is part of my learning experience and I do not use it for profit.

Get with "The Program"

Learn to "Code"

Buttons

The <button> tag is the most basic element used to create a clickable button. We can also create a clickable button with almost any element using a little bit of javaScript. The <input> and <div> tags are very common elements to create clickable buttons as well.

The <button> Tag

Synopsis:

I created 5 <button> elements that changes the theme color on all the project boxes. The button's use local storage to save the theme color and the button's position, I added a conditional so that only one toggle is active at any one time.

Coded by: Softcorp Industries

HTML Theme

CSS Theme

SASS Theme

JavaScript Theme

Default Theme

Built with

JS
JS
JS
JS

The <input> Tag

Synopsis:

This project uses an <input> tag to create the button element. The dark mode button changes the dark mode on all the project boxes and uses local storage to save the dark mode position on or off.

Inspired by: Design Course

Dark Mode Toggle

Built with

JS
JS
JS
JS

The <div> Tag

Synopsis:

The 3-line "Menu" navigation bar is quite familiar to most people. I created 3 <div> tags for the 3-lines for some "Menu" designs. I also created some "Menu's" with just 1 <div> tag and used the :before & :after seudo-elements to create the 3-lines.

Design by: Softcorp Industries

Built with

JS
JS
JS
JS

"Click Events"

Synopsis:

This Button project uses one attribute to group all the elements with-in that group with the same attribute using the querySelectorAll() method. DOM manipulation is then used to display any actions from the "e.target event".

Design by: Softcorp Industries

Regular Buttons

btn 100

  • btn

btn 105

  • btn
  • btn-active

btn 110

  • btn
  • btn-caution

btn 115

  • btn
  • btn-danger

Rounded Corners

btn 200

  • btn
  • btn-rndCorner

btn 205

  • btn
  • btn-rndCorner
  • btn-active

btn 210

  • btn
  • btn-rndCorner
  • btn-caution

btn 215

  • btn
  • btn-rndCorner
  • btn-danger

Round Buttons Small

btn 300

  • btn
  • btn-smRnd

btn 305

  • btn
  • btn-smRnd
  • btn-active

btn 310

  • btn
  • btn-smRnd
  • btn-caution

btn 315

  • btn
  • btn-smRnd
  • btn-danger

Round Buttons Large

btn 400

  • btn
  • btn-lgRnd

btn 405

  • btn
  • btn-lgRnd
  • btn-active

btn 410

  • btn
  • btn-smRnd
  • btn-caution

btn 415

  • btn
  • btn-lgRnd
  • btn-danger

Built with

JS
JS
JS
JS

Images

Images and the internet go hand in hand. Images are used everywhere from Background Pictures, Avatars, Selling Products or to Display your Emoji's for the day. I used the <img>, <picture> and <figure> tags in the projects.

Image Carousel

Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

Design by: Softcorp Industries

Photo by Chandler Cruttenden
Photo by Laura Chouette
Photo by Daniel Sessler
Photo by Jarrad Horne
Photo by Quaid Lagan
Photo by Sebastien Jermer
Photo by Lewis Roberts
Photo by Nicolas I
Photo by Sajad Nori
II

Built with

JS
JS
JS
JS

Product Gallery

Synopsis:

E-Commerce sites use this type of gallery to display the different views for a product.

Design by: Softcorp Industries

Built with

JS
JS
JS
JS

Image Gallery

Synopsis:

A great way to scroll through a library of images.

Code by: Traversy Media

Img1

Built with

JS
JS
JS
JS

Image Slider

Synopsis:

The image slider is a very common way to display images automaticaly or with the use of buttons.

Code by: Traversy Media

Slide 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 7

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Built with

JS
JS
JS
JS

Animations

Animations bring the internet to life. The projects in this chapter give examples of the different kinds of movements that each CSS property has. I also included some examples of @keyframes and the <canvas> tag in some of more advanced projects.

On Hover

Synopsis:

This project shows you the differences in the movement for each CSS property and an @keyframes for the animation.

Coded by: Kyle at Web Dev Simplified

Transform

Transition

Animation

Web Dev Simplified

para

Built with

JS
JS
JS
JS

On Hover

Synopsis:

This project gives you examples of how multiple @keyframes can animate objects and text.

Coded by: The Net Ninja

Guycorp Industries

When Quality

Counts

Multiple @keyframes

The Net Ninja

para

Built with

JS
JS
JS
JS

On Hover

Synopsis:

This project displays navagation menu's that use @keyframes and a SASS loop to cascade each list item differently.

Coded by: Dev-Tips

Dev-Tips

para

Built with

JS
JS
JS
JS

Canvas

Synopsis:

The <canvas> Tag.

Design by: Softcorp Industries

"Time keeps on

slippin,

slippin,

slippin,

into

the Future"

"Fly like an eagle - Steve Miller Band"
I
I
|
I
I
|
I
I
|
I
I
|

Built with

JS
JS
JS
JS

Storage

The infamous "To Do List", I think this is one of the most valuable projects when you're first learning javaScript. Using the localStorage() method for projects gives you a first look at how "Key Value" Pairs work. Storing and retrieving information is a key component to making an app useful to someone.

The Better To Do List

Synopsis:

This is a 2 part collabrative project by Kyle at WDS and Kevin Powell. Kevin wrote the mark-up and the CSS while Kyle did the javaScript programming.

Coded by: Kyle at Web Dev Simplified & Kevin Powell

The Better To Do List

My Lists


    YouTube

    3 Tasks Remaining

    Tasks

    Built with

    JS
    JS
    JS
    JS

    Traversy Book List

    Synopsis:

    This is a

    Coded by: Traversy Media

    Title Author ISBN#

    Built with

    JS
    JS
    JS
    JS

    Web Players

    Custom Web Players are really cool, period...

    Building a custom web player uses almost all of your front-end skills. Knowing some HTML, CSS and javaScript and you can make a custom Audio or Video Player to your own personal taste.

    Basic Audio Player

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    inspired by Adam Khoury

    00:00 / 00:00

    Built with

    JS
    JS
    JS
    JS

    Audio Player V2

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    Design by: Softcorp Industries

    Built with

    JS
    JS
    JS
    JS

    Audio Track Library V1

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    inspired by Adam Khoury

    Built with

    JS
    JS
    JS
    JS

    Custom Video Player

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    Video Killed the Radio Star

    Video Player V1

    Built with

    JS
    JS
    JS
    JS

    Custom UI

    Custom UI/UX designs make your Web Sites appealing and easy to use. Easy visual navigation and information is the "Less is More" concept.

    Tablet V1

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    Design by: Kyle at Web Dev Simplified & Kevin Powell

    Stuff I need to do

    **************
    Softcorp Tablet
    **************

    Built with

    JS
    JS
    JS
    JS

    Tablet V2

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    Design by: Kyle at Web Dev Simplified & Kevin Powell

    Stuff I need to do

    Built with

    JS
    JS
    JS
    JS

    Phone V1

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    Design by: Kyle at Web Dev

    Stuff I need to do

    Built with

    JS
    JS
    JS
    JS

    Phone V2

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    Design by: Kyle at Web Dev

    Apple Rip-Off

    Built with

    JS
    JS
    JS
    JS