Home Work

Softcorp Industries

Welcome

Welcome to my "Home Work" web site, the second of three web sites that I'm building on my path to becoming a Front-End Web Developer.

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

JS
JS
JS
JS

HTML Theme

CSS Theme

SASS Theme

JavaScript Theme

Default Theme

YouTube Link:

Web Site

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

JS
JS
JS
JS

Dark Mode Toggle

YouTube Link: Softcorp @YouTube
www.softcorpindustries.tech

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

JS
JS
JS
JS

Plain Burger

Cheese Burger

Double Burger

Double Cheese Burger

Triple Burger

YouTube Link: Softcorp @YouTube
www.softcorpindustries.tech

"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

JS
JS
JS
JS

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
YouTube Link: Softcorp @YouTube
www.softcorpindustries.tech

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

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

YouTube Link:

Web Site

Product Gallery

Synopsis:

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

Design by: Softcorp Industries

JS
JS
JS
JS

YouTube Link:

Web Site

Image Gallery

Synopsis:

A great way to scroll through a library of images.

Coded by: Traversy Media

JS
JS
JS
JS
Img1

YouTube Link:

Web Site

Image Slider

Synopsis:

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

Coded by: Traversy Media

JS
JS
JS
JS

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!

YouTube Link:

Web Site

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

JS
JS
JS
JS

Transform

Transition

Animation

Web Dev Simplified

para

YouTube Link:

Web Site

On Hover

Synopsis:

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

Coded by: The Net Ninja

JS
JS
JS
JS

Guycorp Industries

When Quality

Counts

Multiple @keyframes

The Net Ninja

para

YouTube Link:

Web Site

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

JS
JS
JS
JS
  • Demo 1
    • ek
    • do
    • teen
    • chaar
    • paanch
  • Demo 2
    • uno
    • dos
    • tres
    • cuatro
    • cinco
  • Demo 3
    • one
    • two
    • three
    • four
    • five
  • Demo 4
    • un
    • deux
    • trois
    • quatre
    • cinq

Dev-Tips

para

YouTube Link:

Web Site

Canvas

Synopsis:

The <canvas> Tag.

Design by: Softcorp Industries

JS
JS
JS
JS

"Time keeps on

slippin,

slippin,

slippin,

into

the Future"

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

YouTube Link:

Web Site

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.

ToDo List 1

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

JS
JS
JS
JS

Stuff I need to do

My Lists

    YouTube

    3 Tasks Remaining

    Kevin Powell

    para

    Web Dev Simplified

    para

    Mark-up CSS:

    javaScript:

    Kevin Powell

    WDS

    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

    JS
    JS
    JS
    JS
    00:00 / 00:00

    YouTube Link:

    Web Site

    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

    JS
    JS
    JS
    JS

    YouTube Link:

    Web Site

    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

    JS
    JS
    JS
    JS

    YouTube Link:

    Web Site

    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

    JS
    JS
    JS
    JS

    Video Player V1

    YouTube Link:

    Web Site

    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

    JS
    JS
    JS
    JS

    Stuff I need to do

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

    Portfolio

    YouTube Link:

    Web Site

    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

    JS
    JS
    JS
    JS

    Stuff I need to do

    YouTube Link:

    Web Site

    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

    JS
    JS
    JS
    JS

    Stuff I need to do

    YouTube Link:

    Web Site

    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

    JS
    JS
    JS
    JS

    Apple Rip-Off

    YouTube Link:

    Web Site