DEV Community

Cover image for My first non-responsive page
Doyen Àlùkò
Doyen Àlùkò

Posted on

My first non-responsive page

I've been off the grid on this blog, but I've got to get going again. It happened that I had such a major saga with this fever all through April and a good part of May. It was a back-and-forth thing and I was literally unable to sit down with programming successfully for almost two months! But for every tunnel, there's got to be a light at its end right? A major break came at the tail end of May, and I was able to complete the project that I was working on before the illness. It wasn't an uphill task but a call to duty for me.
I have to explain what it means for a page to be non-responsive for the sake of those who aren't into tech. A non-responsive page in the simplest of terms is one that won't display effectively on all devices. For example, I developed this page on my PC, and the screen orientation for an average PC is landscape mode. As a result, every single thing on this page will function normally, but it won't work well on other devices because the page was not built to respond to other devices but a PC and the landscape mode on devices. I have tried to load the page on my phone, which is on portrait mode by default but it did not respond well, but the response was better when I rotated my screen to the landscape mode.
This is what it means for a page to be responsive anyway. But pages have to fit into all viewports on the several devices available, don't they? A viewport is simply the screen of your device, no matter the kind of device you use. I am currently learning how to make my page responsive, and the first point of action in this course is the Bootstrap session. I am relatively new to the prospect of using Bootstrap to make my pages responsive, but I am learning bit by bit.
I remember how I was immediately stranded when I started the module. I kept missing the simplest stuff about the Bootstrap section. All I had to do to get started was either to copy the CSS code for the Bootstrap directly from the website and then add it to my project on my text editor or to download the CSS/JS file from the Bootstrap website, copy the code and add it to the text editor as well. I learnt the value of having shoulders to lean on from this saga. Thank God for having a tech-sis like Esther.
Please do not attempt to go through the race of life alone, no man is ever an island. I strongly believe that God created humans for positive and productive interactions. I had to go on a mini adventure with her on this particular day and I showed her what I was facing. All she did was give me a few tips on how to get an external explanatory video on YouTube, which I did. What seemed to be an immovable mountain for a while turned out to be the simplest stuff ever! It does pay to have wise counsel around you in life.
This is the progress so far anyway, I am currently unravelling the mystery of using Bootstrap to build a responsive page. I will also put up the link to the non-responsive page that I built below;

https://doyinaluko.github.io/intermediatecss/

Top comments (0)