Learning web design

[Winterblues]

Hey all!

I'm trying to learn front end development, and was wondering if any of you experienced peers could help steer me in the right direction!

I'm currently using W3Schools to learn html/css and Javascript. What else should I be learning? A friend of mine suggested the book "MySQL", but there are a zillion versions. Suggestions? Should I be learning any middle or back-end tier?

Also, he told me to get a comp that has at least 4 gigs ram and to install UNIX on it.

This is all the info I have gather so far, and any input is greatly appreciated! I would eventually like to learn back-end as well btw. Thanks guys!

 

[ronaldroe]

http://justbuildwebsites.com/

 

[Winterblues]

http://justbuildwebsites.com/

This doesn't help....

 

[Phreaddee]

yes it does, you just cant see the forest for the trees.

Just take an idea that you have and learn what you need to build it as you go. When it comes to building websites, there is no one-true-way. Enjoy the journey.

 

[Phreaddee]

mysql and a unix box are certainly not high on my list of priorities. the point is everyone will tell you that their way is the best.

there are only three "languages" I would actually learn to have a solid grasp on.
html/css/js.
beyond that totally depends on your direction.

 

[Winterblues]

yes it does, you just cant see the forest for the trees.

Heh wow can't believe I overlooked it

Thanks guys! I understand now haha

 

[chrishirst]

Heh wow can't believe I overlooked it

Thanks guys! I understand now haha

You "missed it" because your friend is under the misapprehension that to build a website you need to build the delivery system as well.

<edited to add>

A real world analogy would be:

Learning to fly a plane, because you need to send a letter overseas.

 

[ian]

http://www.codecademy.com is another website worth checking out to learn.
It is still being developed and added to, but it is free.

 

[Frank]

Hey all!
I'm trying to learn front end development, and was wondering if any of you experienced peers could help steer me in the right direction!
I'm currently using W3Schools to learn html/css and Javascript.

That's an excellent start. Next, you could go through the 4 CSS tutorials I wrote for advanced students -- see my signature page. You could also use them as a reference when you need 'em, and learn as you create. In all cases, I would suggest to actually start building a site, for example one for yourself or your future web design business. There is no substitute for experience.

What you do need for that from the start as well, however, is knowledge of the inclusion method. Whether that is on the basis of PHP of ASP doesn't matter, but here is the PHP method: http://www.w3schools.com/php/php_includes.asp. Do mind that the file in which you include other files must also have the extension .php. Otherwise the server won't parse the file for PHP inclusion lines before sending it off to the visitor's computer.

There is not a definite need for you to install a PHP-parsing test server on your own machine, because you can test it online. But if you do want your own test server, here's the easiest installation method I know: XAMPP.

The rest of the PHP chapter you should postpone to a later date because it concerns completely different matters, as good as completely unrelated to front-end design, as is/does the whole SQL chapter. They will come with the XAMPP package, but you don't have to know much about 'em yet.

 

[Winterblues]

Thank you for all the responses everyone!

 

[Winterblues]

Should I worry about HTML5 just yet?

 

[Frank]

Should I worry about HTML5 just yet?

That depends primarily on whether you have to use an iframe, for example to include a YouTube video, which is the easiest and most reliable method. Iframes often get a default border. If you want to get rid of that and be able to manage some extra dimensions of it, you need this:

<iframe name="I-frame" id="I-frame" src="file.youtube.com" 
frameborder="0" width="97%" marginheight="0" marginwidth="0" 
height="95%"></iframe>

You can control the width and height with CSS, but the others not, in IE7/8 (not sure about 9). At least not frameborder. And HTML4 Transitional and XHTML 1.0 Transitional are the only ones that accept the others.

If you don't need iframes, then HTML5 is the doctype of choice. You just have to teach IE7/8 'a few lessons', like this:

<!DOCTYPE HTML>
<html>
<head>
    <title>Demo</title>
    <meta charset="iso-8859-1" />
<script type="text/javascript">
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
</script>
<style type="text/css">
header, nav, section, article, aside, footer {
    display: block;
}
</style>
</head>
<body>

</body>
</html>

Short doctype, all kinds of nice new tags, and it offers quite a few new possibilities. Just google around a bit for that.

 

[Winterblues]

Thanks Frank!

 

[Phreaddee]

I dont really understand your point with the iframes frank.

frames - obsolete
iframes - still part of the spec.

I would say that using an iframe is probably not even on my radar as to whether or not I use the HTML5 Doctype.

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-iframe-element

in fact not only is it still very much a part of the spec, theres now three new attributes

sandbox
srcdoc
seamless

you might want to have a look at the seamless option, definately before suggesting marginheight="0" marginwidth="0" which are only really an option if your using HTML 4.01 Frameset.

 

[Frank]

Phreaddee,

'Seamless' is not supported by IE7/8 (not sure about 9), and border:0 has no effect on iframes in those browsers. Furthermore, the only HTML that validates if you have 4.01 Frameset is a traditional frameset. <body></body> does not even validate. So you are forced to use 4(.01) Traditional if you want a cross-browser borderless iframe. And I think being cross-browser down to IE7 is a must.

Lastly, YouTube recommends using iframes to include its videos (with the src="" pointing to the file on the YouTube site, obviously).

 

[Phreaddee]

Cross browser down to 8 is a must, 7 and or 6 (rarely) depending on the client and the target audience. But that's just my point of view.

I haven't heard much of it lately (possibly because responsive is the buzz word these days) but it used to be a heated debate. "progressive enhancement vs graceful degradation" to summarise...

• Graceful degradation is the practice of building an application for modern browsers while ensuring it remains functional in older browsers.
• Progressive enhancement is the practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.

moving along though, someone beginning with front end development, I would assume, would need a solid 24 months under their belt before they'd really be getting serious. that takes us to 2015.

1. IE7+6 will be dead by then, and 8 will be slowly dwindling as more win users will be moving away from XP to 7 or (heaven forbid) 8. both of which can support IE9 + IE10. IE9 is an OK browser, but they are back in the game with IE10, it's not better than any other major browser, but at least its comparable, and it seems to handle html5/css3 as good as the rest.

2. The rest of the world will be using firefox54386 or chrome9954345 (if current updates are anything to go by) or some other fantastical browser that simply reads your mind...

3. The myriad of mobile, smartphone and tablet devices that will be on the market in two years time. it would be ridiculous not to consider that this would and should play a huge influence into someones decision-making when deciding what path to go down.

4. HTML5 will be a "official" spec by then, not that that really means anything but it will be the STANDARD by which everyone plays. By that I mean the "base level of user experience" as mentioned above. No one will realistically be using html40.1 anymore anyway. seriously.
http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

5. You tube is owned by google and google loves this...
http://www.w3.org/html/wg/drafts/microdata/master/
http://support.google.com/webmaster...70&ctx=cb&src=cb&cbid=-18w7pquq0lhpd&cbrank=1
and this
http://googlewebmastercentral.blogspot.com.au/2012/06/recommendations-for-building-smartphone.html
both of which are best served up with html5. (and google also owns chrome - the most widely used browser)

6. responsive web design - google it.

7. If I haven't convinced you yet winterblues... consider the varying options. (check the lastest version dates.)
HTML5.1 - http://www.w3.org/html/wg/drafts/html/master/introduction.html
HTML5 - http://www.w3.org/TR/2012/CR-html5-20121217/
xhtml1.1 - http://www.w3.org/TR/2010/REC-xhtml11-20101123/
html4.01 - http://www.w3.org/TR/1999/REC-html401-19991224/

8. html4.01 is the majority of html5 anyway.

9. As for your iframe problem frank, I just did a google search and came across this. http://blogs.missouristate.edu/web/2011/05/20/iframes-html5-and-older-versions-of-internet-explorer/

<iframe id="MyIframe" name="MyIframe" src="http://my.iframe.src/"></iframe>
<script>
if(document.attachEvent) {
var OldIframe = document.getElementById("MyIframe");
var NewIframe = OldIframe.cloneNode(true);
//no scrollbars - overflow:hidden works for other browsers
NewIframe.setAttribute("scrolling", "no");
// IE8 and lower add a special border on frames.
// It's actually in addition to the css border property.
if(!document.addEventListener)
NewIframe.setAttribute("frameBorder", 0);
OldIframe.parentNode.replaceChild(NewIframe, OldIframe);
}
</script>

I havent had a chance to try it out , but give it a burl and let me know if it fixes the issue. personally I dont use iframes that much, and "while ensuring it remains functional in older browsers." - a border in older IE's doesn't really phase me.

 

[deadmix]

http://www.codecademy.com is another website worth checking out to learn.
It is still being developed and added to, but it is free.

i like this one very useful! thank you

 

[Frank]

I havent had a chance to try it out , but give it a burl and let me know if it fixes the issue.

Phreaddee, you're my savior!!! I have spent so many hours searching the web, asking questions about and testing the setAttribute option, you don't wanna know. But I just couldn't get IE7/8 to respond to setAttribute("frameBorder", "0") (which is the correct syntax). But that script works! Where did you get it?

Cross browser down to 8 is a must, 7 and or 6 (rarely) depending on the client and the target audience. But that's just my point of view.

It's what the client wants. That you have to be able to cater to. And IE7 is still used by large companies and companies with old, complex IT systems, even though it hardly shows up in the statistics anymore.

personally I dont use iframes that much, and "while ensuring it remains functional in older browsers." - a border in older IE's doesn't really phase me.

Same answer: that's up to the client. But you made my day!

Winterblues: use HTML5! Get rid of the old stuff! And if you ever have or want to use an iframe, just use that javascript. Put it in the body, after the iframe, otherwise it won't work. And there is an easier and better way to teach IE7/8 how to support HTML5. Download this file and put it in your own scripts folder: http://conijnwebdesign.nl/scripts/html5shiv.js. Next, put this line in the head of every page that you want to write in HTML5, preferably after the CSS link tag:

<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->

That's all you have to do; it takes care of the CSS 'upgrade' of IE as well.

Cheers!

 

[Phreaddee]

the link is above the code snippet. it explains his methodology a bit too.

glad to see it worked

 

[Frank]

the link is above the code snippet. it explains his methodology a bit too.
glad to see it worked

Stupid me, I missed the link over the code block, but thanks anyway.

That cloneNode function really works miracles. I searched some more with that term included, and came across a script that is suited for use with more than one iframe:

<script>
(function(run){
for (i=0;i<frames.length; i++) {
	var f1 = document.getElementsByTagName('iframe')[i];
	if(!f1 && window.addEventListener && !run){
		document.addEventListener('DOMContentLoaded', arguments.callee, false);
		return;
	}
	if(!f1){setTimeout(arguments.callee, 300); return;}
	f2 = f1.cloneNode(false);
	f2.src = 'http://youtube.com/blabla';
	f2.frameBorder = '0';
	f2.allowTransparency = 'yes';
	f2.scrolling = 'no';

	f1.parentNode.replaceChild(f2, f1);
}
})();
</script>

After correcting the f1.src (should be f2.src), tested and found in working order as well!

Boy, am I happy with this. Another reason why iframes are useful is that they are a fast & always effective remedy against z-index problems when multi-level menus have to go over flash or video elements or slide shows. Which are wanted more and more.