Weather Website
FRONT-END WEB DEVELOPMENT
As a student at Brigham Young University-Idaho, I worked as a TA and a Tutor for CIT 230 – Web Front End Development. This was an amazing opportunity to learn about this field of study. I gained so much more by helping other students than I ever did taking the class. For three semesters, I walked other students through creating a new website, the basics of HTML and CSS, integrating JavaScript, applying APIs and so much more. This is a preview of some of the things I learned and taught.
SITE PLAN & WIREFRAMES
Before work began on the website, we were required to create a site plan and wireframes. The plan includes target audience, site purpose, style guide, typography choices, layout, and wireframes.
HTML
This was the basis of the class and we used a premade template to create a weather-related website within certain expectations. Part of this process was learning basic design principles for layout. Another important aspect of the class was learning Mobile-First principles. Every page and layout had at least three sizes ranging from mobile phones to desktop computers.
JavaScript
JavaScript was used frequently throughout the course. I learned to use it for menus, maps and many other aspects of the website. The course was designed to give students the opportunity to troubleshoot problems and find solutions on their own. This meant that I had to work hard to understand how to make JavaScript work on the site.
APIs
A Major part of the class was using a Weather API through openweathermap.org This is a free service that allows you to pull real-time weather data onto your website. It’s a great experience to see the data come to life on your page
Forms
I learned the basics of creating forms, including client-side validation and form best-practices.
CSS3
Another important aspect of the class was learning new CSS additions. The Gallery page uses CSS Grid and there are several pages that use FLEX
Live Maps
Using JavaScript and the Google Map API and MapBox I implemented a live map for the different city pages.
JSON
Learning how to include JSON data as also a part of the class. For this section, all of the town information is supplied using a JSON Data file. The assignment was made more complex by including more data that was needed for the site. Students had to learn to use JavaScript to include only the relevant information for the page.
GitHub
Throughout the semester, I used GitHub as a host for the website. This gave me practice uploading files with Git and managing the site files.
This class and the time I spent tutoring for it was perhaps the best experience I gained while studying at BYU-Idaho. It was a challenging course and required that I give my full attention, but the payoff was equally great. To see my final project for the class, be sure to check out my post on Mountain Spoke.