IPT 560 Project
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
Check what branch I am currently working on, create new branches & switch between branches
- Merge branches & resolve any conflicts that may arise
- Create clone files of an original/master file
- Fetch & Push any new changes
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.
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:
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.
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:
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.
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).
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.
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.
Below are images of the badges I received for completing the course and some screenshots from the course:
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.
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.
Going back to our database, we can see she has now been added to the system 🙂
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.
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.
On the subjects page we have included responsive containers that resize with the resizing of the browser.
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.