ThatsCoolCool was started on November 8, 2015 and continuously changing with updates. Some updates are more visible than others. All the design and development on this website is all about my experience on learning web development and web design. This website is all about the Rocha family. I want to show in a timeline how ThatsCoolCool and my skills as of a website developer and website designer are evolving.
Timeline will show ThatsCoolCool from version 1.0 to current version version 2.1.12. I will provide thoughts through out the timeline.
Version 2.1.12 has been the version for almost 5 years. The only updates to the version 2.1.12 is the continues updates to Michael's Photo Gallery, Michael's Movie Gallery and School Life. Version 2.1.12 of ThatCoolCool started on November 1, 2020, and is the current version of ThatCoolCool.
Version 2.1.12 will continue adding photos and movies to Michael's Photo and Movie Gallery. A message has been added to the galleries to let the user know that they can click on Michael's photo of each month to view the photo gallery of that month. As well as clicking on the dvd of each month on Michael's Movie Gallery webpage to view the movie of that month.
Michael's photo gallery and movie gallery is up to date, 10 years 2 months. Get some popcorn and your favorite drink and enjoy 10 years and 2 months of photos and movies of Michael. Click here to start viewing the photo gallery or the movie gallery of Michael.
Michael's School Life. This section is all about Michael's work, activities and progress in school. Currently you can see Micheal's work from preschool, kindergarten, 1st grade, 2nd grade, 3rd grade, and 4th grade. I will continue updating 4th grade section throughout Michael's 4th grade year and beyond.
Version 2.1.11 of ThatCoolCool was started on February 12, 2018. Journey To A Career webpage section full length training has been updated and you can read what I learned in the last few months at the blind center and my graduation. Click here to visit Journey To A Career and read the article. It will give you an over view of my exciting trainings and trips that I took on 2017. I posted some pictures of my trips, Michael's toy box and my graduation. My journey to a career has given me and my family some difficult challenges but maybe there will be a new adventure end of this year 2018 that will make this journey worth it.
Journey To A Career webpage has been updated and it has a new section on the top of the webpage that is called "Skip To Section". This section lets you choose the section and takes you to that section. This is very helpful because there are multiply sections in this article. The newest section is "After Graduation". Click here to read the latest section of Journey To A Career. You will read about my experience working with the military.
I added a new section to my webpage that is called Randolph-Sheppard Act. Click here to visit Randolph-Sheppard Act webpage and learn about what Randolph-Sheppard Act is and how it has and it is helping blind people become a vendor, independent and support there families.
I have changed the look and feel of Michael's Photo Gallery. There are new features that will make the view of Michael's Photos a better experience. The color scheme and layout of the Michael's slideshows are different. There is a new loading image. The loading of the slideshows are much faster than before. When you hold down the robot on the top left corner of the screen for few seconds and than lift your finger, the robot will jump. The pictures fade in and out. The slideshow will auto resize if you go from portrait to landscape and go from different sizes of screen. There is a photo counter on the top left of the slideshow that lets you know how many pictures there are in the slideshow and on what picture you are in the slideshow. You can swipe to change the picture. You can tap on the slideshow to pause the slideshow and us the arrows on the screen or swipe through the pictures. There is a full screen button on the bottom right of the slideshow to make the slideshow fullscreen. This is particularly nice if you want to mirror your phone screen to your TV. This new concept started on Michael's 3rd Birthday Photo Gallery. Hope you like the new look, feel and features. Click here and select any month after Michael's 3rd Birthday to see the new update.
Michael's photo gallery and movie gallery is up to date, 3 Years 3 Months. Get some popcorn and your favorite drink and enjoy 3 years and 3 months of photos and movies of Michael. Click here to starting viewing the photo gallery or the movie gallery of Michael.
In the next version of ThatsCoolCool I will be continue updating Journey To A Career and Micheal's photos and videos monthly. I will be learning WordPress. WordPress is very popular and that is what companies and people are using to build websites and blogs. I will make a webpage and share what I learned on WordPress.
Version 2.1.10 of ThatCoolCool was started on September 2016 and was finished the middle of November 2016. This version was all about my loving wife. I build her website on ThatsCoolCool, click here to visit Kimberly's website. The website has pictures of her wieght loss, pictures that she has taken and pictures of her and Michael together. You will read about Kimberly's weight loss journey and about her being a mommy. You will learn about kimberly's rheumatoid arthritis (RA) and how she deals with rheumatoid arthritis (RA) in her daily life. Kimberly is very active in social media. You will be able to contact her through Facebook.
The version took me couple months becuase I implemented a new slide show style. I build Kimberly's slide show from stratch. There are many differences of Kimberly's slide show and slide show that I am using for Michael's photo gallery. This slide show fades in and out, Michael's slide show slides to the left. Kimberly's slide show has a photo counter on the top left. It lets you know how many photos there are in the slide show and on what photo you are on. Michael's slide show did not have that. This slide show has the ability to make the slide show full screen. Michael's slide show did not. Kimberly's slide show has touch and swipe ability. You can swipe to change the photo. You can tap the photo to have the slide show to stop and bring up the arrows for you to navigate the slide show manually. Michael's slide show did not have those options. I had problems adding thumbnails to Kimberly's slide show but I will work on that in the future.
Kimberly has lost almost 100 pounds and she is determined to loss more, click here to read her inspirational story about her journey to weight loss. There are pictures of her. You will see the amazing change in her.
You will read Kimberly's story about her daily dealing with rheumatoid arthritis (RA). Rheumatoid arthritis (RA) is a painful chronic inflammatory disorder that affects the joints. Click here to learn about rheumatoid arthritis (RA).
Kimberly loves her sons. Click here to see a slideshow of Kimberly with Michael. You will see and read why Kimberly is the best mommy.
Kimberly has a gallery in her website. Click here to see Kimberly's photo gallery. The slide show has some of kimberly's favorite photo that she has taken.
Click here to contact Kimberly. Kimberly is very social. She would love to here from you.
In the next version of ThatsCoolCool I will be making the section Journey To A Career under my wall on ThatsCoolCool its own page. I will be updating Journey To A Career frequently, about once a week. I will also be working on adding thumbnails to kimberly's slide show. I will continue learning more on Javascript and JQuery. After I get familier with this languages I will be able to make ThatCoolCool better.
This version was started on Auguest 2016. The newest update is my own wall page on ThatsCoolCool. Click here to visit my wall page. Also couple new sections were added to my son Michael's website his movie gallery and babybook. I created Michael's website to share with family and friends Michael's life. Many of our family and friends live far away and they are not able to enjoy seeing and interact with Michael. Through Michael's website they can see Michael grow up and see what Michael is doing these days. Michael's website has a photo gallery and movie gallery of each month of his life. Also has his baby book. Click here to visit Michael's website.
The movie gallery contains many hours of Michael. You will laugh and say uh a lot. You will have the opportunity to know Michael. You will not get enough of Michael. I will be updating the photo gallery and movie gallery every month.
The baby book has cool interesting information about Michael and thing that happened around the world that day. The baby book has cool features. By hitting the play button the pages turn automatically. You can pick the duration between the page turns. You can turn the page by the arrows on the keyboard or the buttons below the baby book or swiping the pages or clicking on the page. You have the option to skip to the end or the begining of the baby book. You can play the song "The Wheels On The Bus" by clicking on the green music button or can mute the music by clicking on the red music button.
The next thing I will be working on will be adding my wifes Kimberly's website. I will be learning more on Javascript and JQuery. Those are the two languages that I am currently interested in learning more about. After I get familier with this languages I will be able to make ThatCoolCool better.
This version was started on May 2016. In this version I added my son Michael's website. Is a website that currently has a photo gallery. The photo gallery has each of Michael's months of life. Click here to visit Michael's website.
In this version I started a website for my son Michael. Currently it has a photo gallery. In the next version of ThatsCoolCool I will be adding a movie gallery to Michael's website. I created Michael's website to share with family and friends Michael's life. Many of our family and friends live far away and they are not able to enjoy seeing and interact with Michael. Through Michael's website they can see Michael grow up and see what Michael is doing these days. Michael's website has a photo gallery of each month of his life. Click here to visit Michael's website.
Version 2.1.8 has taken me a long time because its my first time really getting into Javascript and JQuery language. The photo gallery built on JQuery language. The photo gallery I built was from scratch. There are many plugins that one can use to accomplish a photo gallery but that is no fun. I want to learn so I took the long way. I learned the basic of these languages. I will continue working with these languages because they are a big part of web development and web design.
The next thing I will be working on will be the movie gallery for Michael's website. The movie gallery will have a section for each of his months of life.
This version was started on April 6, 2016. In this version I added Dominic & Jeremiah's Wall Page. Is a page in memory of my twin boys. Click here to visit Dominics & Jeremiah wall page. The page contains messages, poem, and a short story. This version ended on May 2016.
In this version is the first time I used animation when a user scrolls the webpage. For example, when you scroll the webpage and you see the image that Tom Stearman created with the angle and two babys, you will see the image fade in. I have animated other images in different ways.
The next thing I will be working on will be a wall page for my other son Michael.
This version was started on February 13, 2016. In this version I added the Updates section. This section will provide you with the newest and historical updates and changes ThatsCoolCool has gone through. This version ended on April 5, 2016.
The images in the Updates section have a shadow to appear like the images is off the page. On the top of the page you can select a version link and it will put you right to the version that you selected section. On the bottom of every version section there is a link that says "Top Page". When you select this link it will take you to the top of the page.
In this version I have added a feature to ThatsCoolCool logo. When you hover over the logo the logo flips and shows an image that says "ThatsCoolCool Very Kool".
I have updated the submit button on the Submit Email Form to a 3D button appearance.
Version 2.1.5 was started the beginings of February 2016. In this version I updated ThatsCoolCool logo to actually look like a logo. The logo was designed and created by me.
I put the logo to the left of the container that way I could move the navigation menu to the right of ThatsCoolCool logo. The navigation menu buttons were updated to appear as actual buttons. The buttons have a 3D appearance and when you click on the button the button appears like it was pressed.
I added a shadow affect to the ThatsCoolCool homepage containers to appear that they are floating above the page.
On this version I learned the best way to get ThatsCoolCool rank high on web searches. I implemented the technique that I learned like creating a sitemap for ThatsCoolCool. Goggle and other search engines use the sitemap to give users specific search results. For example if users search for puppies, one of Googles search results would be josespuppies.thatscoolcool.com rather then just giving the result of thatscoolcool.com. Addition to creating the sitemap I added description tag, keywords tag, author name tag, and social media icons to the bottom of ThatsCoolCool that way users can find ThatsCoolCool easier.
I implemented the technique to only have one address to get to ThatsCoolCool homepage. For example you could of gotten to ThatsCoolCool homepage by typing the address of www.thatscoolcool.com, thatscoolcool.com or http://www.thatscoolcool.com etc. More clicks on one specific address as thatscoolcool.com will get a higher ranking in Googles search.
To increase the user experience I have added a webpage that lets you know when an error has occured or the page was not found. This seems unimportant but adding webpage like this give users not a lost feeling. Lets users know that they are still on ThatsCoolCool. Also gives users an opportunity to conitnue navigating ThatsCoolCool and not just get a blank page with a random errors.
In this version I updated the navigation menu on mobile devices to what people call hamburger menu. People call this menu a hamburger menu because the icon looks like a hamburger . The user will click on the hamburger icon to open up the navigation menu. When clicking the hamburger icon again it will close the navigation menu or by clicking one of the options. This icon is part of a font package from Font-Awesome. In the future I will incorporate more fonts from this package into ThatsCoolCool.
The footer was not shrinking correctly on mobile devices. That was fixed on this version.
I learned that in HTML5 there is new way to setup your code. I went back and added the necessary code. ThatsCoolCool will always follow the best practices.
This version was the first version that I validated the HTML and CSS code. I was surprised because there was only three simple errors. I fixed the errors right away. ThatsCoolCool is 100% validated.
After performing the neccessary and required work to make ThatsCoolCool perform to its best ability, the only thing left was to put ThatsCoolCool to the test. There are websites that rate your website for performance, speed and user experience in two catagories desktop and mobile. One and most import website that does this is Google. It is important to rate very high because it is one of the specifics how Google will rank you in their search. ThatsCoolCool rated 92% in User Experience and 100% in Speed in the mobile catagory. I got 92% in User Experience because the navigation buttons were to close together. I addressed that issue on this version 2.1.3 by adding the hamburger menu. After making the change ThatsCoolCool rated 100% in User Experience in the mobile catagory. ThatsCoolCool rated 100% in User Experience and Speed in the desktop catagory.
Security is one of the most important items to learn as a website owner. To keep ThatsCoolCool secure I have implemented the highest security I could for a basic webiste. Learning to keep ThatsCoolCool safe and secure will be a continues learning experience. Hackers are smart and technology contines advancing. Hackers perform new techniques with new technology to attach weaknesses in your security to get access to the information in the website.
After a month or so and learning more in depth. I was able to go back to my code and delete unnecessary code. Continuing on maintance, performance and speed I have implemented the following techniques. Added compression and minify the code. What this means is that the code and files are at the smallest size they can be. Why is this important because on mobile devices you will use less data and your favorite browser will take less time to display ThatsCoolCool.
On this version I started to get into maintaining and increasing the performance and speed of ThatsCoolCool. End users will never see the work that is done in the background to give the end user the best possible experience when using the website. Everyone wants the websites to be fast, secure and a nice looking. The end user is the most important and that is why the work that is done in the background is well worth the time.
I will put all my effort into learning and following the best practice techniques out there to make ThatsCoolCool a great professional, fast, secure, high performance, and my best to make ThatsCoolCool good looking website. The first step that I took to achieve these goals are to organization files and my code. In this version it was more learning the techniques and on version 2.1.2 I implemented the techniques.
In this version I addressed the issue that ThatsCoolCool had with mobile compatibility. I changed the structure of ThatsCoolCool to flex box structure. What this change did gave ThatsCoolCool the ability to shrink and stretch its material to fit any screen size. This flex box technique lets me change the layout of the webpage to fit mobile devices. If you view ThatsCoolCool on a computer monitor and a smartphone you will see a different layout of the website.
When you view the desktop view on a mobile device you can see that is hard to read the information because the information has to shrink down to a size were it fits on the mobile screen. On the mobile view you are able to read the information clearly because the information is proportioned to the size of the screen. This is why the flex box structure is import even though it does not give the website any additional material.
In version 2.0 ThatsCoolCool became a working website after many hours of learning. I feel that in this version I become more confident on what I was doing and I understood more of what I was learning. This section is a long section because I did not break down the versions like I should of but I did start breaking down the versions on version 2.1.1.
ThatsCoolCool was created in a block box structure. What this means is that the website did not support mobile devices. If you would view the website in a mobile device, you would had to zoom in to view the content because the content was very small. This issue is addressed on version 2.1.
In version 2.0 the color scheme changed little bit because I wanted the color scheme to be more a blue color and brighter blue. The background was changed to a brighter blue.
The logo was updated to be a navy color and have a shadow. When clicked on the logo it will take you back to ThatsCoolCool's homepage. The logo background is a gradient from a light blue to a dark blue. The actual logo for ThatsCoolCool was put into the website until version 2.1.5.
ThatsCoolCool navigation menu was changed to only be on top. However in the future when I get more material the navigation menu layout will change to be horizontal only or vertical and horizontal.
All the navigation menu buttons work. They will take you to other places of ThatsCoolCool. When the mouse pointer hovers over the button the button color changes to dark grey. Also the navigation menu button changes when it is active. For example when you are on the homepage the button will change to a light grey.
The main content of the homepage was created. Each box has a description of other webpages on ThatsCoolCool. All the links in the main content work. They will take you to other places of ThatsCoolCool. Also the footer of the website was created.
At this time there were 5 new sections added to ThatsCoolCool. There was Aniridia, Puppies, Contact, About and Sign Up until version 2.1.6. On version 2.1.6 the ThatsCoolCool updates page was added.
The section of Aniridia was created because I have Aniridia and I wanted to learn more about the eye condition and also give a better explanation to my friends and family.
The section of Aniridia was the most difficult for me because it was the first time that I was editing images. The difficult part was aligning and centering the images how I wanted them to show on all screens. There are TVs, computer monitors, tablets, smart phones, and anything in between. The challenge was learning to get the images to shrink and position themselves correctly. After many hours of learning and some trail and error I was able to get a grasp of the concept.
The Aniridia section has seven sections. The first section speaks about why Aniridia is important to me. The next 5 sections speak about the structure of the eye and the eye condition Aniridia. In this section is were there are three images of the eye and an eye with Aniridia.
The last section is the Reference section. The cool thing about each reference is that you can click on the reference and it will take you to the spot in the article that I wrote were I referenced that reference. It works vice versa were the paragraph, sentence or image has a link that will take you directly to the reference in the reference section.
The pupppies section takes you to Jose's Puppies website. This website is actually my first complete website that I made. This website I made was for my friend Jose. He has couple cute puppies that he let me use as my first attempt to build my first website.
Looking back there are many mistakes that I did that are visible and some that are in the code but I am going to leave that website as it is. I want to preserve its history and look back and see from that time and now how much I have learned.
Jose's Puppies website has a logo, navigation menu, main content, and footer. The navigation menu has four sections Home, Gallery, Contact and About. The main content has pictures of Jose's puppies and desciption of the pictures. The Gallery section has more pictures of Jose's puppies Rocky and David. The Content section has Jose's content information for his Facebook and Youtube. The About section speaks about my friend Jose and Jose's puppies Rocky and David. The footer was created and it says copyright 2015.
The Contact section has my information as of email, Facebook, and LinkedIn. Also has Thatscoolcool's Facebook and Youtube information.
The About section speaks about ThatsCoolCool and myself.
The Sign Up section is where you can submit your email and get email notifications when ThatsCoolCool gets updated. This form is the first form I build. This form was build with three different computer languages HTML5, CSS3, and PHP. This was the first time using three languages at the same time.
The form has four fields First Name, Last Name, Email, and Comments. The fields have some nice features, the fields have an asterix * next to them to show that the information is required. The first field which is First Name has the cursor already in it that way you can start typing without needing to click in the field. Each field has a suggestion of the information that needs to be typed in. That suggestion disappears when you start typing in the field. The form has a validation process when you do not type anything in the required fields it will let you know that you need to type something in the field. Also when you type in an email that does not have the format of an email it will let you know that the email address is not correct.
The submit button is a standred submit button. The submit button did get a update in Version 2.1.6
Version 1.0 started on November 8, 2015. The first layout of ThatsCoolCool was a vertical navigation menu on the right side of the webpage and a horizontal navigation menu on top below the name of the website. At the time I thought that I was going to need all that room for menus. Came to realize I do not need that much room for menus at this time. That is the reason that I changed the layout and went directly to version 2.0.
