Final Project

Grade your project using the following criteria:

Functionality (20/20): My project is very functional. It will be used in the IP&T 334 & 444 classes as outlined in my learning contract and on the website’s welcome page. There is a natural and obvious progression from 1 page to another. The user can choose what pages to visit based on the tabs at the top. Data is input through the submit page and is uploaded to the specific subject page. When the data is submitted there is a personalized welcome message and a return Home button. It would be nice to someday make it so that the submitted projects are organized alphabetically on the subject pages. Just to enhance the organization. I like that the project is viewed through a URL so that users can explore each other’s websites and hopefully find more useful information. The HBLL suggested that we link their databases to our website too so that there are more resources available to users.
Screencast (8/8): See the attachment in Canvas
Usability (8/8): The flow of the product makes sense and is easy to use. The buttons at the top, change color when the mouse hovers over them. This makes it clear what is being selected. There is a return to home button after projects are submitted.
Aesthetics (4/4): I think it looks attractive and professional.
I learned a ton doing this project. I went from knowing absolutely nothing to being able to apply many HTML, CSS and PHP projects. I still have a lot to learn but I’d say this project is a 40/40 based on the above mentioned criteria.

Instructional Critique

A Critique of the instructional materials I used to learn my coding skills this semester:
Before this class I had zero experience with coding. I was extremely apprehensive and clueless. I knew I was going to need some basic, thorough explanations of processes and terms. I learned HTML, CSS and PHP.

To begin, I used Little Web Hut HTML & CSS Youtube Tutorials:.
I am a visual person and process things better if I can see it and see how it is applied. These tutorials were great! I would highly recommend them. It is a screen share video of someone narrating as they use a text editor like notebook++.
HTML: Video 1-Getting Started, Video 2-Text, Video 3-Images & Hyperlinks, Video 4-Audio & Video, Video 5-New Semantic Elements, Video 6-CSS Page Layout
CSS: Video 1-Applying Styles, Video 2-Selectors, Video 3-Box Model, Video 4-Positioning
Pros: There were 6 HTML and 4 CSS videos that broke down HTML & CSS into digestible parts.
In the videos, they show you and talk with you about terms like “Tag: ” and “Element:<br />” and then they show you how to use/apply them in your code.<br /> Their <a href="http://www.littlewebhut.com/">website</a> has reference and stylesheets for future reference and resource needs. After watching the videos I would go back and review. It was easy to navigate and find what I was looking for.<br /> <strong>Cons:</strong> I’m sure for people who have some experience the videos are too simple, but for beginners it’s perfect. </p> <p>I also used this <a href="http://materializecss.com/">website</a> as well as this <a href="https://www.youtube.com/watch?v=eOG90Q8EfRo">Youtube video</a> for CSS frameworks and tips on creating a responsive website. They were extremely helpful. I have learned that most coders don’t create their own CSS styling. They’ll often use already created codes and tweak it to their liking.</p> <p>I used 1 online book to learn PHP. It is called: Zend PHP 5 Certification Study Guide. I accessed it through BYU Library’s Safari Books online. I did not find this book to be as helpful as the video tutorials. I would not suggest this book for a brand-new beginner but I think it would be more helpful now that I have some knowledge of PHP. It seems more like a reference or as the title suggests study guide. Thus it is geared towards readers who have some PHP knowledge or experience.<br /> Pros: It starts out with some basics, like syntax, to help the reader get started.<br /> The content was well organized and the book was easy to navigate.<br /> The chapters were broken down by topic and each section was labeled well.<br /> They show the code and explain what it is<br /> Cons: I think the book assumes the reader has some context/scheme for PHP. For someone who had none it was hard to follow and understand.<br /> They do not show you how it all works together. Often I struggled to know how the PHP I was learning applied to my project.<br /> It was not explained in simple terms. I often did not understand what it was trying to show me. Here is an example of one of the sections from the book:<br /> “Standard Tags<br /> <?php ... code ?><br /> Standard tags are the de-facto opening and closing tags; they are the best solution for portability and backwards compatibility, because they are guaranteed to be available and cannot be disabled by changing PHP’s configuration file.”</p> <p>I liked these PHP for beginners Youtube videos by <a href="https://www.youtube.com/watch?v=aCQ1X68QRig&index=4&list=PLB62A1B486A575897">TeachMeComputer</a> better than the Zend PHP 5 online book. It is more geared for beginners.<br /> Pros: They start with the basics and show you how to get started by using a text editor and setting up MAMP, etc. That was nice because I would not have figured that out on my own.<br /> There are about 25 tutorials available that are about 5-10 minutes long. It’s just the right amount of time to get what you need and be able to quickly apply it. It is also easy to go back and review because each video is so specific.<br /> The videos teach you the principles and show you how to apply them. I liked to practice while I watched.<br /> Cons: Some people are bothered by the accent of the narrator.<br /> There are a lot of videos. This is a good thing but it can also be a lot if someone wants a broad overview.<br /> I would not recommend them for someone with a lot of experience. They may be too simple. </p> <p>Overall, I enjoyed the resources I used. There were times were I also referred to a <a href="http://php.net/manual/en/">PHP Manual </a> or W3 Schools. Those are helpful for beginners but are more for reference materials not tutorials. </p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/instructional-critique/" rel="bookmark"><time class="entry-date published" datetime="2016-04-11T16:20:23+00:00">April 11, 2016</time><time class="updated" datetime="2016-04-12T12:45:15+00:00">April 12, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/instructional-critique/#respond">Leave a comment<span class="screen-reader-text"> on Instructional Critique</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-64" class="post-64 post type-post status-publish format-standard hentry category-uncategorized"> <header class="entry-header"> <h2 class="entry-title"><a href="http://lauramcallister.com/uncategorized/step-10/" rel="bookmark">Step 10</a></h2> </header><!-- .entry-header --> <div class="entry-content"> <p>I totally forgot to turn in this week’s step on Saturday night. I did not do the reading outlined on my contract. I should have adjusted my learning contract step 10. Instead, I watched some more video tutorials regarding my project and worked on finishing my project. I finished my project and am ready to present it at seminar. </p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/step-10/" rel="bookmark"><time class="entry-date published" datetime="2016-04-04T22:38:34+00:00">April 4, 2016</time><time class="updated" datetime="2016-04-12T11:25:17+00:00">April 12, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/step-10/#respond">Leave a comment<span class="screen-reader-text"> on Step 10</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-53" class="post-53 post type-post status-publish format-standard hentry category-uncategorized"> <header class="entry-header"> <h2 class="entry-title"><a href="http://lauramcallister.com/uncategorized/step-9/" rel="bookmark">Step 9</a></h2> </header><!-- .entry-header --> <div class="entry-content"> <p>I created a Get function and an input page and was able to input on one page and it showed up on the next page! Additionally, I created a Post function and was able to do the same as the Get. But with Get it shows up in the browser and with post it does not. So exciting.<br /> I also created For Each Loops and While Loops. You can see all of this in the zipped websites folder I attached in Canvas. A For Loop will run as many times as you tell it to. A While Loop will run as long as something is true.<br /> Today I learned how to make a mysql database through byu domains. This is where data will be stored for our site.<br /> I would give myself a 10/10 because I was early, and effectively applied what I’ve been learning to my project. I also learned a lot of things. </p> <p>Notes:<br /> [ ] square brackets are for lists, arrays<br /> { } Curly brackets are to mark class, function, loop and control structure bodies.<br /> ( ) parenthesis are for functions </p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/step-9/" rel="bookmark"><time class="entry-date published" datetime="2016-03-22T10:49:31+00:00">March 22, 2016</time><time class="updated" datetime="2016-03-28T16:50:39+00:00">March 28, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/step-9/#respond">Leave a comment<span class="screen-reader-text"> on Step 9</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-47" class="post-47 post type-post status-publish format-standard hentry category-uncategorized"> <header class="entry-header"> <h2 class="entry-title"><a href="http://lauramcallister.com/uncategorized/step-8/" rel="bookmark">Step 8</a></h2> </header><!-- .entry-header --> <div class="entry-content"> <p>This week I read a chapter on files, streams, and networking programming and database programming. I followed my Learning Contract. I’m working to take what I’ve been learning with arrays and apply it to my project. Since a website of lists is what I’m trying to create. I would give myself a 9/10 because I did it on time and I’m reading and watching but still working to apply and figure it out. </p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/step-8/" rel="bookmark"><time class="entry-date published" datetime="2016-03-19T23:14:28+00:00">March 19, 2016</time><time class="updated" datetime="2016-03-19T23:23:42+00:00">March 19, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/step-8/#respond">Leave a comment<span class="screen-reader-text"> on Step 8</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-42" class="post-42 post type-post status-publish format-standard hentry category-uncategorized"> <header class="entry-header"> <h2 class="entry-title"><a href="http://lauramcallister.com/uncategorized/step-7/" rel="bookmark">Step 7</a></h2> </header><!-- .entry-header --> <div class="entry-content"> <p>I’m on time this week! I watched Youtube videos about Arrays. I read chapters on Arrays and Web Programming. The ebook made this bold statement, “Arrays are the undisputed kings of advanced data structures in PHP.” I can’t wait to figure them out and use them. I’m still a little bit confused by them.<br /> The Web Programming chapter addressed security issues. It specifically talked about cookies, caching, submitting a form with the GET method or the POST method. Submitting forms uses an array. It was helpful to see an application of an array.<br /> I tried out some arrays and read the chapters outlined in my Contract. See the attached zipped file in Canvas. I would give myself an 9/10 because I’ve done the work but I’m still unsure as to the application. I’m going to start including more notes on this page. I keep a google doc of notes too.</p> <p>Notes:<br /> /* Short Array Syntax<br /> $a = [10, 20, 30];<br /> $a = [‘a’ => 10, ‘b’ => 20, ‘cee’ => 30];<br /> $a = [5 => 1, 3 => 2, 1 => 3,];<br /> $a = [];*/</p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/step-7/" rel="bookmark"><time class="entry-date published" datetime="2016-03-13T06:42:11+00:00">March 13, 2016</time><time class="updated" datetime="2016-03-12T23:55:58+00:00">March 12, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/step-7/#respond">Leave a comment<span class="screen-reader-text"> on Step 7</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-32" class="post-32 post type-post status-publish format-standard hentry category-uncategorized"> <header class="entry-header"> <h2 class="entry-title"><a href="http://lauramcallister.com/uncategorized/step-6/" rel="bookmark">Step 6</a></h2> </header><!-- .entry-header --> <div class="entry-content"> <p>I watched a few Youtube videos on using single quotes, comments, concatenation, Math operators, If statements, Else and Elself statements. I read the chapters on strings and patterns. I am struggling to understand how this will apply to my webpage. I tried some of it out. I would give myself a 5/10 because it was late and I did not apply what I learned. The zipped file that I uploaded to Canvas contains some of the PHP I tried this week.</p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/step-6/" rel="bookmark"><time class="entry-date published" datetime="2016-03-10T17:42:40+00:00">March 10, 2016</time><time class="updated" datetime="2016-03-10T18:31:29+00:00">March 10, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/step-6/#respond">Leave a comment<span class="screen-reader-text"> on Step 6</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-29" class="post-29 post type-post status-publish format-standard hentry category-uncategorized"> <header class="entry-header"> <h2 class="entry-title"><a href="http://lauramcallister.com/uncategorized/step-5/" rel="bookmark">Step 5</a></h2> </header><!-- .entry-header --> <div class="entry-content"> <p>I have started reading Zend PHP 5 on Safari Books online. This week I read chapters 1 and 2. I have also been watching youtube videos about PHP. It’s a series of PHP for beginners: https://www.youtube.com/watch?v=kY5P9sZqFas&index=1&list=PLB62A1B486A575897<br /> I would give myself a 5/10 because I was late and I did not do anything to apply what I read/watched to my website. </p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/step-5/" rel="bookmark"><time class="entry-date published updated" datetime="2016-03-01T05:23:24+00:00">March 1, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/step-5/#respond">Leave a comment<span class="screen-reader-text"> on Step 5</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-23" class="post-23 post type-post status-publish format-standard hentry category-uncategorized"> <header class="entry-header"> <h2 class="entry-title"><a href="http://lauramcallister.com/uncategorized/step-4/" rel="bookmark">Step 4</a></h2> </header><!-- .entry-header --> <div class="entry-content"> <p>Here are my files:<br /> http://lauramcallister.com/560/Coding%20Class/</p> <p>This week I was supposed to continue working with CSS. I finished all of the Little Web Huts last week and so watched a different video instead. I learn better by watching and listening rather than just reading. Ben in our class also shared the sites: materializecss.com and bootstrap css to use in the future.<br /> I watched a <a href="https://www.youtube.com/watch?v=eOG90Q8EfRo" target="_blank">youtube video</a> on creating responsive websites with HTML and CSS.</p> <ul> I learned how to make a header with a picture and a navigation bar and a footer.<br /> I styled the background color and font colors.<br /> I styled with margins and padding.<br /> It is also a responsive site. </ul> <p>It was a lot of code and time, but I feel like I accomplished and learned so much!<br /> There were times when my code wasn’t working because I forgot a semi-colon or didn’t have the correct capitalizations. I am realizing how easy it is to forget something small like that and how it affects everything. Keeping your coding clean with indenting makes a big difference when double checking things. I am going to be changing the next steps on my learning contract to add php.</p> <p>I would give myself a 10/10.</p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/step-4/" rel="bookmark"><time class="entry-date published" datetime="2016-02-21T05:53:57+00:00">February 21, 2016</time><time class="updated" datetime="2016-02-21T05:58:00+00:00">February 21, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/step-4/#respond">Leave a comment<span class="screen-reader-text"> on Step 4</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-19" class="post-19 post type-post status-publish format-standard hentry category-uncategorized"> <header class="entry-header"> <h2 class="entry-title"><a href="http://lauramcallister.com/uncategorized/step-3/" rel="bookmark">Step 3</a></h2> </header><!-- .entry-header --> <div class="entry-content"> <p>Here are my files:<br /> http://lauramcallister.com/560/Coding%20Class/</p> <p>I watched all the CSS Tutorials from Little Web Hut and some others as outlined on my learning contract. We are working on styling our repository prototype. I learned how to change font type & style-bold,center,etc; padding, border, and margin areas. I also learned about using an external css stylesheet as well as imbedding in with HTML. Someone shared with me this website: http://materializecss.com/. I’d like to use this in the future for more styling. I would give myself a 10/10 because I followed my Learning Contract and applied it to my project.</p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="http://lauramcallister.com/uncategorized/step-3/" rel="bookmark"><time class="entry-date published" datetime="2016-02-13T19:47:11+00:00">February 13, 2016</time><time class="updated" datetime="2016-03-10T18:30:24+00:00">March 10, 2016</time></a></span><span class="comments-link"><a href="http://lauramcallister.com/uncategorized/step-3/#respond">Leave a comment<span class="screen-reader-text"> on Step 3</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <nav class="navigation pagination" role="navigation"> <h2 class="screen-reader-text">Posts navigation</h2> <div class="nav-links"><span class='page-numbers current'><span class="meta-nav screen-reader-text">Page </span>1</span> <a class='page-numbers' href='http://lauramcallister.com/category/uncategorized/page/2/'><span class="meta-nav screen-reader-text">Page </span>2</a> <a class="next page-numbers" href="http://lauramcallister.com/category/uncategorized/page/2/">Next page</a></div> </nav> </main><!-- .site-main --> </section><!-- .content-area --> </div><!-- .site-content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <a href="https://wordpress.org/">Proudly powered by WordPress</a> </div><!-- .site-info --> </footer><!-- .site-footer --> </div><!-- .site --> <img alt='css.php' src="http://lauramcallister.com/wp-content/plugins/cookies-for-comments/css.php?k=5a6afd01a58c496e7b7c633eca322431&o=i&t=1229329348" width='1' height='1' /><script type='text/javascript' src='http://lauramcallister.com/wp-content/themes/twentyfifteen/js/skip-link-focus-fix.js?ver=20141010'></script> <script type='text/javascript'> /* <![CDATA[ */ var screenReaderText = {"expand":"<span class=\"screen-reader-text\">expand child menu<\/span>","collapse":"<span class=\"screen-reader-text\">collapse child menu<\/span>"}; /* ]]> */ </script> <script type='text/javascript' src='http://lauramcallister.com/wp-content/themes/twentyfifteen/js/functions.js?ver=20150330'></script> <script type='text/javascript' src='http://lauramcallister.com/wp-includes/js/wp-embed.min.js?ver=4.4.1'></script> </body> </html>