Tag Archive for: html5

Create A Responsive Website from Scratchw3newbie.com

Create a responsive website from scratch with html5, jquery image slider, css3 drop down menu

82 Comments/by
YouTube player

Please subscribe on YouTube 😊

Download Starter Files

In recent tutorials we created responsive websites with HTML5 and CSS3 using just a text editor (“Notepad ++” and/or “Text Wrangler”) yet we didn’t include any flashy elements such as an image slider or responsive drop down navigation. In this instructional tutorial, with the accompanying YouTube video, we’ll make a responsive website with an image slider, “The Blueberry Slider” by Mark Tyrrell, and a responsive drop down menu that will switch to an icon with the website’s responsiveness. Were also going to be using an icon set for images in our responsive website that are from the “Stylistica Icons Set” by Dry Icons but use whichever vector icons you like out of the set.

The CSS drop down menu has a single-column drop down effect when the website is 740 pixels or less in width, thanks to the media queries we’ll be adding towards the end of the tutorial. Enjoy!

Introduction to HTML and CSS With A Two Column Websitew3newbie.com

Responsive HTML5 Web Design Tutorial – How To Make A Website From Scratch

29 Comments/by
YouTube player

Please subscribe on YouTube 😊

Download Starter Files

In this video tutorial you will learn how to make a basic HTML5 Responsive Website from scratch using only a text editor. This is for those of you who are just getting started with responsive web design who want to get the feel of how HTML5 and media queries work together. First we will layout all of the html and then move over to our css style sheet to actually design the website.

The text editor I will be using in the tutorial is called “Text Wrangler” which is a free software you can find online and works with any Mac computer. If your on a PC, however, one of the best free text editing softwares you can find is called “Note Pad ++”.

In the video an external style sheet is used for the css of the design but in the free downloadable file it is an internal style sheet. Feel free to download the source code of the HTML5 Template if you do not wish to follow along with the video. All of the images in this website tutorial are uploaded to the web so they do not come with the download.