Wow! So this took me over 4 days to complete and at times had me totally confused at times on how to progress and achieve the layout and style I wanted. Many times I sat back and just thought to myself I was going to be stuck forever from that point forward.
So initially I started building this as a grid layout page but soon came to the conclusion that was the wrong direction to head and I had totally missed the mark.
Then upon trying to figure out flexbox I realised I didn’t actually understand how to use it whatsoever. So back I went through the lessons, scouring the net for resources and tutorials.
After countless tutorials and references back to FCC I had a little grasp of how flex box actually worked and how to manipulate simple layouts. I started building the page but again, I ran into a lack of understanding and ended up scrapping another two pens. So I went back to basics and spent time building small navigation bars and implementing images and using margins. I repeated the process until I felt comfortable enough to start implementing things.
Finally I started building my page and little did I know things were going to get really difficult. I broke the project into parts (header, text below, video, footer etc) and started finding that every section I came across was a total struggle. I’d end up trying to line something up or move something and having to refer back to the lessons to search the net continually. It was an absolute struggle but despite my negativity it was rewarding and interesting.
Landing page points
*building the header (this soaked up nearly 2 days, aligning my image to the left, padding and margins and flex alignments. Pretty much everything here
*utilising the unordered list to fit the way I wanted, just couldn’t get it to sit in a line or stack. I think this is the first time I had to really sit and read about display: inline vs block. still don’t fully understand it.
*totally messed up implementing the text box and spent a few hours wondering why my text started half way in the middle of the box (it was padding)
*flexbox in general, I didn’t understand how it worked and how to manipulate it or it’s properties
*the font awesome icons and how to change their size, still not sure how to do it from css so just did it inline
*how to implement the youtube video and sort the inline options to remove controls etc
*by this point I was more comfortable with flexbox and it’s layout for my product boxes but got totally stuck on how to vertically centre my select buttons. In the end I just padded them down in a horizontal line using the element above
*the footer, not so much building it but I had a weird 5px border all the way round the bottom of it, found out I needed to set margins to 0px in the html and body even if I was going to set them again after
*back to the header and sorting out its positioning for fixed and not destroying my page
*only discovered half way through classes can be duplicates to save lines in the css but id’s are singular. ended up going back through all my html and css to organise and slim it down
*totally ignored the tests at the start so had to rename a lot of my classes and id’s after
*flexbox does feel so alien anymore
*I’m getting the gist of more tags and attributes
*CSS was daunting to me initially but now doesn’t feel so bad
*page layouts feel more comfortable and I can think of simple layouts in my mind and bring them to the screen with better accuracy
*started to use chrome’s inspector to figure out what in the world was happening with my padding / margins / element. So useful!
In the end I left the page void of much colour and just added highlights as I don’t feel I could do it justice. I really need to get used to utilising complimenting colours and design styles but it isn’t something I too worried about at the moment as it will come with time.
Overall I’m quite happy with the page and it’s mostly turned out how I envisaged in my mind. Glad I stuck at it as it’s taught me a lot just purely from referring back to FCC and searching out on the net for answers to my problems. I thought about just filling in the page with placeholder text but decided writing up each section would motivate me to achieve what was in my mind. Generally, I tried to stay parallel to the layout of the example page but give it my own style and feel and not utilise additional elements I wouldn’t have come across yet as I find sticking the regime of the example page forces me to learn how to build things I could otherwise skip over and change out for something else.
Anyway, sorry for the long post and I welcome any feedback to help me improve.
on to the next one…