// Architecture & Design
Search Icon
Architecture & Design category
Portfolio category
Photography category
Travel category
Technology category
Music category
About & Contact category
Rebuilding Barn21: Resource List
If you've been keeping up with my Rebuilding Barn21 series, you will have seen the difficulties I came across in learning to code websites from scratch. It was a long and sometimes frustrating process to understand and apply the necessary skills, however, we got there in the end and I feel it was well worth the effort. The internet is a wonderful thing, and I almost exclusively learnt web design from free tutorials, youtube videos and helpful forums and guides. In fact, the only thing I paid for was the Adobe Creative Cloud suite, and that's not even necessary (although it does make things significantly easier). Due to my readership being design oriented, I assume some of you might be interested in creating a website for yourself. With this in mind, I have collected the majority of the resources I used in my project for you to explore. They range from general websites packed full of useful information to highly specific solutions to issues regarding particular elements. The article will work on an "I want to..." format, so the most efficient way to find a solution will be to run a search for it on the page. I hope these resources are useful, and enjoy the challenge of learning to code!
I want to learn the basics of HTML and CSS
I want to find examples of how to implement specific elements and desires
I want to find solutions to specific issues
I want to explore common screen sizes and break points for responsive website design
I want to see the difference between adaptive, responsive, liquid and static website design
I want to learn the basics of responsive web design (video)
I want to learn about and find web safe fonts
I want to align elements horizontally or vertically
I want specific code to centre text or elements horizontally and/or vertically
I want to put a simple lightbox on my website
I want to create responsive galleries with side by side images that maintain the same height
I want to create a slideshow/carousel
I want to use CSS to personalise my slideshow/carousel
I want to put a video on my website
I want to crop the window size of a video
I want to create a video of some text being hand written (video)
I want to put Google Maps on my website (video)
I want to get accurate GPS coordinates for Google Maps markers
I want to embed a pdf in a web page (video)
I want to put a Spotify element (playlist/play button) on my page
I want to create a footer that sticks to the bottom of the page or below the content
I want to create a hamburger menu for the mobile version of my website (video)
I want to put an icon next to my website name on browser tabs
I want to create a reading position indicator as the user scrolls down the page
I want to receive contact via email when people fill out and submit the contact form on my website (video)
I want a text box to automatically resize as text is added or deleted
I want to disable the enter key's "submit form" command in a form on my website