I have been trying to develop a responsive website for a while but I was very limited by time. Now I've got some spare time, I want to start developing again.
The website will be a simple personal website and will be used for many purposes such as for to provide contact details and for web design experiments.
My current planned website design for homepage is to have fullscreen background image and 3 or 4 navigation buttons in the center. I've done some research about it and I still can't come to a conclusion on where to start...
Should I start from complete scratch, learning codes off from the websites that I like? Or should I use platforms like Boilerplate? if so what would be the best platform to start?
I'd say start "prototyping" some different presentation styles using plain 'ol HTML and CSS based on your ideas.
Look up media queries to add to your CSS page. Media queries will style the content differently based on the width of the screen, so it'll change based on mobile, tablet, and widescreen sizes.
I create apps that work well in mobile phones and tablets by starting with Zurb Foundation. It already has the code for resizing page built in. However, it's a big plus to understand HTML, CSS and media queries first so you'll know how to tailor it to your needs.
You can you some Useful Tools to create web responsive layout. Example: Adobe Edge Inspect, RWD Calculator, Responsive Layouts, Responsively Wireframed vv...