P1xt’s Challenge One

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.

Bootstrap v4.0.0-alpha.6!!!!

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:

  1. Outdated
  2. Uses background url based images
  3. Extremely elaborate javascript (Check out this awesome website, tho!)

I knew there had to be something simple…Perhaps one or two lines of javascript for what we needed to do with these images. But it took me a long time to find it. This awesome website finally gave me the golden egg.

With that, I ran and implemented it successfully.

The embedded half column video itself was relatively easy to implement with the basic HTML5 video tag. However, I lost many hours trying to figure out how to add the effects that the original website had. I was not able to fully duplicate the effects. I had a hard time making the poster work as a cover (it wouldn’t let me hide the video controls, and I couldn’t operate it). Finally, I decided to use javascript to add an image, and then use click function to control the video, and endof from video tag to reactivate the image once the video ended. I was not satisfied since the original web was so smooth, and had full website effect of dimming.

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.

Thoughts:

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(!).

2. Javascript: I had good grips of what it could do in relation to calling to specific elements and applying effects. However, I couldn’t simply code most of it out of my head. I had to look things up and figure out what to do with them. The only major obstacle I faced was the parallax effect and that was because I did not know much about window/dom interfaces and what Javascript (vanilla or jQuery) can really do.

3. The Bootstrap4 is a very useful tool. However, it was my first time using nav bar features, and I was surprised to see that I could manipulate the nav button to remain fixed outside of its own div and create the slide-in via javascript.

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!