Project Journal for Web Front-End Development

This is the work-in-progress journal for Web Front-End Development. The class portal is here. I will post the process I go through in researching, defining, experimenting, failing, and succeeding in my work.

Class portal milestone 1 9/2/2021

• The concept/theme of my portal.

• Visual design for my portal.

• How it will respond in different environments/devices.

• The structure and user interaction of my portal (how users will access different types of assignments).

These two pages of sketches above show how I want my portal to look on traditional devices like laptops or computers.

For the theme, I want to use the grey dark theme with a well-designed image as the background. The entire portal will keep a clean, tidy appearance, and not too much visual clutter.

There is a navigation bar containing all the linked tabs. The user can click on each of them to go to different sections. The logo and my name will be the link to the main page, users can get back to the main page on any section of the portal.

The labs and projects will be listed as post blocks in each tab. The user can view the brief images and little descriptions with keywords in each block. The details will be written inside the blocks.

This is my design for different environments or devices. The elements will list horizontally instead of spreading out on the page. The navigation bar will be hidden on the top left corner, and click to expand for viewing different section tabs. The back to the main page button will be set at the bottom of the navigation bar.

Class portal milestone 2 9/14/2021

• Documentation of the process I went through creating your portal.

• Iterations of my visual design.

• Describe problems or roadblocks you encountered and how I resolved them (or not)

• Sources I used in creating my portal.

• Lessons learned of what worked and what I'd do differently next time.

• A link to my portal.

Milestone 2 is the first big deal for me after taking this class. Html design was relatively new for me. I have spent a lot of time studying Codecademy to make sure I do not make big mistakes while finishing this milestone.

I do want to keep my portal in a dark theme. With the light gray as the text color. For the tab buttons and other section titles, I choose orange as the color when the mouse floating on them. I think this will become more eyecatching and easy to navigate.

Problems are mostly about Html bugs. It is hard for me to debug some of the potential issues when adding more content to the page. The Html community did help a lot. The common questions all can be found answers through the searching engines. One last bug was solved just now with the help of Aileen. Overall there were no huge roadblocks for me, but I do found myself learned a lot during every problem-solving.

The biggest source I used is Stackoverflow, the answers on there can cover most of my questions. And the other one is the markup validator. The validator did help me fixed a hidden bug that I constantly cannot figure out until the validator shows me the error type.

I think my web page structure can improve a lot in future lessons. Html pages should be linked more closely without creating duplicate content on different pages. Instead, I should make the relationships between more clear. Validator is always a great helper especially dealing with Html issues, use it more often will increase the efficiency so much.

My portal is here.

#lessons #classwork