D DJ Sanderson's profile

DJ Sanderson Padawan Web Designer and Creator

My Journey: Padawan Front end developer to Full stack Designer
Welcome to my world, this is my journey from Padawan front end developer to Full stack Designer. I want to extend my skills to cover not only  HTML, CSS, Java script but  React, Ruby and rails as well.I am also versed in the art of Graphic design.

A Full stack Designer, I believe is a multi-disciplinary skilled person who offers the ability to think of a project as a whole, thinking more of the full process at one time. I think times have changed and we are all required to have more knowledge and skills - to be a mutli-skilled creator, to be an individual with a wide array of skills means they would be able to drop into an area thus giving a team more resources as wells as preventing an individual from being pigeon holed in to one skill set.

I want to be able to be apart of the whole process; doing user experience designs, like layouts and wire frames to user research and finding the core demographics, so we know who we are creating for. Then getting into the user interface design, visuals, colors, typography, layout - the asthetics. Then moving onto the interaction designs, to prototypes or animations. With my already honed Front-End skills ; HTML, CSS, Javascript skills as well as my graphic design experience, I can bring the idea to life with the Back-End skills I am currently developing .

I have been developing and enhancing my Front-end Developer skills for a while now, below you will see some of my work from the beginning of 2008 where I was dipping into it when I was given an opportunity as it wasn't my full time job but was an ever recurring passion .  . ..

I think to be a Full stack Designer offers a lot of variety and definitely gets my developing & designing juices flowing ...

Since I have been creating and learning at every available resource and opportunity I have utilized a number of avenues, I have read may books and used different sites like CodeAcademy, W3School, MDN, Code Camp, Shaw Academy, Udemy, GITHUB, CodePen, GIMP, Pencil, InkScape and more.. .. 

You will see my journey, the ups and downs, the "Arrrgh!!!" moments, the "Woop-Woop!!" moments. Its my log book of events and my diary of my experiences on my path to my dream of being a Full stack web developer and creator. 

I have completed full projects and have set them up as a separate article to be able to go through them in more details and have linked them to my entries. This will be an on-going article, constantly updated.

I hope you enjoy seeing the journey as much as I enjoy experiencing my path. Thanks so much for having a look and don't hesitate to get in touch . . 

Sincerely

DJ Sanderson


26th Jan 2017
So, today is 26th Jan 2017. I have been working on a web page with David, my son.I got him a book over christmas "Get Coding". We have been working on some projects . . . .


1 month of coding
SHAMAZING!!! 

putting in the codes and then POOF!! a web page !!!

AWESOME!!
I am enjoying SCRATCH!! and still working on The Diamond monk page . . . 
I want to make mooooooooooore .. . 

 . . .  but how . . . 

Thinking about taking some courses . . . . .


I have signed up to CodeCamp and  a Computer Science Diploma with Shaw Academy 

I found codecamp and found the course provided me with the basics as well as giving me an opportunity to tackle the more in depth concepts. I spend an hour a day going through the exercises, I think this give me a chance to learn at my own pace and on my hour buss ride to work i have the opportunity to go over ideas and concepts.
3 Months  . . .

Feeling a bit like NEO!!
I signed up to CodeAcademy , I feel I can absorb more . . . 

I joined code academy I feel it  consolidates my learning, as I was completing assignments on codeCamp then I was going over the concepts again on CodeAcademy. I also feel as they utilize different learning concepts/ideas it only benefited me as a learner.

Talk about full Immersion, I am Mr ROBOT!!

coding at 4.30 am
get ready for work
arrive at work for 8.30am
work
lunch
work
I hour bus ride with my laptop on my lap
1 hour of coding
"Travel coding"
arrive home
dinner
family time & TV catch-up
bed

I get to do it all over again tomorrow!!

5 months  . . . 
I feel like I am on fire .. . .  I understand HTML & CSS . . . . and we are into the JavaScript!!
CODING !! CODING !! CODING!!
Code-
<style>
  :root {
    --penguin-size: 300px;
    --penguin-skin: grey;
    --penguin-belly: white;
  
  
  @media (max-width: 350px) {
    :root {
     
      /* add code below */
      --penguin-size: 200px;
    --penguin-skin: black;
      /* add code above */
     
    }
  } --penguin-beak: orange;
  }

  .penguin {
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: var(--penguin-size, 300px);
    height: var(--penguin-size, 300px);
  }

  .right-cheek {
    top: 15%;
    left: 35%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .left-cheek {
    top: 15%;
    left: 5%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .belly {
    top: 60%;
    left: 2.5%;
    background: var(--penguin-belly, white);
    width: 95%;
    height: 100%;
    border-radius: 120% 120% 100% 100%;
  }

  .penguin-top {
    top: 10%;
    left: 25%;
    background: var(--penguin-skin, gray);
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  .penguin-bottom {
    top: 40%;
    left: 23.5%;
    background: var(--penguin-skin, gray);
    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }

  .right-hand {
    top: 5%;
    left: 25%;
    background: var(--penguin-skin, black);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 120% 30%;
    transform: rotate(130deg);
    z-index: -1;
    animation-duration: 3s;
    animation-name: wave;
    animation-iteration-count: infinite;
    transform-origin:0% 0%;
    animation-timing-function: linear;
  }

  @keyframes wave {
      10% {
        transform: rotate(110deg);
      }
      20% {
        transform: rotate(130deg);
      }
      30% {
        transform: rotate(110deg);
      }
      40% {
        transform: rotate(130deg);
      } 
    }

  .left-hand {
    top: 0%;
    left: 75%;
    background: var(--penguin-skin, gray);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 30% 120%;
    transform: rotate(-45deg);
    z-index: -1;
  }

  .right-feet {
    top: 85%;
    left: 60%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-80deg);
    z-index: -2222;
  }

  .left-feet {
    top: 85%;
    left: 25%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(80deg);
    z-index: -2222;
  }

  .right-eye {
    top: 45%;
    left: 60%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }

  .left-eye {
    top: 45%;
    left: 25%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }

  .sparkle {
    top: 25%;
    left:-23%;
    background: white;
    width: 150%;
    height: 100%;
    border-radius: 50%;
  }

  .blush-right {
    top: 65%;
    left: 15%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }

  .blush-left {
    top: 65%;
    left: 70%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }

  .beak-top {
    top: 60%;
    left: 40%;
    background: var(--penguin-beak, orange);
    width: 20%;
    height: 10%;
    border-radius: 50%;
  }

  .beak-bottom {
    top: 65%;
    left: 42%;
    background: var(--penguin-beak, orange);
    width: 16%;
    height: 10%;
    border-radius: 50%;
  }

  body {
    background:#c6faf1;
  }

  .penguin * {
    position: absolute;
  }
</style>
<div class="penguin">
  <div class="penguin-bottom">
    <div class="right-hand"></div>
    <div class="left-hand"></div>
    <div class="right-feet"></div>
    <div class="left-feet"></div>
  </div>
  <div class="penguin-top">
    <div class="right-cheek"></div>
    <div class="left-cheek"></div>
    <div class="belly"></div>
    <div class="right-eye">
      <div class="sparkle"></div>
    </div>
    <div class="left-eye">
      <div class="sparkle"></div>
    </div>
    <div class="blush-right"></div>
    <div class="blush-left"></div>
    <div class="beak-top"></div>
    <div class="beak-bottom"></div>
  </div>
</div>

Answer-

  @media (max-width: 350px) {
    :root {
     
      /* add code below */
      --penguin-size: 200px;
    --penguin-skin: black;
      /* add code above */
     
    }
  }
6 months of coding

I am using CodePen & Github. I am playing with layout and allsorts. I have also been dipping into some youtube tutorials . . . .
9 months of coding
I’m pretty sure I’ve hit some sort of stage of the learning cycle but generally it’s still going well. There are days when I feel like the smartest person alive and days when I feel like the empty space of what I don’t know stretches from here to who knows .. . 

 All I can really do is keep working. 
I know sometimes it feels like I could keep doing it forever with a grin on my face but then times where I want to take my brain out and mould it to do what I want like the slime I seem to find everywhere in my house at the moment .. .  .. . . 

At this point, I would say I’m 85% sure that I’m going to go all in with the programming and switching my career...... ...

I’m get excited when I know I have an hour of coding ahead of me and yet it sometimes causes me some stress. . . . 

I worry about not having enough knowledge .. . will I need a degree in CS ? But I know I have been able to learning things because deep down my passion for the subject pushed me forward, I know I am capable of anything I put my mind to .. .. i Have done it and been present throughout ... . i Just have to focus on the positives and drown out the negative thoughts ... 

I know that anything can be achieve to through passion, determination and hard work .. . 

but sometimes it feels  .. .  blahhhh

the waking up at 4.30 in the morning is taking its toll .. . .the full days at work . .. . the evenings with the FAMBAM . . . 
One Year of coding ..  
Overall things have been going really well. 
This was a short month, work-wise, as I just got back from two weeks of ESPANIA!! I’m rested and excited to get back to work and play (AKA coding)
I’ve also been watching lots of YouTube videos on holiday , soooo loving this developer/ designer  - he is enthusiastic and pumped when he goes through some of his work ... 

very inspiring !! that's how I feel when I think of coding . . . 

 so I haven't done much on projects but lots of revising over the concepts I know now  . . . 

I’m 90% sure I want to program full-time.

Still unsure what to do about recognition for skills learnt . .. .

The plan . . 

another few months of self-study.
build my confidence 
cost? there are a lot of courses out there but finance is a factor . . .  3 kids aren't cheap, LOL!!

 I can't do a full time degree course because I still have bills to pay. BUT to dream,  . .. ahh to dream . . .


Start digging into those new books I got off ABE Books . . . 

Think I need more . . . 
I have signed up to Udemy 
after speaking to a cyber security guy at work -  I was actually helping him with a query and he was talking about his job. I decided for time ever to talk about my coding journey to another human outside of family. He asked about what I did, I explained - he then  suggested UDEMY . . . . He mentioned a few courses etc.,
12 January 2018

Hi!
 So I have decided to sign up to The Full Web Developer course with Udemy, the course seems very comprehensive, the course is taught by a professional bootcamp instructor, it states everything covered is up-to-date and relevant to today's developer industry, it also states new lessons or updates will be added regularly it looks like a complete full-stack developer course that covers everything. . . . 

We build 13+ projects, including a gigantic production application, it walks through examples clearly and informatively. I think it is awesome!!
 I am still on my CodeCamp & CodeAcademy course and this seems to go through some of that and I think it will help cement some of things I already know , I am very excited about this course and hope you enjoy seeing my creations !!

At the very end is some of the course info and I will update this page as I go through new projects - Feel free to share, send feedback or likes. 

Thanks so much for taking the time  . . .
Happy-Coding!!

DJ

100% - I want to to be a Full stack web Developer!!
Creating a basic page, 
using Sublime and the auto boilerplate. I added headings, paragraphs, ordered/unordered lists, etc
Created a table using different table tags, etc
Creating a simple form using only HTML 
and set on codepen
Graphics Creations 

These are some of my works on the graphics side of things. I have used Gimp and a couple other programs.

You will see graphic creations, logo designs etc., I will update and go through some of the steps I went through to achieve theses results.
Creating a basic registration form 
in HTML only
Creating a tic-tac-toe Board, 
it doesnt have interactivity yet but once I complete the JavaScript side i will add a code pen link
Creating a blog, 
I followed the original assignment but then decided to utilize my recent studies into UX/UI skills to practice.
I'm back!

So working on a simple responsive photography blog page. This was quite substantial and I did hit a few road blocks. I have set up its own page as I felt very good once I made it and I think it deserves that !!
Follow the link
The DOM
See The DOM page I created

There are 2 Projects a ScoreKeeper - which she is excellent for playing with the kids as someone forgets to keep score. There is a to-do list app as well.
March 2018,14 months of coding  . . . 

This was a very productive month,

 though some of that productivity was spent doing some non-code stuff - Graphic design
I still feel good about my progress:
As far as web developement, the coding with HTML, CSS., JavaScript, Jquery bootstrap, etc I’m feeling a lot more comfortable with the basic commands and workflow.

The Code alongs and building from scratch has improved my understanding quite a bit. 

Building a  Responsive Layout and utilizing JQuery

These are some of my works on the graphics side of things. I have used Gimp and a couple other programs.

You will see graphic creations, logo designs etc., I will update and go through some of the steps I went through to achieve theses results.

As always I appreciate you taking the time and welcome any feedback,

Sincerely,
DJ
Here is some of my previous work I was using Photoshop and a WebMaster program for them.. . .
Code Pen work

Some of the projects I have created the 
Chucking Mortified Emoji 

here's a link to see the code and animation in action
https://codepen.io/DiJamesSanderson/pen/QmPRVY
Code Pen work

The Rick-Tock 
I love this clock, i really want to make it into an actual app you could use on a phone, maybe like a walker noise as an alarm? we'll see

here's a link to see the code and animation in action
https://codepen.io/DiJamesSanderson/full/mKxEov/
Code Pen work

Walkers clock

here's a link to see the code and animation in action
https://codepen.io/DiJamesSanderson/full/mKxEov/
CS101 Bootcamp: Introduction to Computer Science with Udemy

About this course
A Computer Science & software programming / coding bootcamp  aims to be a Computer Science and software programming introductory course / bootcamp for anyone with no technical background in Computer Science.
This beginner course has the basics of Computer Science (normally an entire semester or several months) the course will equip you with fundamental understanding of Computer Science concepts with the latest technology, such as developing mobile apps,  Big Data, cloud computing, and SQL and NoSQL databases, etc.

I found it very informative and it was very interesting to hear about the different programming languages, concepts,etc.,
Topics covered in this course -
Basics of hardware: 
How processors (CPUs), memory, disk drives work
The basics of desktop and laptop computers and portable electronics such as smartphones and tablets
Basics of software
How software is built. The basics of compilers, interpreters and assembly language.
Popular programming languages
Building webpages in HTML, CSS and JavaScript
Fundamentals of HTML, CSS and JavaScript: the core technologies you need to build websites today
CSS frameworks and the Bootstrap CSS framework
Introduction to JavaScript frameworks such as jQuery, Angular and React
Programming concepts in Java
Introduction to the Java programming language
Fundamentals of programming languages, such as variables, statements, functions, classes
Additional programming concepts in Python programming language
How Python differs from Java
Why Python is popular, and Python programming constructs that help with data analysis or simple scripting
Web servers: Apache, Tomcat, nginx
Basics of PHP and Ruby programming languages
Why PHP is popular
Introduction to popular PHP packages / frameworks such as WordPress, Joomla, Drupal, etc
Mobile app development
iPhone, Android and other programming models
Databases: SQL and NoSQL
Sample SQL and NoSQL scripts
Introduction to popular databases: MySQL, SQL server, MongoDB, etc.
Big Data and data analysis
Brief introduction to Hadoop
Cloud computing
IaaS, PaaS, SaaS
Private, public and hybrid clouds
Conclusion, and the next steps to becoming a full programmer
I think I am going DARK

I feel Like I get lost sometimes and question myself, The waking up at 4 am to code! The focus required at work!! The fact that I am falling asleep on the settee at 8pm and not spending more quality time with my family  .. . 

I know what I am like - I get so focused with things and thats it, nothing else matters . . . 

no i am not going to break into an awesome guitar riff ... 
There are some dramas going on at work  ...  

all I want to do is get my head down and do my work, 

I want to code !!

and spend time with the family  .. . .
I am off for 3 weeks ... .  laters!!
I AM back  . . .

AND

I FEEL GOOD!!!
Rebuilding a site I set up 10 years ago , ... . . see how it went here
A JQuery journey see here
 . . . . .  to be continued
Some courses I have signed up to , I want to expand!!!
Learn how to create a portfolio website using WordPress.
 
-start customizing our Web site we need to get it live on the Internet.
- three main things we need to do to get our Web site all set up on the Internet
        1. First register a domain name and a domain name is just an address 
             - that is an address that directs people to Web site.
         2.  set up web hosting and web hosting this think of it as a remote computer that                         stores all of your content, like renting a remote computer to store content

.. ... have a look at how it went here
2019 JavaScript Algorithmic Scripting: Basic Level

The Math.floor() function returns the largest integer less than or equal to a given number.

Definition and Usage
The floor() method rounds a number DOWNWARDS to the nearest integer, and returns the result.
If the passed argument is an integer, the value will not be rounded.

Description Section
Because floor() is a static method of Math, you always use it as Math.floor(), rather than as a method of a Math object you created (Math is not a constructor).
For the last few weeks I have been focusing on building a substantial application something that has a lot of moving pieces longer HTML, more CSS,  a lot of styling and most importantly a lot of DOM manipulation and event handlers. I am using Vanilla JavaScript.

I am going to build an RGB colored guessing game.

So, how it works;
- load up the page and we get six random colors.
- always different and one of those colors is listed in the heading in RGB numbers
up here the name of the color in our GP.
- goal is  to pick which one.
- they are  three channels red green and blue and each one ranges from 0 to 255 
- player tries to figure out what color its displayed
-guess correctly "YIPPEEE!! CORRECT!!!"
-incorrect "Oopsy!!TRY AGAIN!!"
- gives an option to try again if incorrect but also lets you change the colors if you dont like them
Creating Simon Game in Javascript 
a codecamp project
Hmmm...  I think I have it but let me go through the journey. This singles the end of the  front-end section of my course with codecamp but at the same time I was finishing the front-end of thins on my Udemy course have a look at that here

The Simon Game is a simple game, my daughter has the hand-helded version which is extremely noisy .. . . 

The goal is for user to repeat the pattern showed by the program. With each round a new step is added to the pattern making, the game much more difficult with every round. The program should play a different sound for each button that is hit and it has to enable users to switch between strict mode, which restarts a game whenever user selects the wrong pattern, and normal mode which only repeats the pattern subsequent of the wrong button pressed. The example had 4 different buttons with different color for each button/pad and I followed with the same idea.

see below for the brief from codeCamp;

Take Home Projects - Build a Simon Game
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/obYBjE.
Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
User Story: I am presented with a random series of button presses.
User Story: Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.
User Story: I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.
User Story: If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.
User Story: I can see how many steps are in the current series of button presses.
User Story: If I want to restart, I can hit a button to do so, and the game will return to a single step.
User Story: I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.
User Story: I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.
Hint: Here are mp3s you can use for each button: https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.
Remember to use Read-Search-Ask if you get stuck.
When you are finished, click the "I've completed this challenge" button and include a link to your CodePen.
You can get feedback on your project by sharing it with your friends on Facebook.
Building a TIC-TAC-TOE Game a project with codecamp
The codecamp brief:

Take Home Projects - Build a Tic Tac Toe Game
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/KzXQgy/.
Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
User Story: I can play a game of Tic Tac Toe with the computer.
User Story: My game will reset as soon as it's over so I can play again.
User Story: I can choose whether I want to play as X or O.
Remember to use Read-Search-Ask if you get stuck.
When you are finished, click the "I've completed this challenge" button and include a link to your CodePen.
You can get feedback on your project by sharing it with your friends on Facebook.


Building a calculator a project for codecamp
the brief for the project;

Front End Libraries Projects - Build a JavaScript Calculator
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/wgGVVX.
Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
User Story #1: My calculator should contain a clickable element containing an =(equal sign) with a corresponding id="equals".
User Story #2: My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: id="zero", id="one", id="two", id="three", id="four", id="five", id="six", id="seven", id="eight", and id="nine".
User Story #3: My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: id="add", id="subtract", id="multiply", id="divide".
User Story #4: My calculator should contain a clickable element containing a .(decimal point) symbol with a corresponding id="decimal".
User Story #5: My calculator should contain a clickable element with an id="clear".
User Story #6: My calculator should contain an element to display values with a corresponding id="display".
User Story #7: At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of display.
User Story #8: As I input numbers, I should be able to see my input in the element with the id of display.
User Story #9: In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit =, the correct result should be shown in the element with the id of display.
User Story #10: When inputting numbers, my calculator should not allow a number to begin with multiple zeros.
User Story #11: When the decimal element is clicked, a .should append to the currently displayed value; two .in one number should not be accepted.
User Story #12: I should be able to perform any operation (+, -, *, /) on numbers containing decimal points.
User Story #13: If 2 or more operators are entered consecutively, the operation performed should be the last operator entered.
User Story #14: Pressing an operator immediately following =should start a new calculation that operates on the result of the previous evaluation.
User Story #15: My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like 2 / 7with reasonable precision to at least 4 decimal places).
Note On Calculator Logic: It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug.
EXAMPLE: 3 + 5 x 6 - 2 / 4 =
Immediate Execution Logic: 11.5
Formula/Expression Logic: 32.5
You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Once you're done, submit the URL to your working project with all its tests passing.
Remember to use the Read-Search-Ask method if you get stuck.

The TO DO List
I am making a JQuery based to-do app as part of my Full Stack Developer course, it's going to have a pretty heavy focus on CSS styling, some animation, some effects and overall it's going to be a pretty polished application.It's responsive.
OPTIONAL Project: Patatap Clone
It's this simple but fun toy.
Using animation, an animation library, some graphics, some audio and audio library, a simple clone of the patatap app where you can hit keys on your keyboard and each key corresponds to a sound that is played and a little animation and it is just going to be simple.We're not going to have a bunch of different animations.

Every key has its own sound and when I hit a key the sound is played and we get a colored circle, every key has its own color and then the circles animate, basically shrink down.

In this project I will show you how I made a PATATAP clone web application, how I use two libraries paper JS & howlers JS and see what the process is like when I incorporate a library into my code.

I made this app by learning from an Awesome Udemy course by Colt Steele - The Web Developer Bootcamp, which I have you can see in full on this project.  
WEB Services API course with Udemy
API has nothing to do with beer??  !!
API stands for Application Programming Interface. see here
Devtools Pro: The Basics of Chrome Developer Tools
Intro to the backend
Node.js

So what is node......
I have the official Node.js's home page here.
- node.js is a javascript runtime built on Chromes V8 javascript engine 
- uses an event driven non-blocking IO model that makes it lightweight and efficient 
- NPM is the largest ecosystem of open source libraries in the world.

Up until a few years ago all the javascript that you wrote had to run in the browser.
It was the only place for you to execute javascript code and that meant that all javascript that you wrote was only front end code.You couldn't do anything server side because the only place that it could run is the browser.So that's what we've been doing up until this point.Writing our javascript in js files linking them through a script tag to an HTML file and opening that in the browser but that all changed a few years ago when a genius came along.

Node.js  is a way for us to write javascript code on the server side.

So what that means is that we can now write javascript everywhere.

see here
Introducing EXPRESS!!
WOOP! WOOP! creating my own routes, install express onto my node .. . . AWESOME!!!
I am very excited!! 
I feel very positive of late, I am thinking more like a coder day by day, I am breaking down things in my head, I see the first action took place and then the steps that followed - if I am explaining it right??? but I go back in my head as I can see the action and then the consequences ...  like a replay but I can point them out .. .

I am excited and look forward to the puzzles, lol.

I feel I am growing as a coder/designer and I see the changes in me and I am very excited!!


So I have completed the introduction to express as well as the intermediate express parts of the course "The Server side Frameworks" click here to see the journey was like. I created an express app, used express node.js, The package JSON

- setting up a post route 
- triggered by post requests to that particular route
- can send a post request with postman which works 
- send a request a post request using postman using a form.
- when sending a form we need to provide action and method
- what a post request is versus a get request.


So I am kinda starting to understand a little bit more , like  about the difference
between getting posts and what this action means and what routes are 

- used body parser which we had to install NPM install body parser
- required body parser
- take the request body and parse it into a javascript object that we can use and access

click here to see it on cloud 9
click here to see the files on GitHub

So this is the end of this section and I will be moving onto "Working with API'S", so I will see you there . . . . 
I started a smaller course just to cement the learning I have done so far with NODE 

Node. js training and fundamentals with Udemy academy
click here to see how I go on  .. 

Working with APIs the next part of my FULL stack developer course . . . 
So I am starting to work with APIs and it feels very exciting to learn - from what I know it will really open up the possibilities for what I can build, to make all sorts of amazing applications that use data from other applications or that rely on other applications.

It was very interesting to see how well known apps use other well known apps to create new apps that can do amazing things.

This was another roller coaster ride that was very eventful, click here to see the journey
YelpCamp: Basics
Yelp camp application this will be the final project I work on before I finish my Full Stack Web Developer Course, I have signed up for the advanced course as well... YIPPEE!!!

but by no means is this the end as there is quite a bit more to go . . . 
below is some of the highlights and you can see the full journey here.

I really enjoyed myself here, my confidence is growing and I was able to solve some issues without getting to frustrated, I feel I am growing as a developer and I am liking how it feels!!
Databases
WOW!! database, I feel quite excited about this part -  I know I say that a lot but I honestly get excited over the the new sections, the knowledge and skills I am utilizing.

I spent quite a bit of time on understanding the specifics because I wanted to make sure I had a good grasp of the concepts , so when you see the specific page for this, I do start the coding after all the drama of installing it . . .  . . 
so have a look here
So this was a really big ... . . 
I could understand it sometimes. . . . I searched . . .  I tired different things  . .. .
I just have to keep in mind how far I have come .. .  and I have come very far but sometimes, I forget and get frustrated and a little bit sad and doubt myself .. . Keeping the right MINDSET all the time can be really hard but I suppose if it were easy - we'd all be able to do it . . . . and that can be said for many things .. . .I always bounce back . ..  I know that but in the moment . . .  it can be difficult but I also have noticed how long it takes me to bounce back is getting shorter . . . So all in all another AWESOME section !!!

 . . . . . ....next  . . . .going to see how to add mongoose to
an express app and interact with the database inside of an express app . . . . 
YelpCamp: Data Persistence
I feel really good at the moment in regards to what I am working on and where I am at, I know with this section there were a few changes to Mongoose , quite a few errors some i manage to use my problem solving skills to fix and one major problem after exhausting all avenues, like  goggle, chat rooms etc I raised the issue with my tutor. To which of course i got the answer and resolved everything very quickly but it felt good when I resolved it myself and I felt it built up my confidence in coding and understanding the concepts. 

I do enjoy the process completely the ups and downs, the challenges the moments of being a coding-sherlock .. . 

NEXT :  RESTful Routing . . . .
So I have signed up to this course "Ultimate Web Designer & Developer Course: Build 23 Projects! with Udemy and Created by Brad HusseyCode College. The feedback/ reviews are awesome and the sections cover a wide range but it is everything I am interested in and want to explore and learn about. I know I have a few courses going but my thirst for knowledge and curisoity is growing and I feel as I am not completely immersed in the area and truly want to be . . . 

Some of the sections I know will cover things I have already learnt but I think it cements my knowledge and there are moments when new tidbits of information are recognized but also sometimes when there is a different perspective it can create "Aha!!" moments . . .. 

So let the journey commence . . . "Ultimate Web Designer & Developer Course: Build 23 Projects! with Udemy and Created by Brad Hussey, Code College.

So I am currently section 6 "Ultimate Web Designer & Developer Course: Build 23 Projects! with Udemy and Created by Brad Hussey- 43. Hello World: Create Your Very First Web Page! enjoying it, 

So far I have done graphic design , some links below ... 

I have created some awesome imagesand fine tuning some previous photography work I have done in the past . . . 

Tigress-by-DJSands ​​​​​​​





DJ Sanderson Padawan Web Designer and Creator
Published:

DJ Sanderson Padawan Web Designer and Creator

Published: