Hi. I'm designing and building a portfolio page as a part of a challenge in freecodecamp.com. I thought to share the development of the same so that someone else can learn from it.
To start off, I decided to to use Bootstrap.css to build the webpage. This gave me an opportunity to learn and build a web page using Bootstrap .
I hope you already know about Bootstrap . What I know about Bootstrap is that, it is a just a code library that helps you to style a webpage very quickly. Using platform such as Bootstrap reduces the task of build a modern webpage and reduces the time and money required to build it.
Bootstrap libraries were originally built by Twitter engineers. They were using this platform internally , until they decided to make it open source so that people would get benefited.
To be frank , I do not know how to use the Bootstrap libraries. Even I do not know how they actually works. However I would take help of tutorials and example available to code my webpage. All the links will be posted here.
The web page must be clean and expressive. So I decided to have only three sections viz., About , Projects and Blog.
I started with making a navigation bar or menu bar at the top. When I started coding the navbar for the first time. Codes weren't working so well. So , once I was able to make it work, I quickly saved it as a template , so that I can use it to code any future webpage.
Once I completed the navbar basics. I did few tweaking to make it look good.
Tried with deeper colors. #333.
Finally I gave a shadow to the top menu bar.
Finally I coded the second , the third and the footer.
The beauty of Bootstrap is the ease of use and how simple it makes to develop a styled web page.
Just by attaching classes to a "div" block , you can modify it in various ways. For example to centre an image you only need to add a class named "center-block". That's it.
One more advantage of Bootstrap is that it makes your html components responsive. Responsive means that you can make an image or a paragraph to take it's own required shape with a change in the browser display size. What it means is that if you open your bootstrap webpage in a mobile, it can reduce the size of the image or even modify the whole page as you want it to.
But for that you have to define your requirement with the screen sizes .
For example if you watch my portfolio webpage in a mobile browser , the navbar changes it's shape.
There are different predefined components in Bootstrap . For example I used panels to make thubmnails. Even you can add cool icons into your webpage. Bootstrap uses glyphicons a library of icons that you can use in your webpage. For example I used three of them as a icon to show the links of facebook , github and blogspot.
The page now finally looks like this.
During this process I used plenty of external tutorials. I will write all the tools and tutorials by categorizing them.
Code :
1. Codepen
UI/UX inspiration :
1. Portfolio page inspiration - http://www.sitepoint.com/how-to-create-a-portfolio-site-that-will-get-you-hired/
2. http://ironsummitmedia.github.io/startbootstrap-freelancer/
Tool :
1. ColorZilla - A chrome extension to pick colors from the webpage.
2. coolors.co - A tool for color scheme geration.
Tutorials:
1. Navbar - http://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm
2. getbootstrap.com - Bootstrap libraries.
This project is still not fully ready for any website. But you are free to fork this.
Thanks
To start off, I decided to to use Bootstrap.css to build the webpage. This gave me an opportunity to learn and build a web page using Bootstrap .
I hope you already know about Bootstrap . What I know about Bootstrap is that, it is a just a code library that helps you to style a webpage very quickly. Using platform such as Bootstrap reduces the task of build a modern webpage and reduces the time and money required to build it.
Bootstrap libraries were originally built by Twitter engineers. They were using this platform internally , until they decided to make it open source so that people would get benefited.
To be frank , I do not know how to use the Bootstrap libraries. Even I do not know how they actually works. However I would take help of tutorials and example available to code my webpage. All the links will be posted here.
The web page must be clean and expressive. So I decided to have only three sections viz., About , Projects and Blog.
I started with making a navigation bar or menu bar at the top. When I started coding the navbar for the first time. Codes weren't working so well. So , once I was able to make it work, I quickly saved it as a template , so that I can use it to code any future webpage.
Once I completed the navbar basics. I did few tweaking to make it look good.
Tried with deeper colors. #333.
Finally I gave a shadow to the top menu bar.
Finally I coded the second , the third and the footer.
The beauty of Bootstrap is the ease of use and how simple it makes to develop a styled web page.
Just by attaching classes to a "div" block , you can modify it in various ways. For example to centre an image you only need to add a class named "center-block". That's it.
One more advantage of Bootstrap is that it makes your html components responsive. Responsive means that you can make an image or a paragraph to take it's own required shape with a change in the browser display size. What it means is that if you open your bootstrap webpage in a mobile, it can reduce the size of the image or even modify the whole page as you want it to.
But for that you have to define your requirement with the screen sizes .
For example if you watch my portfolio webpage in a mobile browser , the navbar changes it's shape.
There are different predefined components in Bootstrap . For example I used panels to make thubmnails. Even you can add cool icons into your webpage. Bootstrap uses glyphicons a library of icons that you can use in your webpage. For example I used three of them as a icon to show the links of facebook , github and blogspot.
The page now finally looks like this.
During this process I used plenty of external tutorials. I will write all the tools and tutorials by categorizing them.
Code :
1. Codepen
UI/UX inspiration :
1. Portfolio page inspiration - http://www.sitepoint.com/how-to-create-a-portfolio-site-that-will-get-you-hired/
2. http://ironsummitmedia.github.io/startbootstrap-freelancer/
Tool :
1. ColorZilla - A chrome extension to pick colors from the webpage.
2. coolors.co - A tool for color scheme geration.
Tutorials:
1. Navbar - http://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm
2. getbootstrap.com - Bootstrap libraries.
This project is still not fully ready for any website. But you are free to fork this.
Thanks
No comments
Post a Comment