Design & Development

 

IPT 560 Project
Step Date Explanation Deliverable
1 1/30 Learn Git (2 hour course on Codecademy) green check Git certificate from Codecademy  green check
2 2/6 Create header for homepage using Materialize/Bootstrap HTML & CSS green check Homepage header green check
3 2/13 Create footer for homepage using Materialize/Bootstrap HTML & CSS green check Homepage footer green check
4 2/20 Create body content for homepage using Materialize/Bootstrap HTML & CSS green check Homepage body content green check
5 2/27 Learn JavaScript on Codecademy (Units 1-3) green check Link with back end green check
6 3/5 Learn JavaScript on Codecademy (Units 4-6) green check Link with back end green check
7 3/12 Learn JavaScript on Codecademy (Units 7-8) green check Link with back end green check
8 3/19 Create sign-up form green check Sign-up form green check
9 3/26 Create sign-in form green check Sign-in form green check
10 4/2 Refactor code green check Final website green check

Go to step –12345678910


 

Step 1 – Learn Git

I completed the Git course on Codecademy for my first step this week. Going in to the course, I didn’t really have a good understanding of what Git is even used for. Throughout the course I was able to learn how to effectively use Git in the following ways:

Basic Git Workflow

  • Initialize a new Git project
  • Understand the three areas: Working Directory, Staging Area & Repository
  • Check the status, add to the staging area & commit changes
  • See what changes have been made & print a log of all changes committed

How to Backtrack

  • Show the HEAD commit (or last change committed)
  • Restore the file how it was before the last change
  • Submit multiple files to the repository to commit changes
  • Reset the file changes back to a certain point and assign it as the new HEAD using the SHA

Git Branching

  • Check what branch I am currently working on, create new branches & switch between branches
  • Merge branches & resolve any conflicts that may arise

Git Teamwork

  • Create clone files of an original/master file
  • Fetch & Push any new changes

Git BadgesGit Badges 2

Ben & I also created a shared repository using GitHub where we can post and track changes


Step 2 – Create header using Materialize

This week I spent time getting familiar with Materialize so I can build the front end of the website. To be honest, there was a HUGE learning curve. However, once I invested the time (failing multiple times trying to accomplish my goals) I had a breakthrough with Materialize! I’m still not a pro at it, but I was able to figure out how to use the CSS file they supply and include the code for each of the components I chose to use in the design.

Although my goal for this week was to just do the header, I ended up providing a very rough idea for the footer and content. I need to meet with Ben to discuss the exact elements that will be included on the homepage and adjust accordingly. Also, I want to include a mobile-friendly drop down menu in the header, but looking at the website I realized I will need to know javascript to a certain extent to do that. Learning javascript is also part of my learning contract, so once I gain those skills I will go back and modify.

Learning Materialize was a lot of fun even though it drove me a little crazy at first. It is so user-friendly (once you trudge through that learning curve!), and they have so many ways to customize your project. Like I said, there will probably be many adjustments to be made in the future, but my website for now looks as follows:

Website as of Feb 6

The elements I included in the header were the name of the site, an icon for the student chat element we will be building this summer, an icon for a calendar so students can keep track of their assignments, and an icon for settings so students can modify their account. None of the links work for now because the website isn’t fully functioning, but those were the items I thought would be important on the nav bar.


Step 3 – Create footer using Materialize

Last week I spent time learning Materialize, and during that time I created the footer for the homepage. Although it was my Step 3, due this week, I finished it last week (same goes for my Step 4 for creating containers for page content, but there will be revisions made before I submit it). The actual content of the footer will be filled in when we tie the front end and back end together.

This is currently how the footer looks:
Website as of 13 Feb

Because I am ahead on the Materialize portion, I started on my JavaScript Codecademy course.


Design Blueprints

Ben & I created our design blueprints and shared them in Google docs. Click here to view.


Step 4 – Create page content for the homepage using Materialize

Completing the design blueprints with Ben earlier this week made it a little easier to adapt the layout of the homepage. We still don’t have all of the exact content we want, but in terms of setting up the page content with buttons, dividers, etc. we were able to design the layout we want. The landing page will be a place for visitors to get introduced to the website and what its purpose is. After the small bit of information, visitors will have the option to either Sign Up or Log In depending on their current status. The homepage is as follows:

Website as of Feb 20

We will be making templates for other pages over the next few weeks so that when you click on one of the buttons from the homepage, you can actually go somewhere.


Step 5 – Learn JavaScript on Codecademy (Units 1-3) & Link with back end

Ben and I spent time this week installing some programs I needed on my laptop and sharing the Git repository he has been working in. After a couple of failed attempts, a successful one, and then another failure for some reason, we have finally been able to access the Git repository on both of our computers and work separately. Being able to share a source file for this is a little harder, but we took a picture of both of our laptops with the repository pulled up! Success! It may not look like much, but a lot of work went into being able to link those properly (like me trying to understand this tutorial without Ben’s help).

linked backend

I will be working to update the HTML code so that the website will have a cleaner look and some styling to it. We will still be using Materialize to do so.

This week I also completed units 1-3 on Codecademy for the JavaScript course. Going over arrays in class was a great introduction for the piece on it in the course. Once again, the deliverables are a little harder to share because there aren’t source files from the course, so I have included screenshots of the badges I received.jsBadges1

jsBadges2

jsBadges3


Step 6 – Learn JavaScript on Codecademy (Units 4-6) & Link with back end

Ben and I continued working on formatting the website by updating the HTML. This week I have been working on the Subjects page. I was able to figure out (with Ben’s help) how to use the Cards from Materialize in the HTML file. Because the folder we have contains so many files for the back end, I am just including a screenshot here of the updates we have made. I still have formatting to figure out as the weeks progress, like how to have the cards populate in rows instead of just a single column, but for now, we are at this point.

Website as of Mar 5

 

I also completed units 4-6 on the Codecademy JavaScript course as shown by my badges below. I learned how to use ‘While’ loops, switch statements, and more about arrays and objects.

JS463

JS462

JS46


Step 7 – Learn JavaScript on Codecademy (Units 7-8)

This week I finished the JavaScript course on Codecademy and continued working on the formatting for the website. Receiving feedback during the peer critique this week in class was very helpful. Although the website is not fully functionally, and probably won’t be by the end of the semester in the complete sense of how we want to utilize it, both students who provided feedback brought up really great questions and/or points that I hadn’t considered. It was a good exercise to recognize what types of things we might be overlooking and what things just haven’t been developed or perfected yet.

Below are images of the badges I received for completing the course and some screenshots from the course:

jsBadges4

jsBadges5

jsBadges6

 

JS Course 3 JS course JS Course2

I will continue working on the website with Ben and figuring out how to get the layout we want. Revisiting my design blueprints this week was also a big help because it reminded me of the overall idea we are aiming for. Obviously they were not perfect nor fully developed, but we put in a good amount of time discussing the aspects that we want to include when we made them.


Step 8 – Create Sign Up Form

This week Ben & I worked on creating a sign up form for the website. On the homepage we will have two options: Sign Up & Log In. The page isn’t pretty yet, but it is functional as shown by the screenshots below.

This shows the database of users who have signed up with the site. As you can see, the last entry is my email address.

beforeOlga

On the website Olga then signed up for an account and received a confirmation message at the top of the screen saying the account was created.

olgaSignUp

Going back to our database, we can see she has now been added to the system 🙂

afterOlga

 


Step 9 – Create Log In Form

This week we created the log in form and continued formatting the website, figuring out things like modals and responsive layouts. I’ve included a screenshot of the homepage and, when you click on “Login”, the login page that appears.

splashPage

login

Within the next week we’ll make the whole site look more uniform and cohesive, making the cards similar.

Step 10 – Final Website

This week we’ve been working on getting all of the links functional and making sure we know the flow we want our users to experience. We have been figuring out what the pages should say, the information that should be presented, etc. Here is a very zoomed out version of what the splash page looks like with the updated information.

Website

On the subjects page we have included responsive containers that resize with the resizing of the browser.

subjects page

Given all of the information we currently have (in terms of subject information, resources, etc.), we are in a relatively good spot with the site for the end of the semester. We’ll continue tweaking and improving it.