After spending such a long time oscillating around about the concept of Bootstrap, and how to use it for development, I finally made a major headway! I am quite thrilled and excited right now because the efforts paid off. I was able to develop this page within three days, coupled with the fact that I have a full-time cinema job as well. Every free second/minute/hour/day counts more than ever for me now. It is not uncommon to see me looking up hex codes while on my phone in my leisure time. The past 72 hours have been interesting, and engaging for me.
This whole project started by picking the specific project I wanted to do among all the options that I had before me. In all honesty, I thought this stuff would take me close to a week, but I was rather shocked to see how fast it was for me to finish up a page like this, using Bootstrap and some templates. I deployed my local stylesheet in this project as well, but the overall speed was quite impressive.
There isn't much to write in this post, other than to say that this prospect of Bootstrap can make you lazy as a developer. The best way to explain this is to liken it to driving, yet again. Bootstrap is automatic driving, and CSS grid and layout coupled together will make up manual driving. The next topic in my course is the CSS grid and layout, and this is the manual version of what Bootstrap does. I am looking forward to being able to get a good understanding of how to make my page responsive manually, without having to rely on Bootstrap.
This page is fully responsive and everything on it works just fine. Upon the completion of this project, I feel a bit hurt. It hurt because it took me a couple of days to deploy the Bootstrap itself, after spending close to two months of confusion on it. I still cannot believe it took that long to get a hang of it. But the good thing is the fact that it is all over. I am looking forward to the much more elaborate method of making my page responsive, which is the CSS grid and layout topic.
The last time I opened this draft was on the 25th of June, and as of then, thought I was done! All for me to test the mobile page, and it was sliding. I became restless because the page that I thought was responsive, was not responsive at all. My code broke at several points and I did not know how to go about it initially, and my first point of action was to search Google and to reach out to my tech community for help. I did all that I could do, but I couldn't find an immediate solution to my case. Everyone was busy with one thing or the other. Tech folks are always busy with tech anyway. It seemed to me like was going, and I couldn't afford to stay idle for a few days.
I decided to start the bootstrap course afresh with my second-course material from Dr Angela Yu. I took up a fresh project for the course, to learn and back to the ZTM course by Andrei to implement my knowledge. And of course, I immediately began to see certain points where I went wrong. One critical thing to know when using Bootstrap is the fact that you have to read through the documentation properly, and then follow the guidelines if it's going to work for you. But I did not take enough time to apply the instructions in the documentation. So, I was bound to run into several errors along the line, but bit by bit, I began to fix the bugs.
At some point in time, it occurred to me that I used different cases for my images in the text editor compared to what I had in the local folder on my PC. This single solution fixed all my broken images. Before this, only two images were displayed out of 15 image files in the same folder. It also occurred to me that the Navbar was faulty and wouldn't work, so I thought. But after learning from how Angela Yu's teaching on Navbar, I knew that my Navbar simply had to work. I went back to my old project and implemented the knowledge but it still did not work. It also occurred to me that I did not add the script link for the JavaScript above the body closure on my page for behavior. Upon doing this, my Navbar began to work fully and was fully responsive for both medium and small viewports.
I also had to change the class of all the columns from "col-sm-12 col-md-12 col-lg-12" to a simple one, "col". I had to change every column class back to this one, and I put the entire page inside a container to make it more compact. By all the steps above, one would expect that the page would have automatically become responsive right? But to my greatest shock yesterday, the page was still siding horizontally on mobile, which simply means that a page is not responsive whenever it is sliding horizontally on mobile. Thank God I have a tech sis on standby.
Esther eventually showed me the final piece of the puzzle. While developing the page, I wrote dimensions for all the images and they all had a standard size of 450px by 450px. This size is bigger than the 375px size of the mobile viewport. By default, a 375px viewport is smaller than the width of 450px. For the page to accommodate the size I specified, it has to slide! I had to check the bootstrap documentation to make images responsive, which is "img-fluid". I added this to the image class for every image file to make them responsive. I had to go back to my local stylesheet to delete the dimensions that I gave every single image on my stylesheet.
I went back to the page to refresh it, and there was it looking all beautiful and responsive! This was where I saw a painful demonstration of the local stylesheet overriding the bootstrap CSS.
It's been roughly 12 days on this project, and I am thankful to God that it is all over. It was a painful period for me personally because I clocked a personal record of 12 hours of programming in a day. I ended up going to bed by 2 am because I was sorting out my code, and I got up quite late for the day. But the good thing is that I've been able to learn valuable things from the whole experience, things that cannot be taken away from me anymore.
I will share the links to my pages here, the responsive and the non-responsive pages. I chose to leave the non-responsive page alone without deleting it; so that I won't forget the lessons I learnt.
I said I was going to post the broken code here as well, but I deleted it along the line. All I have right is the final project for the site, and here is the link to the page.Movie site project
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (1)
Good Job bro Keep Going 👍