Jump to content
Killersites Forums

JavaScript Beginners


AndyB
 Share

Recommended Posts

Hi guys,

My name is Andy,I've just started learning JavaScript and I'm new to the Killer Sites community.

I've got Web developer friends here in Brighton,England where I live and I enjoy tinkering with code a lot.

I'd like to learn the ropes to try and make myself useful in that community and start building stuff.

I discovered Stefan's videos on YouTube and I think his work is awesome for beginners like me.

He recommends joining the community that's been built around his site, so here I am!

This is my first post, so I apologise if it's below the community's standards.

I have a coding query and I would be grateful for anyone's help with it.

In the JavaScript for Beginners video there's a chapter on Loops.

Both the "while" loop and the "for" loop are explained with code bits.

I use Google Chrome as my browser and I've run code from other videos just fine.

Somehow,the "for" loop code is going into what Stefan refers to as the "endless loop."

After trying to run the code a couple of times,my browser crashed on me and I had to restart the PC.

Anyway,this is the code that I copied from the video tutorial into Notepad this morning:

 

for(var i = 1; 1<10; i++)

 

{

document.write(i + "<br> ");

 

}

Is the syntax not correct for the Google Chrome browser perhaps?

I've actually run the code in IE8 and Firefox and got error messages too.

I'd be grateful for anyone's insight on this code error.

 

Thanks a lot everybody,

Andy.

PS: I'd be happy to receive advice about sorting out my profile data too.

I'd like to fall in line with the community's expectations in that respect.

Thanks.

Link to comment
Share on other sites

Welcome to the forum!

 

The issue is with this line:

 

for(var i = 1; 1<10; i++)

 

the third section (1 < 10) tells the loop to continue looping until 1 (one) is less than 10. Since 1 is always less than 10, you'll get an infinite loop. Instead of 1, you want to use your variable name, "i". Make sense?

Link to comment
Share on other sites

Hi Ben,

Thanks for your kind greetings and your very prompt reply.

I checked the code and Stefan's video and you were right on the money.

The mistake was indeed" 1<10" as opposed to "i<10".

Obviously, "i" is the variable and I didn't call it in the "for" loop!

 

Cheers for your insight Ben.

Could you possibly confirm if there is a JavaScript forum on the site?

 

Best regards,

Andy.

Link to comment
Share on other sites

Would you know if there also is an "Advanced JavaScript" course?

Or, is The J Query course the follow up to the JavaScript for beginners course?

Unfortunately no, the Beginners Javascript and jQuery courses are the only courses on Javascript that KillerSites offers as far as I know. The jQuery course isn't necessarily an "advanced course" but it is a logical next step after picking up some Javascript basics.

Link to comment
Share on other sites

Hi Ben,

Thanks for the tip on the J Query course, I'll look it up as soon as I'm done with the JavaScript course.

I've got a question which I might not be able to formulate very well, but I'll try to anyway.

If I'm not mistaken,PHP is the language used for Facebook, YouTube and WordPress.

You may know someone who needs to update a WordPress site for example.

If you're a PHP coder your skills can be used in that context I would imagine.

Similarly, if you become fairly competent with the JavaScript skills available in the course, in which context can you use those skills?

I seem to understand that JavaScript is useful to write forms for example, which is what I intended to use it for in my own site.

I appreciate that my question is probably a bit vague but I would be grateful if you could exemplify the use of JavaScript in Web development.

Many thanks Ben,

Andrew.

 

PS; Sorry about the reply blunders, I hope I've got it right this time, I used to click the "Add Reply" button at the bottom of the page!

Link to comment
Share on other sites

Seems like you are pretty much asking "what is the difference between PHP and Javascript."

 

Javascript is a client side language, which means it executes its code directly within the browser. Javascript can be run at any time after the page has loaded. All Javascript code is visible to the visitor if they look for it, and Javascript can be changed/disabled by the visitor, meaning it isn't necessarily secure, and you can't always guarantee someone will have Javascript enabled. Javascript is used for things like animation (some of the stuff that Flash is able to do Javascript can do as well), interactive elements, slideshows, popups, form validation, etc. Basically, Javascript is often used when you need an extra layer of interactivity.

 

PHP is a server side language, meaning that the server processes the code on the server, and returns the results to the browser. The code only runs when the page is first loaded, and the code isn't visible/can't be changed by viewers. PHP gives you significantly more functionality, including sending email, submitting and processing forms, logging in/out users, image creation and processing, etc.

 

AJAX uses a mix of both PHP and Javascript. Basically, it uses Javascript to call PHP code, so you get the best of both worlds: you can call it whenever you want after the page loads, it doesn't require a page refresh, and you get access to PHP's wider range of functionality. You can't always guarantee that users will have Javascript enabled (though it's probably enabled on 99% of all machines.)

 

When do you use these languages? I use HTML/CSS as the core (since all websites ultimately display HTML/CSS), PHP to add logic/functionality, and Javascript to add interactivity. Javascript and PHP aren't mutually exclusive, so for example, just because you are using Wordpress doesn't mean you won't be working with Javascript.

Link to comment
Share on other sites

Seems like you are pretty much asking "what is the difference between PHP and Javascript."

 

Javascript is a client side language, which means it executes its code directly within the browser. Javascript can be run at any time after the page has loaded. All Javascript code is visible to the visitor if they look for it, and Javascript can be changed/disabled by the visitor, meaning it isn't necessarily secure, and you can't always guarantee someone will have Javascript enabled. Javascript is used for things like animation (some of the stuff that Flash is able to do Javascript can do as well), interactive elements, slideshows, popups, form validation, etc. Basically, Javascript is often used when you need an extra layer of interactivity.

 

PHP is a server side language, meaning that the server processes the code on the server, and returns the results to the browser. The code only runs when the page is first loaded, and the code isn't visible/can't be changed by viewers. PHP gives you significantly more functionality, including sending email, submitting and processing forms, logging in/out users, image creation and processing, etc.

 

AJAX uses a mix of both PHP and Javascript. Basically, it uses Javascript to call PHP code, so you get the best of both worlds: you can call it whenever you want after the page loads, it doesn't require a page refresh, and you get access to PHP's wider range of functionality. You can't always guarantee that users will have Javascript enabled (though it's probably enabled on 99% of all machines.)

 

When do you use these languages? I use HTML/CSS as the core (since all websites ultimately display HTML/CSS), PHP to add logic/functionality, and Javascript to add interactivity. Javascript and PHP aren't mutually exclusive, so for example, just because you are using Wordpress doesn't mean you won't be working with Javascript.

 

Hi Ben,

 

Thanks for your reply to my last post and breaking down the differences between JavaScript and PHP to me.

I will try to illustrate the kind of little JavaScript bits I try to use to add functionality to my attempts at putting a site together.

 

<HTML>

<HEAD>

<TITLE>Button</TITLE>

 

<script LANGUAGE="JavaScript">

 

function myFunction() {

alert("The function has been called.");

}

 

</SCRIPT>

 

</HEAD>

 

<BODY>

 

<HR>

 

<FORM NAME="myForm">

<INPUT TYPE="button" VALUE="call function" onClick="myFunction();">

</FORM>

 

</BODY>

</HTML>

 

I've picked up that bit from a manual explaining how to "write" buttons for a user to click on.

 

My query is(and I apologise in advance for the clumsy formulation)is the button a part of the <FORM> element ?

I know I've got a button named"call function" that comes up and when I click it, I get the alert box that says "The function has been called", but I'm not exactly sure which bits of code do what.

 

Thanks in advance for your help with this matter,

Regards,

Andy.

 

 

Link to comment
Share on other sites

A button is contained within the <form>, so in that sense, yes, the button is part of the form.

 

In the above code, you are creating a form that contains a button, and when the button is clicked, Javascript is used to call myFunction() that shows the alert. The only thing part of this that is actually Javascript are these two portions:

 

onClick="myFunction();"

and

 

<script LANGUAGE="JavaScript">

function myFunction() {
alert("The function has been called.");
}

</SCRIPT>

If you haven't already, I would suggest that you do a little research on HTML/CSS before you do Javascript. You'll be working a lot with HTML/CSS when you are doing Javascript, so I'd suggest that you be generally comfortable with HTML/CSS so you're only confused with one language rather than three all at once.

Link to comment
Share on other sites

A button is contained within the <form>, so in that sense, yes, the button is part of the form.

 

In the above code, you are creating a form that contains a button, and when the button is clicked, Javascript is used to call myFunction() that shows the alert. The only thing part of this that is actually Javascript are these two portions:

 

onClick="myFunction();"

and

 

<script LANGUAGE="JavaScript">

function myFunction() {
alert("The function has been called.");
}

</SCRIPT>

If you haven't already, I would suggest that you do a little research on HTML/CSS before you do Javascript. You'll be working a lot with HTML/CSS when you are doing Javascript, so I'd suggest that you be generally comfortable with HTML/CSS so you're only confused with one language rather than three all at once.

 

Thanks a lot for taking the time to look at this code Ben, it helped make things clearer and I'm going to brush up on my HTML/CSS too ,

Regards,

Andy.

 

 

 

Link to comment
Share on other sites

Hi Ben,

I hope you're well and that work is going fine too.

I was hoping you might be able to help with this query.

I think I have the basic HTML skills more or less in place, whereby I can write basic HTML pages with tags and elements.

Ideally, I would like to build a site, perhaps in view of putting together something I can show friends and improve on.

I'm learning JavaScript forms at the moment with the Killer Sites tutorials, to add functionality to the site.

I realise that my CSS is not very good though.

I was wondering if there were resources available on the Net with good CSS templates that you could use to build your own sites.

You obviously know that CMS 's use that principle, in Wordpress for example

Could you possibly point us towards pre-existing CSS background images, fonts,colour shades?

Many thanks Ben,

Regards,

Andy.

Link to comment
Share on other sites

Sounds like you are asking less about CSS specifically, and more about design related resources. Here are a couple resources:

 

-- There are a huge number of CSS based templates online, both free and paid. A little Google searching should give you a wide range to play with.

 

-- Fonts: http://www.fontsquirrel.com/ and http://www.dafont.com/

 

-- Color options: http://kuler.adobe.com/ and http://www.colourlovers.com/

 

-- Free stock photography: http://www.morguefile.com/ and http://www.sxc.hu/ (though you'll often end up purchasing stock photography from Dreamstime or iStockPhoto)

 

I imagine you can also find a lot of resources by searching for "design freebies".

Link to comment
Share on other sites

Sounds like you are asking less about CSS specifically, and more about design related resources. Here are a couple resources:

 

-- There are a huge number of CSS based templates online, both free and paid. A little Google searching should give you a wide range to play with.

 

-- Fonts: http://www.fontsquirrel.com/ and http://www.dafont.com/

 

-- Color options: http://kuler.adobe.com/ and http://www.colourlovers.com/

 

-- Free stock photography: http://www.morguefile.com/ and http://www.sxc.hu/ (though you'll often end up purchasing stock photography from Dreamstime or iStockPhoto)

 

I imagine you can also find a lot of resources by searching for "design freebies".

 

Hi Ben,

I hope you 're alright and that your work is going fine too.

I've been getting into the killer.sites practical section of the JavaScript for Beginners tutorials.

I've put to practice some of the code on validating forms and used the GetElementbyId and InnerHTML functions to toggle menus.

I'm into the external JavaScript section now and I have a couple of questions I hope you might be able to answer.

-Is using external JavaScript files the preferred method of using JavaScript?

Stefan mentions that it is almost always done with CSS, so I was wondering if,when using manual JavaScript,it is best to have it written in an external file.

My second question is sort of a follow up on my last post.

Stefan mentions Scriptaculous and jQuery as external libraries that you can link your pages to, to do form validation and create widgets for JavaScript.

When I was asking about "pre-existing CSS background images etc..."I was thinking about CSS libraries but formulated it poorly.

I will go and look it up on the Internet,but

-Are there any CSS libraries that you could recommend?

 

Thanks in advance for your help Ben,

Regards,

Andrew.

 

 

 

Link to comment
Share on other sites

As a general rule, keep your Javascript in an external file. It's much easier to have all your HTML files link to one central Javascript file -- that way, if you need to make edits that affect multiple pages, you can make the change to one file, not several.

 

There are CSS libraries, but not really for adding styling such as colors, images, etc, since those will change significantly depending on the website. Most framworks out there are either for layout (see http://960.gs/ and similar) or for adding additional functionality by using other languages such as Ruby to modify how CSS is written (to add variables, math, etc.) For example, look at SASS (http://sass-lang.com/) and LESS http://lesscss.org/. I'm not really personally a fan of CSS frameworks, but some people like them.

Link to comment
Share on other sites

As a general rule, keep your Javascript in an external file. It's much easier to have all your HTML files link to one central Javascript file -- that way, if you need to make edits that affect multiple pages, you can make the change to one file, not several.

 

There are CSS libraries, but not really for adding styling such as colors, images, etc, since those will change significantly depending on the website. Most framworks out there are either for layout (see http://960.gs/ and similar) or for adding additional functionality by using other languages such as Ruby to modify how CSS is written (to add variables, math, etc.) For example, look at SASS (http://sass-lang.com/) and LESS http://lesscss.org/. I'm not really personally a fan of CSS frameworks, but some people like them.

Hi Ben,

I hope you're well and that your work is going OK too.

Thanks for your reply to my last CSS query.

I went to the "free CSS templates"site as you suggested and downloaded a template that I'm working on at the moment.

I've got a code query that I was hoping you might be able to help me with.

I'm trying to modify the e-mail Test(Form) in this code snippet but I get nothing displayed at all.

I'd be grateful to have your insight on the error I made here.

Many thanks Ben,

Andy.

 

<HTML>

<HEAD>

<TITLE>E-mails</TITLE>

 

<script LANGUAGE="JavaScript">

 

 

function emailTest(form) {

if (form.email_address.value.indexOf("@", 0) < 0) {

alert("This is not a valid e-mail address!");

} else {

alert("This could be a valid e-mail address");

}

}

 

</SCRIPT>

 

</HEAD>

 

 

</HTML>

 

 

 

 

 

 

Link to comment
Share on other sites

do you have a <body> ... </body> section to your code? What you've posted is just the <head> section, and I'd expect that you also need a <body> and a form with an email address field.

 

Hi Ben,

Thanks for your insight, I realised I hadn't added the form with the e-mail address field.

Here's the code I reworked:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Transitional//EN">

<HTML>

<HEAD>

<TITLE>E-MAIL INFO</TITLE>

</HEAD>

<BODY>

<script LANGUAGE="JavaScript">

<!--

function showUpper(checked) {

var showThis;

if (checked) {

showThis = document.myForm.name.value.toUpperCase();

} else {

showThis = document.myForm.name.value.toLowerCase();

}

document.myForm.name.value = showThis;

}

function emailTest(form) {

if (form.email_address.value.indexOf("@", 0) < 0) {

alert("This is not a valid e-mail address!");

} else {

alert("This could be a valid e-mail address");

}

}

//-->

</SCRIPT>

<FORM NAME="myForm">

Name:<BR>

<INPUT TYPE="text" SIZE="30" NAME="name">

<INPUT TYPE="checkbox" NAME="upperCheckbox"

onClick="showUpper(this.checked);">

Covert string to uppercase or lowercase<BR>

Email address:<BR>

<INPUT TYPE="text" SIZE="30" NAME="email_address">

<INPUT TYPE="checkbox" onclick="(this.checked) ?

emailTest(this.form) : '';">

Test for email address<BR>

</FORM>

</BODY>

</HTML>

The first field turns the user's name to upper case

The second field forces the user to input the @ sign in the e-mail address.

How can I modify the email Test function to ensure that it contains the .com suffix?

Also Ben,when I reply to your mails, I click:

-'Reply'

-start typing after the /quote part of your reply

-Click 'Add reply'

How can I :

-Reply to you without having your last mail attached to my reply?And

-Does my reply appear on the forum or are we in a private conversation?

Thanks for your help Ben,

Regards,

Andy.

 

Link to comment
Share on other sites

Hi Ben,

Thanks for your insight, I realised I hadn't added the form with the e-mail address field.

Here's the code I reworked:

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

 

Transitional//EN">

 

<HTML>

<HEAD>

<TITLE>E-MAIL INFO</TITLE>

</HEAD>

 

<BODY>

<script LANGUAGE="JavaScript">

<!--

function showUpper(checked) {

var showThis;

if (checked) {

showThis = document.myForm.name.value.toUpperCase();

} else {

showThis = document.myForm.name.value.toLowerCase();

}

document.myForm.name.value = showThis;

}

function emailTest(form) {

if (form.email_address.value.indexOf("@", 0) < 0) {

alert("This is not a valid e-mail address!");

} else {

alert("This could be a valid e-mail address");

}

}

//-->

</SCRIPT>

 

<FORM NAME="myForm">

Name:<BR>

<INPUT TYPE="text" SIZE="30" NAME="name">

 

<INPUT TYPE="checkbox" NAME="upperCheckbox"

onClick="showUpper(this.checked);">

Covert string to uppercase or lowercase<BR>

 

Email address:<BR>

<INPUT TYPE="text" SIZE="30" NAME="email_address">

 

<INPUT TYPE="checkbox" onclick="(this.checked) ?

 

emailTest(this.form) : '';">

Test for email address<BR>

 

</FORM>

 

</BODY>

</HTML>

 

The first field turns the user's name to upper case

The second field forces the user to input the @ sign in the e-mail address.

How can I modify the email Test function to ensure that it contains the .com suffix?

Also Ben,when I reply to your mails, I click:

-'Reply'

-start typing after the /quote part of your reply

-Click 'Add reply'

How can I :

-Reply to you without having your last mail attached to my reply?And

-Does my reply appear on the forum or are we in a private conversation?

 

Thanks for your help Ben,

Regards,

Andy.

 

0

Link to comment
Share on other sites

Sorry for the delay getting back to you -- I've been around much less due to a super busy schedule recently.

 

Rather than checking for the .com suffix, since not all email addresses will contain that, you'd be better off either for checking for a period after the @ symbol, or for using a more comprehensive regular expression based solution.

 

Here's a resource that talks about validating email addresses (bottom of page): http://www.w3schools.com/js/js_form_validation.asp

Link to comment
Share on other sites

  • 3 weeks later...

Sorry for the delay getting back to you -- I've been around much less due to a super busy schedule recently.

 

Rather than checking for the .com suffix, since not all email addresses will contain that, you'd be better off either for checking for a period after the @ symbol, or for using a more comprehensive regular expression based solution.

 

Here's a resource that talks about validating email addresses (bottom of page): http://www.w3schools..._validation.asp

 

Hello Ben,

Thank you to the solution to my e-mail query from a couple of weeks back.

I apologise in replying so late to your explanation but we had family commitments during that time period.

My queries today are not directly code related but are about web browsing.

 

-Do we actually "browse" web pages on smart phones and PDA's?

-Do smart phones actually"support" JavaScript?

 

Many thanks in advance for your time Ben,I hope your work is going OK too.

I'll look forward to posting more regularly from now on.

 

Regards,

Andrew.

Link to comment
Share on other sites

I'm not quite sure you you mean by "browse", but yes, most modern smartphones/pdas have the ability to view and navigate websites.

 

Yes, most smart phones support Javascript.

 

 

Hello Ben,

Thanks for your reply to my last query,it was indeed about whether or not most smart phones do support JavaScript, and your reply made things clearer.

I'm working on customising this CSS template that I got from the Free CSS templates site which you recommended to me a little while back.

I've got the template HTML and CSS code, but there's this margin line splitting the page and I can't get rid of it.

I've gone through various trial and error attempts to get rid of that line but I can't figure out which line(s) need to be removed.

Here's the CSS,thanks in advance for your help Ben,

Regards,

Andrew.

 

 

html, body {

height: 100%;

}

 

body {

margin: 0px;

padding: 0px;

background: #3A3A3A;

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

color: #000000;

}

 

h1, h2, h3 {

margin-top: 0px;

}

 

p, ol, ul {

margin-top: 0px;

}

 

p {

line-height: 170%;

}

 

ul {

margin: 0px;

padding: 0px;

list-style: none;

}

 

strong {

}

 

a {

color: #A5C35C;

}

 

a:hover {

text-decoration: none;

}

 

a img {

border: none;

}

 

img.border {

}

 

img.alignleft {

float: left;

padding-right: 25px;

}

 

img.alignright {

float: right;

}

 

img.aligncenter {

margin: 0px auto;

}

 

hr {

display: none;

}

 

/** WRAPPER */

 

#wrapper {

}

 

.container {

width: 980px;

margin: 0px auto;

}

 

.clearfix {

clear: both;

}

 

/** HEADER */

 

#header {

width: 960px;

height: 292px;

margin: 0px auto;

background: url(images/img02.jpg) no-repeat left

 

top;

}

 

/** LOGO */

 

#logo {

width: 960px;

height: 80px;

margin: 0px auto;

text-transform: uppercase;

}

 

#logo h1 a {

display: block;

margin: 0px;

padding: 10px 0px 0px 0px;

font-size: 36px;

}

 

#logo p {

margin: -28px 0px 0px 5px;

padding: 0px;

font-size: 12px;

}

 

#logo a {

text-decoration: none;

}

 

/** MENU */

 

#menu {

width: 960px;

height: 48px;

margin: 0px auto;

background: url(images/img03.jpg) no-repeat left

 

top;

}

 

#menu ul {

margin: 0px;

padding: 0px;

list-style: none;

line-height: normal;

}

 

#menu li {

float: left;

}

 

#menu a {

display: block;

height: 32px;

margin: 0px 0px 0px 0px;

padding: 16px 25px 0px 25px;

text-decoration: none;

text-transform: uppercase;

font-size: 11px;

font-weight: bold;

color: #FFFFFF;

}

 

#menu a:hover {

background: #000000;

text-decoration: none;

color: #FFFFFF;

}

 

#menu .first a {

background: #000000 url(images/img04.jpg)

 

no-repeat left top;

color: #FFFFFF;

}

 

/** PAGE */

 

#page {

width: 960px;

margin: 0px auto;

padding: 30px 0px 10px 0px;

}

 

/** CONTENT */

 

#content {

float: center;

width: 610px;

padding-right: 30px;

background: url(images/img06.jpg) repeat-y right

 

top;

}

 

/** SIDEBAR */

 

#sidebar {

float: center;

width: 300px;

}

 

#sidebar h2 {

padding: 0px 0px 10px 0px;

text-transform: uppercase;

font-size: 18px;

}

 

#sidebar li ul {

margin: 0px 0px 0px 20px;

padding: 0px 0px 20px 0px;

}

 

#sidebar li li {

padding: 0px 0px 5px 0px;

}

 

#sidebar p {

margin: 0px 0px 20px 20px;

}

 

/** POST */

 

.post {

margin-bottom: 20px;

background: url(images/img05.jpg) repeat-x left

 

bottom;

}

 

.post .title {

margin: 0px;

padding-bottom: 10px;

letter-spacing: -1px;

}

 

.post .title a {

border: none;

text-decoration: none;

text-transform: uppercase;

font-size: 22px;

color: #000000;

}

 

.post .meta {

display: block;

margin-top: -15px;

padding: 5px 0px;

text-align: left;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: italic;

}

 

.post .meta a {

}

 

.post .entry {

text-align: justify;

padding: 10px 0px 10px 0px;

}

 

/** FOOTER */

 

#footer {

width: 960px;

margin: 0px auto;

background: url(images/img05.jpg) repeat-x left

 

top;

}

 

#footer p {

margin: 0px;

padding: 20px 0px 20px 0px;

text-align: center;

font-size: 11px;

}

 

#footer a {

color: #000000;

}

 

Link to comment
Share on other sites

I think you'll need to post the HTML you are working with as well, otherwise it's hard to see what's going on.

Hello Ben,

Thanks for your reply to my last e-mail.

Sorry about not having posted the HTML,which seems fairly obvious, I was convinced the element to remove was in the CSS.

Here's the HTML and thanks for your help,

Regards,

Andrew.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--

Design by Free CSS Templates

http://www.freecsstemplates.org

Released for free under a Creative Commons Attribution 3.0 License

-->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<link href="style2.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>

<div id="wrapper">

<div id="logo">

<h1><a href="#">Machines Intelligence Novelty and Dividuals</a></h1>

</div>

<div id="header">

</div>

<div id="menu">

<ul>

<li class="first"><a href="#" accesskey="1" title="">Home</a></li>

<li><a href="#" accesskey="2" title="">About</a></li>

<li><a href="#" accesskey="3" title="">Articles</a></li>

<li><a href="#" accesskey="4" title="">\links</a></li>

<li><a href="#" accesskey="5" title="">Contact Us</a></li>

</ul>

</div>

<div id="page">

<div id="content">

<div class="post">

<h2 class="title"><a href="#">Welcome to True Nature </a></h2>

<p class="meta">Posted by <a href="#">Someone</a> on February 10, 2011

 •  <a href="#" class="comments">Comments (64)</a>  •  <a href="#" class="permalink">Full article</a></p>

<div class="entry">

<p><img src="images/img08.jpg" width="143" height="143" alt="" class="alignleft border" />This is <strong>TrueNature </strong>, a free, fully standards-compliant CSS template designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/"></a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. The picture in this template is from <a href="#">PDPhoto.org</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 2.5</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>

<p class="clearfix"> </p>

</div>

</div>

<div class="post">

<h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>

<p class="meta">Posted by <a href="#">Someone</a> on February 8, 2011

 •  <a href="#" class="comments">Comments (64)</a>  •  <a href="#" class="permalink">Full article</a></p>

<div class="entry">

<p><img src="images/img07.jpg" width="143" height="143" alt="" class="alignleft border" />Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, consectetuer nisl felis ac diam. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. </p>

<p class="clearfix"> </p>

</div>

</div>

<div class="post">

<h2 class="title"><a href="#">Phasellus pellentesque turpis </a></h2>

<p class="meta">Posted by <a href="#">Someone</a> on February 8, 2011

 •  <a href="#" class="comments">Comments (64)</a>  •  <a href="#" class="permalink">Full article</a></p>

<div class="entry">

<p><img src="images/img09.jpg" alt="" width="143" height="143" class="alignleft" />Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. </p>

<p class="clearfix"> </p>

</div>

</div>

<div style="clear: both;"> </div>

</div>

<!-- end #content -->

<div id="sidebar">

<ul>

<li>

<h2>Aliquam tempus</h2>

<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper hendrerit.</p>

</li>

<li>

<h2>Categories</h2>

<ul>

<li><a href="#">Aliquam libero</a></li>

<li><a href="#">Consectetuer adipiscing elit</a></li>

<li><a href="#">Metus aliquam pellentesque</a></li>

<li><a href="#">Suspendisse iaculis mauris</a></li>

<li><a href="#">Urnanet non molestie semper</a></li>

<li><a href="#">Proin gravida orci porttitor</a></li>

</ul>

</li>

<li>

<h2>Blogroll</h2>

<ul>

<li><a href="#">Aliquam libero</a></li>

<li><a href="#">Consectetuer adipiscing elit</a></li>

<li><a href="#">Metus aliquam pellentesque</a></li>

<li><a href="#">Urnanet non molestie semper</a></li>

<li><a href="#">Proin gravida orci porttitor</a></li>

</ul>

</li>

<li>

<h2>Archives</h2>

<ul>

<li><a href="#">Aliquam libero</a></li>

<li><a href="#">Consectetuer adipiscing elit</a></li>

<li><a href="#">Metus aliquam pellentesque</a></li>

<li><a href="#">Suspendisse iaculis mauris</a></li>

<li><a href="#">Urnanet non molestie semper</a></li>

<li><a href="#">Proin gravida orci porttitor</a></li>

</ul>

</li>

<li>

<h2>Recent Post</h2>

<ul>

<li><a href="#">Aliquam libero</a></li>

<li><a href="#">Consectetuer adipiscing elit</a></li>

<li><a href="#">Metus aliquam pellentesque</a></li>

<li><a href="#">Urnanet non molestie semper</a></li>

<li><a href="#">Proin gravida orci porttitor</a></li>

</ul>

</li>

</ul>

</div>

<!-- end #sidebar -->

<div style="clear: both;"> </div>

</div>

</div>

<div id="footer">

<p>Copyright © 2010 TemplateName. Designed by <a href="http://www.freecsstemplates.org/"><strong>CSS Templates</strong></a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></p>

</div>

</body>

</html>

 

 

Link to comment
Share on other sites

I think you'll need to post the HTML you are working with as well, otherwise it's hard to see what's going on.

Hello Ben,

I think I got very lucky with the CSS template I was telling you about and I managed to find the line of code that was causing me trouble.

In the style sheet, I located the #content rule and changed the width property from “width: 610px;” to “width: auto;”.

This expanded the content to fill the room allotted by the parent div element #page (set to 960px).

That was a long shot but it seems to have worked out OK.

 

There's a fair amount of basic HTML/CSS work available in small Web agencies here in Brighton,UK.

I remember Stefan saying in one of his videos that he doesn't think that small companies are looking for people with an extensive academic background.

He seemed to say that the web work you've done, provided it's up to the employer's expectations and standards should be enough to get you interviews.

I think he also mentioned that your code should be well written and your sites well presented.

I have an HTML/CSS site and WordPress site at the moment under construction.

The HTML/CSS site is about philosopher Gilles Deleuze whose work I studied at University.

The WordPress site is about my own writings and essays.

 

Would you have any advice on how:

-I could make the sites suitable to show at an interview

-A web agency will critique the work and what they are looking for in an applicant's work to decide if he/she may be a suitable candidate.

 

Your answers will also help to dust off the work before I can show it to you for a full critique in the next couple of weeks.

 

Many thanks in advance for your help Ben,

Regards,

Andrew.

Link to comment
Share on other sites

Hello Ben,

I think I got very lucky with the CSS template I was telling you about and I managed to find the line of code that was causing me trouble.

In the style sheet, I located the #content rule and changed the width property from “width: 610px;” to “width: auto;”.

This expanded the content to fill the room allotted by the parent div element #page (set to 960px).

That was a long shot but it seems to have worked out OK.

 

There's a fair amount of basic HTML/CSS work available in small Web agencies here in Brighton,UK.

I remember Stefan saying in one of his videos that he doesn't think that small companies are looking for people with an extensive academic background.

He seemed to say that the web work you've done, provided it's up to the employer's expectations and standards should be enough to get you interviews.

I think he also mentioned that your code should be well written and your sites well presented.

I have an HTML/CSS site and WordPress site at the moment under construction.

The HTML/CSS site is about philosopher Gilles Deleuze whose work I studied at University.

The WordPress site is about my own writings and essays.

 

Would you have any advice on how:

-I could make the sites suitable to show at an interview

-A web agency will critique the work and what they are looking for in an applicant's work to decide if he/she may be a suitable candidate.

 

Your answers will also help to dust off the work before I can show it to you for a full critique in the next couple of weeks.

 

Many thanks in advance for your help Ben,

Regards,

Andrew.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...