Trying to recreate Apple's homepage

Burooj — Tue, 29 Mar 2022 14:26:31 +0000

So in yesterday's lesson, we were tasked with picking a site that's just out of reach of our abilities.

but after staring at the page for more than 30mins, I asked for help, and Derek suggested trying to recreate apple.com

hoo-boy.

where do I even start?

When I finally sat down to tackle this, I stared at the site for a bit. Changed the size of the window, trying to feel the site out. feel out where the different parts of the sites are.

How I am to rebuild this smooth monstrosity.

eventually, I realized its way too much to think about and then just opened my code editor and built out a master layout shell that we had learnt while doing Uncle Bill's site

then I went at it one section at a time.

Header

this guy is the one I spent the most time with.
lotsa typing, all the icons for the images, finding the right apple icon, search icon, ~bag icon~

for whatever reason, Me from that time chose to use Ul/li to build the navigation bar. I think I might have seen that in the source code of apple's site.

but later I just realized using nav would have been much better.

because I had to turn it inline anyway and switch to block only on a smaller viewport.

HTML seems to take so little time at the end of the day. it's always the CSS that I find needs to be constantly worked on. maybe, with experience ill be able to fully visualize what the CSS is doing. currently, I'm able to do it at a very limited capacity.

I think I'm FINALLY intuiting the difference between padding and margin. so, yay for that.

landing

this was relatively simple. I did spend a while here as well, but mostly because I was trying to figure out how the whole section is a link, but also has links within to other places. I managed to figure out that you can in fact put a div inside an a, but that didn't really recreate it the way apple had done it.

some time was spent looking for images for the site.

making it so that it shrunk when it was smaller.

Apple's image changes when we shrink its site. I think I later realized they might be using @media to just switch the image?

this leads me into the coda section

apple's image here seems to be dynamic, it's the same image, that gets wide, and then when shrunk also has this bottom part that comes in.
I wasn't able to recreate it.
Derek mentioned that it is likely a background image, which I too suspected.
but I wasn't able to get it to work.

eventually, I decided to solve it by using two different images.

first, I thought I could have them be IMG tags and then switch them out with @media...OH.
but that only works with CSS? hmm.

I think what I eventually settled on was convoluted.
I had the wide image as an HTML tag, that has its opacity reduced to 0 when the viewport is shrunk.
and the background of this section (where the IMG tag lives) is the height-focused image.

as I type this I realized I could have used @media to do the same, and it would just switch out the background image.

Grid

when I got here I realized these are basically like the landing page sections, but smaller and share space.

so I ended up renaming some class names and named them all cards.
since they all shared the styling and structure within.

I hosted these divs within another list.

John's site too had it in this structure. and Derek had linked a site about early grid stuff.
I tried to look through them but wasn't able to really figure out what to do.
I was also getting really really tired.
so I decided to settle on inline-blocks.

_At least they look fine-ish on phone...
_

footer

I was at the end of my rope.
sleepy and tired. sad about my second road test failure because I didn't look over my shoulder and almost ran into another car (even though this never happens when I'm alone.... I suck at tests). and now trying to recreate apple's site. wanting to do it perfectly and sad that I can't because they are obviously using magic.

so I just copy-pasted the text into

s and styled it appropriately.

did some final touchings and called it a night.

The truth of Fact, The truth of Feeling

Burooj — Sun, 27 Mar 2022 01:21:42 +0000

So as im reading through Exhalations(see first weekly review) i come across the short story titled the title.

First of all, it’s a great story. Second its about Language and Cognition. so even better.

two things i’m really really into.

it feels like no one really talks about stuff related to it, like say, the first person internal experience of feeling the passage of time and aging.

No one talks about the experience of self when speaking different languages.I moved to Canada 6 years ago, and since then i’ve not gotten (or let myself) speak in other languages, i understand 2-3 more on top of english, and suck at speaking/writing them. (always been better at listening/reading over speaking/writing. idkwhy🤷)

but a week or so ago i spoke a few words in Urdu while driving in my car alone.

and it felt weird…

i felt like i was a different person in that moment.

that no one talks about that. i guess people take it for granted, or dont bother noticing it cause its not really practical. idk.

This story had something of that going on in it.

it deals with how cognition changes because of technology.

how the invention of writing affected oral cultures.

how the invention of AI-based Video recorded history changes your memories. reveals how fabricated your own sense of reality truly is. how we create narratives through reshaping pieces of our memories to support the current version of our self.

theres this moment in the book, where an individual from a writing culture starts teaching someone, an adult, writing,

and he had to explain what a word is,,

that reaaallly got me thinking about how this guy is weird for not knowing words when he is speaking them, not being able to notice what he is speaking.

but my brain chewed on it more and more and realized, to him all he is making is a smooth stream of sounds, not unlike music.

it also got me thinking about web design.

and how that in itself is language, a tool for communication.

where you have to setup pages to convey a certain feel,

transmit certain information, in a specific ways.

how me learning about how a web page works behind the scenes, and how i’m now able to glimpse the “words”, the “divs”.

I wonder how malleable cognition truly is. surely theres a cap, its evolved in a specific environment to do specific things.

I wonder about Musicians, or people who know music, and if they listen to music the way i listen to English, distinguishing distinct “words”.

I know after learning how to do counts for dancing, that im definitely able to distinguish the “beats” as different divs.

sigh…

the worst part is that even if i learn Music theory, my mind will change slowly, and adapt through the whole process. i wish i could just Know a whole language, so i can just compare and contrast the first person subjective experiences…

the qualia

Dictionary of Obscure Sorrows: Onism

imo this is what great scifi does, instills

Wonder and Awe.

DEV Community: Burooj