Learning JavaScript
To expand on my skills of web development, I plan on taking on the challenge of learning a new programming language, JavaScript. The reason I want to learn JavaScript is to add more interactivity to my sites, as well as for when I choose to learn other skills that require, or at least with its help, know JavaScript, such as React.js and jQuery. In order to achieve my goal, I use different resource that I come across, such as MDN Web Docs and YouTube.
Once I feel that I have somewhat a grasp of the language, I will use what I have learned to build a site.
Reviewing the Basics Week 1
To begin my journey, I wanted to review what I already knew about javascript: the basics of the language. To review the fundamentals, I looked through MDN's JavaScript basics. Following MDN's guide, I reviewed the basics, and then used it to learn how to add features to a site. On top of using the basics, I also learned about some DOM API features, such as Web Storage API, for the features added to the site. The features added were adding an image changer and adding a personalized welcome message. Below is the code from what I have reviewed and learned:
Javascript Objects Week 2 and 3
On this week, continuing with MDN's JavaScript Guide, I moved on to javascript objects. However, before that I did an assessment from MDN Web Docs that tested my understanding of the basics of javascript by creating a javascript powered image gallery. While I do have a good grasp on the basics, it was a little different when it came to actually implementing it together to create the gallery, but I was able to do it. Here is the finish product:
And here is my javascript code:
After completing that assessment, I went on to javascript objects as I followed through MDN's Introducing JavaScript objects. I have not finished going through it but I was able to go through the basics of working with it, like creating an object, using and changing its properties, and using constructors. Below is the code showing what I learned:
The following week I continued to learn how to use javascript objects with object-oriented programming, using MDN's Object-oriented programming and Classes in JavaScript articles, and using the objects to work with JSON, using MDN's Working with JSON data article.
I was able to understand the concepts of class-based object-oriented programming in javascript as it is a concept that is also in C++, a programming language that I already have a basic understanding of. With objects-oriented programming, there are the concepts of classes and instances, which are like a blueprint for creating objects, inheritance, creating classes from existing classes, and encapsulation, dividing and putting together data and functions depending on its internal state.
I already had somewhat of an understanding of JSON, but there were still things I didn't know about it. JSON is a data format that follows the javascript syntax. To get a better grasp of it, I followed the example in the Working with JSON data article that uses their JSON data that is on their Github. This is the outcome and the html and javascript code:
Final Site: The Top Week 4
With what I learned about javascript, I felt that I could now make a site that incorporates what I already knew and what I recently learned.
For the site, I decided I wanted to create a news website called topnews that will display news from various news sources. The main focus when creating the site will be its design and the use of an API. The API that will be used is from News API. This returns live news, headlines, and blog articles from across the web.
Creating the Proof of Concept
The first thing I did was create a wireframe of the site to get a basic idea of how the pages would look like. I used Adobe XD to create the wireframe.
After several tweaks, this was the result of some of the pages:
The main pages will be the homepage, the pages for the articles, and the search results page. As well, I plan to make the design mobile friendly.
When you first open the site, you are open to a slider that shows the thumbnail of the 4 latest news from the API. As you scroll, you will see the 4 most recent articles for each category of news articles. This can be sports, business or entertainment. At the end of the page will be a footer, that will include the option to "sign up' for the newsletter of the site that would keep the user updated to the latest news.
The next pages will be for each category of news. In these pages it will be a list of the articles for whichever category is chosen.
The last page I plan to also do is a search results page that will show results for what you want to search for.
When an article is chosen, you are taken to the source of where the article is from.