Web Coding Videos http://webcodingvideos.com Website coding video tutorials covering CSS HTML Javascript and more Wed, 20 May 2009 02:29:06 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 It’s Alive http://webcodingvideos.com/2009/blog/its-alive http://webcodingvideos.com/2009/blog/its-alive#comments Mon, 18 May 2009 21:48:49 +0000 Ben http://webcodingvideos.com/?p=224 Today, Web Coding Videos (dot com) is live. If you’re interested, this is a personal project that I (Ben) have been dreaming up for the past year. It started as a quick note on a scrap of paper while I was sitting at a traffic light, and is quickly becoming a reality. Since I’m producing these videos myself, it may be a slow process, but as long as the site is helpful to many people, I’ll keep making ‘em! Please… invite your friends to check it out if you think they’d find it helpful.

Also, I’d love to hear your feedback on the videos. I’m sure there is nit-picky stuff in there where I messed up a word or said “um” one too many times. I’ll improve with time. But if you have serious feedback or ideas for suggestion, please use the contact form to let me know.

Enjoy.

Ben

]]> http://webcodingvideos.com/2009/blog/its-alive/feed 0 Introduction to CSS http://webcodingvideos.com/2009/video/introduction-to-css http://webcodingvideos.com/2009/video/introduction-to-css#comments Mon, 18 May 2009 03:12:56 +0000 Ben http://webcodingvideos.com/?p=186 post thumbnail

[ad#adsense-banner-01]

In this video lesson, you’ll learn the basics of how to use CSS to style your webpage. CSS stands for cascading style sheets, and provides formatting information for the html markup on your web page.

Code examples from the video

Styles defined in the head section

<style type="text/css">
p{
	color:red;
	font-size:30px;
	font-family:"Curlz MT";
	border:3px dotted black;
	text-align:center;
	background:yellow;
}
p a{
	color:purple;
	text-decoration:none;
	font-weight:bold;
}
</style>

Including a CSS file into your HTML document

<link rel="stylesheet" href="styles.css" type="text/css" media="screen"/>

Defining styles as an attribute in html elements

<p style="color:red;font-weight:bold;">This is my bold red paragraph</p>

Resources mentioned in the video

[ad#adsense-image-large]

]]> http://webcodingvideos.com/2009/video/introduction-to-css/feed 0 Basic HTML Tags http://webcodingvideos.com/2009/html/basic-html-tags http://webcodingvideos.com/2009/html/basic-html-tags#comments Sun, 17 May 2009 18:42:27 +0000 Ben http://webcodingvideos.com/?p=152 post thumbnail

[ad#adsense-banner-01]

In this video we’ll take our introduction to html to the next level. You will learn about several common tags and how to use them in your code. Along the way I’ll show you some helpful tips and tricks.

Code Example From the Video

<html>
	<head>
		<title>This is the title</title>
	</head>
	<body>
		<h1>This is my <em>website</em></h1>
		<h2>Please &nbsp;&nbsp;&nbsp;&nbsp;enjoy your visit</h2>
		<p>Welcome to my first website. <br />This is HTML code.
		<!--Remember to check this link-->
		<a href="http://google.com" target="_blank">
		Click here to search <strong>Google</strong></a>.</p>
	</body>
</html>

Resources

[ad#adsense-image-large]

]]> http://webcodingvideos.com/2009/html/basic-html-tags/feed 0 Introduction to HTML http://webcodingvideos.com/2009/html/introduction-to-html http://webcodingvideos.com/2009/html/introduction-to-html#comments Sun, 10 May 2009 17:40:26 +0000 Ben http://webcodingvideos.com/?p=28 post thumbnail

[ad#adsense-banner-01]

Welcome to the getting started with HTML video. This is a great place to start if you’re interested in learning the basics of what HTML is and what it takes to make a basic web page. You likely have all the tools you need right on your computer. If you haven’t watched the video yet, go ahead and do that. Below I’ll provide the code that we used in the video for you to simply copy and paste. Also I’ll provide links to any resources mentioned in the video.

Code

<html>
	<head>
		<title>My Webpage</title>
	</head>
	<body>
		<h1>Welcome to my website!</h1>
		<p>You’ll find lots of information here.</p>
		<a href=”mailto:myemail@google.com”>Click here to email me.</a>
	</body>
</html>

Resources

[ad#adsense-image-large]

]]> http://webcodingvideos.com/2009/html/introduction-to-html/feed 0