Pinterest

https://www.pinterest.com

Immersive Web Design - Assignment 1

1. Class Learning’s:

The first question we were asked was what do we imagine a website looks like… Website as a Tree I’ve come to see a website much like a tree. The homepage acts as the trunk — the central structure, the face of it all. From there, links and buttons branch out like limbs and leaves, guiding visitors to different areas and experiences. Just as a tree needs daily care and nurturing to grow from a sapling into something strong and full of life, a website too requires consistent attention, updates, and creativity to thrive. This metaphor helps me connect with the process more personally and organically.

Class Notes – Day 1 Reflection The first class gave me a new sense of confidence — helping me view the web and websites not as intimidating networks of code, but as creative, personal spaces. Coming from a commerce background and now venturing into design, the idea of working with code felt daunting at first. But the way the class unfolded made it approachable, step by step, one day at a time.

What surprised me most was discovering that the internet can be a platform for self-expression. Until now, I always saw websites as formal, impersonal entities. That perspective shifted entirely. Now, I see them as living canvases — spaces that can reflect individuality, creativity, and personal voice.

This was truly a “learning by unlearning” experience — letting go of preconceived notions and opening up to new ways of seeing and creating. It was exciting, and I’m looking forward to what comes next.

2. Screenshot:

3. Link:

https://drive.google.com/drive/folders/1V67coSYMVKB6DoQaSTKxQ8TpYYrbqU-Y

Day 2 - Me with the Codes

Being new to these concepts, games like these really help me understand the topics in a more enjoyable and engaging way. Today felt satisfying because I was actually able to grasp the language. I also explored new websites that could support my learning and make understanding code easier. However, I do feel that I still have a long way to go before I become fully comfortable with this aspect of design.

Day 3

Class Notes: Learned a lot of new terms:

1. Flex
2. Justified-Content
3. Alignment And these learnings happened in a very subtle and a fun way. I always appreciate learning through doing. Reading helps a lot but when we actually sit to do things ourselves it gives an opportunity to try new things, these trials might fail but every trail is a lesson in itself. The part of the class where we styled a web page along with the professor gave a different kind of excitement towards coding and actually seeing results on the screen. Looking forward to more such activities.

Basic Design Layout: The following is a basic step by step process i have done to get a layout for the story web page:

1. The first rough idea-

2. Second development-

3. Third idea development-

Further to this I will try to develop a code that gives the best possible execution to this design.

Day 4

Another day of learning something new. With constant urge to experiment the class is becoming more exciting for me. I have started to write codes, the understanding is better than what i started with. I am trying to code at my best potential to execute the design. I really hope i end up with a good code log and a satisfying design output.

Day 7

Notes: To have your own space where you represent yourself. It can be for yourself or for others to see. The idea of connecting the metaphor of a garden and a website, where both of the things are to be watered regularly. And these sites can be about a particular topic of interest or a bunch of things mix and matched for showing the entire eco-system of yourself as a person. Entering different phases of this process which includes: Collecting data Defining that Defining the audience Execution

Manifesto: As a first timer who is trying to represent herself on a bigger space, i want this website to reflect my personality through words as well as the complete outlook. But before the words or the content could speak i want the layout to speak to the audience. I am aiming to make this for others to see me as a person, maybe enjoy and join my interest areas, get some ideas for themselves or maybe to know what they should not be. The website will have two sides of me which will be first completely personal and second which is my professional side. Things this website might include: Bonus: I am making this with an aim to represent myself with a whole new setup and doing this through something which I created (the website). This website might speak about my learnings and give everyone a summary of my learning curve as a whole. Out of professional uses i want to website to speak for me. Because if I achieve this goal of mine of executing my idea then it will be my way to telling that i can be more than a designer.

Day 9

Notes:

1. Arranging elements in the layout
2. finalising on the specifications like font size, colour palettes.

Repo Issue link:

https://github.com/vanshi021/web2025-vanshika-site/issues

Variables:

:root {
 /* Colors /
 --color-primary: #F6F8F3; / Home page background /
 --color-secondary: #DBC5B2; / image bg colour / --color-secondary: #FFFEFF; / button text colour / --color-secondary: #D8A39A; / button Bg colour / --color-secondary: #718DAE; / Menu bar text*/
 --text-heading: #787878; /* Heading text color /
 --text-menu: #787878; / menu-footer text */



/* Typography /
 --text-title: 60px; / heading /
 --text-title2: 35px; / heading 2 /
 --text-content: 18px; / content /
 --text-aboutme: 20px; / menu-footer */



/* Fonts */
 --font-heading: ‘playfair display’ ;
 --font-content: 'nunito regular' ; --font-menu: ‘nunito regular’ ; --font-footer: ‘nunito regular’ ;
 }

Example

Layout Draft

Day-11 The journey of making something of my own (Day 1-coding begins)

Link to my website: https://vanshikasite.netlify.app/

The list of tasks for me today were:

1. Looking at the color palate if what I decided was actually good. Taking others' feedback on it.
2. writing the basic content for the website that could actually get me going. I choose to do this first as one I wanted to make my basic structure with the actually information and not Lorem Ipsum, second with the actual content i will be able to set the spacing right along with other elements.
3. I am going ahead with vanilla HTML CSS as with all the learnings until now it will be easier for me to understand and navigate through the codes. (Day-1 went well. I was able to execute my design a bit. With time I guess I am able to understand the terminologies - Touch wood. I really hope I continue this process with equal enthusiasm.)

The list of tasks for me for day-2 are:

1. add all other elements on the homepage.
2. place and space them properly just like my design layout
3. style this page properly in way that I don't have to visit again (I will try)

day 12- this the day 2 of making something of my own

Today I almost completed the homepage setup. The buttons are working and I linked the AboutMe page to the homepage. my yesterday's to-do list is complete. Now after this I will work on the AboutMe page which also I have started. Earlier I did not link my codes to the github hence I wasn't able to keep a record of all the changes I made. But thanks to Aman sir I did that as well.

link to my website:

https://vanshika-site.netlify.app/

link to github repo:

https://github.com/vanshi021/vanshika-site

As day 3 I am trying to setup the AboutMe page. Bring my design to the internet.