Web Publishing
Brief
We will explore the structure of the Web in-depth and looks into the range of possibilities presented by its robust, flexible, and mature information architecture and visual communication options.
My Github Link: https://github.com/Hellomulan/Creative-Tech-2
Week1
Create a Webpage that would create visual texture or illustration using only text formatted with HTML.
Github Link：https://hellomulan.github.io/Creative-Tech-2/index.html
In this assignment, I got familiar with the basic framework and format of HTML, how to write headings and paragraphs, etc. I used an ASCII art generator to generate text images and put them into paragraphs. You can see my personal avatar and greetings by clicking on the link.
Week 2
Create 3 HTML pages. Each page should contain a link menu to enable navigation among them, with the live links pointing to other pages. Each of the three pages should contain a unique layout using CSS grid technique.
Github Link：NASA Page- https://hellomulan.github.io/Creative-Tech-2/week2/index.html
News Page- https://hellomulan.github.io/Creative-Tech-2/week2/index2.html
Food Page- https://hellomulan.github.io/Creative-Tech-2/week2/index3.html
_gif.gif)
In this assignment, I created three pages, mainly using CSS grid to render different layout pages. The themes of the three pages are NASA, News, and Food, and the three pages can jump to each other by clicking on the relevant text. On the NASA and News pages, you can click on the title links to jump to the original page. It was a little difficult to understand the CSS grid the first time, and I had problems with the images going out of borders and overlapping title text images when coding the three pages and then solving them one by one.
Week 3
Using responsive design create a page that has the same content, but completely changes the way it's presented depending on the device you use to view it. Colors, layout, typography, composition - all need to exist in at least three versions, but on the same page.
Github Link：https://hellomulan.github.io/Creative-Tech-2/week3/Homework/index.html
In this assignment, I made a responsive design with HTML+CSS. the content of this page is a mockup of the home page of my portfolio. I put a profile image that is a combination of a real image and ASCII Art. Navigation is set at the top of the page to indicate the category of my work and a "search" bar is added at the top right corner. In the video, you can click on the responsive to see how the page looks on different phone models or tablets.
Week 4
Create an image display gallery: 4 small thumbnail images in a row and a large section for an image display below. Clicking on any of the thumbnail images should display that image in a large section.
Github Link：https://hellomulan.github.io/Creative-Tech-2/week4/Homework2/index.html
In this assignment, I used JavaScript-The Document method getElementById() with HTML+CSS. The author of this gallery is Tanaka Tatsuya, who is from Japan. He has been creating daily miniature landscapes in the form of a calendar. You can click on each thumbnail image to see it larger.