I wanted to build a responsive web site from scratch to understand the methodologies and practices in depth. That is why I built this website, Barefoot in the Park. (Psssst! I also needed a portfolio website.)
I am not a web designer, so I aimed for a simplified look, and, eventually, I ended up being influenced by the wireframes that I drew up in Photoshop for the site. Hence the use of dashed lines.
I went for a structure that would work for all screen sizes, therefore I decided to code a fluidly changing behaviour according to the size of the screen. This resulted in more media queries than what I would use if I chose specific screen widths to cater for.
One of the main learning points was that there are quite a few gems in the basic inner workings of HTML and CSS that can be harnessed. ‘Back to basics!’ could just be the simplest and quickest way to achieve the responsive behaviour you are aiming for.
I have learnt about and used the following simple solutions:
px, em, and rem
Font sizing is a fundamental topic to get your head around when starting...
Avoiding using floats
Using inline-block grid and justify instead
Utilising built-in basic behaviour of HTML and CSS can give you a break...
Fluid, dynamic element height with padding-top trick
One of the main learning points of building this website was that there...