The first thing that I decided to do is to use Bootstrap 4 in my challenge. I wanted to learn the new features of the Bootstrap 4 while I work out the challenge at the same time.
The biggest regret that I have after all is done was that I chose not to use Sass. I should have. :(
I tackled the nav bar the first thing and mostly followed the tutorials from Bootstrap 4. The ‘fixed’ button of slide-in nav button was a challenge. I decided to just leave the button there alone for now and focused on making new sections of the body.
The next part was easier for me at first. Implementing full-screen looping video. The text? That’s where I got stuck. I had no idea how to overlay the text on top of the <video> tag.
I never liked using background url, as that has been very difficult to implement, and is not as reliable as using <img> and <video> tags. I am still not a hundred percent clear on the finer points of controlling these elements. It is to my understanding that I have to make the parent element (i.e. <div>) relatively positioned, and then child element (i.e. text) to be absolutely positioned so I can force it to be positioned inside the parent’s box by setting all to zero (top: 0, bottom:0, left: 0, right:0) I feel that there has to be a better way of dealing with these…
Regardless, that section was solved, I wanted to move on. The setting up container boxes for most of the website was relatively easy due to Bootstrap 4. However, the ‘scrolly’ effect of the picture stumped me for many hours. There were so many packages for the parallax effect. These information were mostly:
- Uses background url based images
Simple, lightweight Parallax Engine that reacts to the orientation of a smart devicematthew.wagerfield.com
Below is a JS Fiddle with some jQuery parallax code. Looking closer at the script: $('.vertical').css('top','+' + …www.outlier.com
With that, I ran and implemented it successfully.
While I was working on the various sections, I decided to fix the heights of each section. However, that seemed to be unnecessary at the end. For some reason, I felt that I had to control the heights and the overflows to have a full grasp of what CSS3’s effects were. The styling took a considerable amount of time, and I wondered if using a framework would have helped. I spent a considerable amount of time using GIMP to create images as I have learned that making images extremely uniform made it much easier to control and look much cleaner. As result, I modified the image sizes to conform to my designs. These helped considerably when I created the next section of the image gallery. The zooming effects were fun to implement. Not extremely challenging, but just fun to figure out how to control the boundaries, overflows, and how much zoom, and the time delay involved.
The next section where it’s called ‘herald’ was fun. I spent some time studying to see whether the original website used styling or images. It was different images. So, I spent what is probably ‘too much’ time on GIMP in creating three different ‘images’ of same photo. It had similar effect, and that was probably the only part of the whole website that I felt satisfied in successful duplication.
However, I’m pretty sure that this part could have been simplified to one function…
When I was finished, or as I thought when I resized the window. To my utter dismay, the fonts did not resize accordingly and caused major eyesore of boxes being out of alignment due to fonts being bigger than resized images. As result, a whole mess happened.
It took me another few hours to figure out that I needed to use media inquiry to resize fonts and customize the font sizes accordingly. I had never thought about these stuff until now.
1. It was evident to me that I am still weak with CSS styling. Even though I understand the basics of CSS, it still wrecks havoc on my styling when I do not understand the finer nuances of overlapping boxes, responsiveness when to use z-index, using absolute/relative/etc positioning, and font styling(!).
Suggestions and Recommendations:
This applies to me as well. Really strongly recommend that you go through tutorials provided by the Bootstrap to really get the full benefits. I also believe that taking time to go through jQuery’s documentation would be time well spent than losing several days trying to figure out how to do things on your own. Having code reviews also really helps, but that also means you should do some code reviews (even by just going to open source projects and read their code) as well to better understand what is a good practice and what is not.
Hope you have found some of this helpful!
By the way, if you haven’t read this blog, you should!