BARN21
// Architecture & Design
Search Icon
Architecture & Design category
ARCHITECTURE
& DESIGN
Portfolio category
PORTFOLIO
Photography category
PHOTOGRAPHY
Travel category
TRAVEL
Technology category
TECHNOLOGY
Music category
MUSIC
About & Contact category
ABOUT & CONTACT
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
http://html.net/tutorials/html5/
I want to find examples of how to implement specific elements and desires
https://www.w3schools.com/
I want to find solutions to specific issues
https://stackoverflow.com/questions
I want to explore common screen sizes and break points for responsive website design
http://www.websitedimensions.com/
I want to see the difference between adaptive, responsive, liquid and static website design
http://www.liquidapsive.com/
I want to learn the basics of responsive web design (video)
https://www.youtube.com/watch?v=4myJUbmMC4M
I want to learn about and find web safe fonts
https://www.lifewire.com/web-safe-fonts-3467430
I want to align elements horizontally or vertically
https://www.w3schools.com/css/css_align.asp
I want specific code to centre text or elements horizontally and/or vertically
http://howtocenterincss.com/
I want to put a simple lightbox on my website
http://lokeshdhakar.com/projects/lightbox2/
I want to create responsive galleries with side by side images that maintain the same height
https://codepen.io/blimpage/details/obWdgp
I want to create a slideshow/carousel
https://www.w3schools.com/howto/howto_js_slideshow.asp
I want to use CSS to personalise my slideshow/carousel
https://www.w3schools.com/w3css/w3css_slideshow.asp
I want to put a video on my website
https://www.w3schools.com/html/html5_video.asp
I want to crop the window size of a video
http://www.mp3care.com/crop-video.aspx
I want to create a video of some text being hand written (video)
https://www.youtube.com/watch?v=d7ObmR8qgmo
I want to put Google Maps on my website (video)
https://www.youtube.com/watch?v=Zxf1mnP5zcw
I want to get accurate GPS coordinates for Google Maps markers
https://www.gps-coordinates.net/
I want to embed a pdf in a web page (video)
https://www.youtube.com/watch?v=b5Vdy4_xWVU
I want to put a Spotify element (playlist/play button) on my page
https://developer.spotify.com/documentation/widgets/generate/play-button/
I want to create a footer that sticks to the bottom of the page or below the content
https://css-tricks.com/couple-takes-sticky-footer/
I want to create a hamburger menu for the mobile version of my website (video)
https://www.youtube.com/watch?v=xMTs8tAapnQ
I want to put an icon next to my website name on browser tabs
https://stackoverflow.com/questions/19462156/how-can-i-make-an-icon-appear-next-to-my-title-in-the-title-tag
I want to create a reading position indicator as the user scrolls down the page
https://css-tricks.com/reading-position-indicator/
I want to receive contact via email when people fill out and submit the contact form on my website (video)
https://www.youtube.com/watch?v=F5zDLz0qhik
I want a text box to automatically resize as text is added or deleted
http://cssdeck.com/labs/eiwcpf9l
I want to disable the enter key's "submit form" command in a form on my website
http://webcheatsheet.com/javascript/disable_enter_key.php