Hill House

https://hillhouse.neocities.org/

Class Assignment Day 1

1. Figma link of work.

https://www.figma.com/design/AF0zy68vGe0OQ2SPxbcdJs/Untitled?node-id=0-1&t=fA6bXBacBkAg6hLW-1

2. Class Notes

https://docs.google.com/document/d/1im5wDUkX5PmeQH8zxMX15VA6LiVAuRPaA8VzcPzAhgo/edit?usp=sharing

class experience

It was very much fun yet overwhelming for me today. I explored a lot but at the end i guess my mind was blown with so many codes hahaha!!!

best part was the game.

class notes

DAY 3 - Informative Day

1. Made our own web page !!
2. I Completed the frog game with all levels Done :)

Class Notes Document

https://docs.google.com/document/d/1im5wDUkX5PmeQH8zxMX15VA6LiVAuRPaA8VzcPzAhgo/edit?usp=sharing

Story

Topic: THE PEN AND THE INKSTAND link ( i had a constrain that i have to code it myself ) : https://www.figma.com/design/GdYkTfWp37Gi5zrV53zpPy/Untitled?node-id=12-5&t=F6UiO6TsJbuuGLV9-1

some of the properties

Background-color Background-image Border Align-content Border-color Color Flex flex-flow align-self justify-content

There are more properties that I have discovered, but here are a few of them.

Day 4

I am really proud of myself!! "If you want to do something you can definitely do it no matter even if it goes wrong at first time, you'll get it next time."

Each step felt like an achievement :)

( i still need to figure out how to rotate image and and customize my own cursor (i want to add that but will try tomorrow again )

Class Notes

(Todays learning Notes Document) [https://docs.google.com/document/d/1im5wDUkX5PmeQH8zxMX15VA6LiVAuRPaA8VzcPzAhgo/edit?usp=sharing]

Website update ( added separate pages because it was a long page)

Tanya Mehra

Today was a tiring yet so much learning!

• My mind was filled with information that i was trying to process while coding my self but i guess again "practice makes the men perfect so that what the case is."
• I knew few things and i was processing it but it took me time to figure it out.
• I am not confident with it fully till now but i know with practice i will understand it more.

Class Notes:

https://docs.google.com/document/d/1im5wDUkX5PmeQH8zxMX15VA6LiVAuRPaA8VzcPzAhgo/edit?usp=sharing

ASSIGNMENT - created 2 designs and after doing this i felt like wow to my self!

1. Molded the design little bit.

2. Still in work (litt bit left):

Tanya Mehra | Day 7

Daily Notes

1. Indie Web: Non Corporate Website ( Personal )

2. Its principal

3. Talked about Owning your data

4. Hosting your Data, - Own Domain Name ( Eating Your Design) "Creating your home cooked meal" - NO DEPENDENSE (Become Self Sufficient)

5. Open Source : Everybody can look to it and is available to all.

6. Timeline: Every dot is interconnected and it's something depend on us how we want to organize it. "At the end it's about creating your own space in your own way".

7. From all the given links;

• Digital Gardening: Which i guess is the best way to explain it to anyone to why one should be on the web and how t is structured.
• It's like planting a seed now till it grows up and become more stronger with years.

8. I really like how people use their own space to organize them self and there interest, hobbies and even travelling. I mean it's like your very own a life tracker.

Work update

1. Brainstormed about what i want in my final project

2. Assignment ( Manifesto )

This is my space to create, learn, and grow, Here I share my work, ideas, and journey, unfiltered and always evolving. I want to curate my own space which will have my life showcase - written articles, My to do lists ( year/month/day) with the progress, My current happening - what i am doing right now, my work - both design and research, cafe hopping at it's review, also my hobby column ( I want to organize this in fun and interactive way)

I want to make it a WOW! for me and for anyone who looks at it and knows me can tell that Yaaaaaa its Tanya's space.(I will use text ,images and writeups along with illustrations - But Layout ill figure it out by tomorrow!

Answer to the BONUS Question:

I feel It's ovio that we have such small period of time so we can't just keep learning the application ( It's Something we'll do it by practice and time ) But at the end result When we are saying Immersive ( completely involved in something) Web Design It should feel like we have something of our own. and I am sure that i would really want to use this knowledge further professionally and as well as personally so that I can code my own work and publish it my self anytime.

( Brain storming Image)

Day 9 | Tanya Mehra

Heading toward the war of creating our own world LOL!!

1. Revised the Design principle, Design Components, Visual Hierarchy
2. Finalizing the layout of my Design
3. Created low fidelity and mid fidelity wireframes for my design.
4. I have figured out how and where i will position my illustrations and text.
5. I will figure out how to add effects that i have planned to do.
6. Idk but i guess the process of knowing what to keep where is also never ending while designing a page at times
7. Finalized page ( Landing page, Article page, Research page) Iteration of work: DocScanner 30-Jul-2025 4-08 pm.pdf

layout board current :

old layout - i dont like it!! :

Tanya Mehra | Day 10

It was a light day fill with designing work.

Git repo Link: : https://github.com/Tanyamehra14/Web2025-Tanya-Site/issues

Class Notes

1. Created variables
2. Worked on High Fidelity Layout
3. finalized page layouts
4. Set up git
5. Illustrated few things for the page
6. Analyzed how i will set content on page 1

Variable

:root { /* Colors / --color-primary-Pink: #ffbdbd;
--color-primary-Yellow: #FFF98A; --color-secondary-green: #b8ff97; --color-secondary-purple: #b697ff; --color-secondary-white: #ffff; --text-color: #0000; / Main text color / --background: #ffffff; / Page background */

/* Adding typography too */ --text-small: 20px; --text-normal: 24px; --text-large: 40px; --text-huge: 100px;

/* Fonts */ --font-main: 'New Times Roman', serif; --font-heading: 'New Times Roman', serif;

}

body { font-family: var(--font-main); font-size: var(--text-normal); color: var(--text-color); background: var(--background); }

h1 { font-size: var(--text-huge); }

h2 { font-size: var(--text-large); }

p { font-size: var(--text-normal); }

Buttons I have to make and add font style also!!

mood board

layout

Tanya Mehra | Day 11

Me after full day!!

Netlify Link: https://tanyamehra-website2025.netlify.app/

Today's goals and stuff finished:

• Part A
• Menu ( text )
• Menu ( Name Animation )
• illustration
• Main Text (with hover)
• Sub Text
• Scroll down Sticker - animation
• 2. Menu 2 Done (with hover)
• 3. Part 2
• text A
• Illsutation text A
• text B

Problems Faced

1. positioning image just above the text with no gap
2. How Capitalization of even 1 letter can effect the code :(

Screen shot of designed Aimed:

Todays Result:

Tanya Mehra | Day 12

https://tanyamehra-website2025.netlify.app/

Today's Learning

Today's goals and stuff finished:

• Add highlight to text.
• To do list Image 1 with a image 2 on top
• Added Image with heading text in main content
• ...know more about me ( with Hover )
• Articles Boxes with Read All Link
• Added animation at the end
• Made animation for home page

Tomorrow's goals and stuff finished:

• position articles boxes and animation together properly
• button of cafe , hobbies, yearly update
• footer
• start working on article page

Screen Shot

part 1:

part 2:

part3: