Figma file link: https://www.figma.com/file/FJcVc6XNqXX26sgZyEzFYd/Streaming-Service?node-id=86%3A508&t=DIy3VcvhWarmpPAZ-1
Website link: https://dynamic-cajeta-2c2fd9.netlify.app/
Initial streaming service website "Square Eyes"
Here is my thought process and overall reasoning decisions I made throughout the process.
Landing page: I started with the landing page which is ofc the landing page. Did not need a lot of stuff here. a background image - which the design aspect and relevancy can be discussed - the logo and cta button below.
For the header I chose to stick with a smaller cropped version of the original logo (which by the way was very difficult to work with but I tried my best).
Although the design I initially made had the sign in button under the CTA button, I decided to place it on the right side of the header section, along with about link and a contact link. I tried to make the colour for the signup and sign in button different to indicate these are indeed different buttons, plus I couldn't make it the same colour because the headers colour was also red.
The challenge of this site was to make the hamburger menu which appears when the screen is 690px or below, to be in front of the logo. This was a really frustrating problem and one I was not able to solve unfortunately. but it seems to work fine in all other pages.
Login page: Unfortunately I did not manage to make the Sign Up page in time, I was too much hanged up on the browse page and product page that honestly i forgot, not that it would be difficult to make the form though.
The Login page or sign in page is pretty straight forward, you type in your email and password and press sign in, I should have made a forgot password link though... my bad. In the styling I got lazy and just imported the styles from the index because I didn't want to make the same header every time and take up unnecessary lines in the CSS page.
Browse Page: Maybe the most time consuming page. I decided to use a grid for this one. It was very confusing at first and I was overjoyed when I finally understood the grid and made it work.
I started with a main container that is split in 2 parts. One for the aside which is placed on the left and one for all the contents on the right.
On the main content section I wanted to make it another grid so I could have multiple columns to put my actual products. I chose to repeat 3 of the same columns ``continue watching", "newly added" and "trending" and in each of those we would have another grid that gives us 8 rows and contain individual items with background images. I must admit I was much more fund of using background image instead of img because I thought it would be easier to add stuff in front of the images such as the play button or product title. Since img tag is self closing it was not ideal for what i had planned, maybe I was wrong but thats how I decided to solve my challenge.
the challenge I was not able to solve however, was to make the chevrons to actually work, I wanted to search google for it but I was afraid that that would be considered "cheating"
In respect to responsiveness of the screen, I was able to make each product section scrollable but the dots that indicate what page you're in does not work.
Product Page: I wanted the user to be able to see all the information before deciding to play the movie. Now I know that the actual play button can be hard to find for people who don't think to hover the mouse over the product image but that was just a learning experiment I did, make the play button appear when hovering over the image and I was really excited to make it work.
To the right I added a section for movie trailers that in retroperspective is a bit unnecessary especially on small screens like 320px smartphones.
Contact and about page: Very simple and straightforward. The most challenging part was really the form of the contact page, not making it but making it appear and disappear without messing with everything in the page. In the end I once again returned to my goodest friend, grid. With grid you can simply put anything anywhere you want as long as you have an understanding of what part of your html code you need to imply grid.
conclusion: This was great practice, I learned tons of useful stuff here and I will most likely view these codes again and again when I'm stuck with something. I've discovered if you retrace your steps you can more often than not figure out what the problem is that seemingly doesn't make sense, although it does not make it less frustrating at the time.
If I could do it again I would definitely rethink my structure in html. The naming part of coding is truly hard. what name to give a container that contains another container that contains 5 sections and so on...
The design park of this website was not really ideal. I do like design but that does not mean I'm good at it.
All in all I hope I did something right at least and it was not all crappy code, because this was indeed made with <3 by me.