I had made my first portfolio last year. I shared my experiences here — My Experiences with Front-end Development. I was a little proud of having my creation out there, on the internet for the public to see. But, now I know that it was not a very successful website. I can’t even think why I made it so. At that time, I was excited and knew that this was the right way to show my work to the world. Experience taught me otherwise.

Old website — home page

By the middle of last year, I changed the design a bit. Removed the old home page and replaced it with the about me page. I felt that the information on the home page was redundant and unnecessary.

Modified home page

I did not receive much feedback, but over the last one year, I realized three major drawbacks about my website:

1. It was not responsive;

2. Very slow to download; and

3. All work pages were not easily accessible.

First, I lacked the knowledge and skills to make it responsive back then. I was just learning web design.

Second, being image-heavy website, with a lot of high quality images and animated GIFs. Some of the pages took way more than 3 seconds to load. I know, user experience was flushed down the toilet. What was I thinking?

Old website — work page

And third, like a novice, I employed parallax scrolling (to make my website look fancy) and set up my work page as a loooooong scroll. Each project took up the entire screen space. I wanted to show potential recruiters that I knew parallax design. So, if users wanted to see my work on a particular website, they would have to scroll through a long list until that project’s name came up. Any impatient user would get off my site here.

As I delved deeper into user experience and interface design, I realised that I don’t need to follow trends and employ fancy styling to highlight my work. I just need it to be accessible and neat. The neater it is the calmer the user is while going through the website. That became my focus. Hence, I decided to revamp my website using Bootstrap.

Learning Bootstrap was essential if I were to seriously think about becoming a front-end developer. It is by far the most popular responsive web interface framework till now.

I was introduced to freeCodeCamp through a blog that I had read. I did not linger for long in beginning my training. Since, I already knew HTML and CSS, I didn’t find it hard to begin. I breezed through the first section of freeCodeCamp that was HTML5 and CSS, also because I was eager to get on with Bootstrap.

Responsive design with Bootstrap wasn’t so intimidating as I had thought. I began my web development career designing and coding emails. If you didn’t know, email development requires writing inline CSS, primarily. You ought to use a lot of tables and rows and columns. Principle layout building with Bootstrap is the same. Ergo, I easily picked up the basics of Bootstrap web framework. By the way, the Bootstrap 4.1 is out now with additional updates and bug fixes.

Going through Bootstrap 4.0’s documentation gave me ideas for my new website. You can access Bootstrap 4.0 documentation at devdocs.io (and many others). I also found an interesting tutorial at scrimba.com. This is super cool for beginners.

Some interesting changes in Bootstrap 4.0 from its previous versions are as follows:

  1. New card components have been introduced. The card component provides a flexible and extensible content container with multiple variants and options. You can prepare card designs easily using classes such as card, card-img-top, card-body, card-title, card-text and such.
New website card styles

2. Flexbox powers the new card components. You can now design cards using flexbox grid system and its properties;

3. Improved media queries. For example: @media (min-width: 576px) and (max-width: 767.98px) { … } can be used as @include media-breakpoint-only(sm) { … }

4. Form classes have been modified. For example: .input-lg and .input-sm is now .form-control-lg and .form-control-sm, respectively. Check out more about the new classes here.

5. Shorthand responsive margin and padding utility classes have been introduced to place elements appropriately. You can simply write mb-3 to give a margin-bottom of 1rem or pt-4 to give a padding-top of 1.5 rem. Check out all the margin and padding utilities here.

Learn more about these new features at this auth0 blog on Bootstrap 4.0.

Learning Bootstrap and learning from my mistakes, I was able to make my new website in just two days using Bootstrap 4.0 framework (I just sat and worked really long hours). It works great on all devices and is far, far neater than my old website.

Please check it out here and feel free to give your feedback in the comment section, if any. Thanks for reading and let me know if you have any questions or comments.



Source link https://blog..io/my-new-website-cfe266f089cc?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here