Web Front-End Development Grad project journal

This is the work-in-progress journal for the Web Front-End Development Grad project. It is linked to the classed portal or here. I will post the process I go through in researching, defining, experimenting, failing, and succeeding in my Grad project works.

Grad project milestone 1 10/14/2021

• Description of my project

  • inspiration and goal

  • target audience

• A wireframe that shows the design and flow of my site. This could be a sample mockup or hand-drawn sketch. I can include multiple designs if I haven't yet decided.

• Content or sources needed for my project

Since systematically learning web front-end development, I start to realize how valuable or how difficult for a developer to grow into a full-stack developer. When I doing my research around project 1, I found a blog talking about a skills list that a full-stack developer needs to have (https://www.greycampus.com/blog/programming/full-stack-developer-guide). For me, I am also a gamer who plays video games a lot. In my eyes, this list is more like an RPG game skill list that needs the player's experience to get each skill. And interestingly, I think the full-stack developer's skill list also could be reconstructed into a tree-like list.

Therefore I have this idea, I may create a tree-like skill list and full-fill it with the skills a full-stack developer needs. The user can check each skill's details and references and also spot it for further skills.

The target audience will be the developers who want to improve their skills but do not have a great direction yet, or the developers like me trying to keep on trying to the road of a full-stack developer.

As shown above, the skills tree design will be mapped like an RPG game skill tree. The user could float the mouse on each skill for reading details and hyperlink to the resource page. All the image sources will be drawn by myself to fulfill the skill blocks.

At the moment, the source I can think of is I need jQuery for this project. I think more libraries may be thought to use in further research. I will arrange a meeting will Aileen to talk about this idea.

Grad project milestone 2 10/28/2021

An initial prototype or mockup of my project will provide an opportunity for early feedback from my target users.

• Partially functional prototype or mockup of the minimum viable product (MVP) for my site

• Mockups can be done using Adobe XD, invision, or any other tool you prefer.

• The user interaction and flow of my site must be either demonstrated in my prototype or described separately.

• The logic and algorithms for my project's functionality must either be evident in my prototype or described in pseudocode in my project journal.

My journal entries should include the following:

• Description of the minimum viable product (MVP) for my site

  • the minimal features and scope of my site needed to meet the goal of the site for my target users

• Document the process so far including iterations of my visual design and interactivity, problems or roadblocks I encountered, and how I resolved them (or not).

Above is the first version of my webpage mockup. It shows the basic visual design of the skill map I want to make. The user can hover the mouse on each skill icon for showing more details. And each skill will have dependencies from others to check it could be spotted or not.

This is the second version of the mockup. Showing when the user hovers the mouse on the skill icon, there will be detailed descriptions of this skill and a learning link to the tutorial page. Also, an RPG game-style learning condition is listed below.

This is the third version of the mockup, on the right bottom corner shows approximately how much effort needs to be put into this area for learning well. I need more time to design the icon for each skill and draw the image.

I will use jQuery as the library to make the animation, and for CSS selectors. I still need more research and studies around the CSS selectors part. This will take most of my time I think.

It is pretty hard for me the clear the logic behind this. I do want to make sure the dependency relationship is workable, I am looking at the knockout.js as the library for more information but I think I want to talk with Alieen for help with this part.

For the MVP part, I want to make the basic functions work in my mockup. Hover the icon and show the details about this skill with all the icons designed.