If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Before Starting A Website...

Hi,

I have good HTML knowledge and decent CSS but while learning I feel it would be more beneficial to code up a mock up website and learn whilst actually creating a dummy website...Basically before I begin I'm wondering is it best to use a template from photoshop (more than likely off the internet as i'm quite poor with photoshop) or is it best to just code up a mockup site with html and css?

I realise it would be very basic without javascript but would this be an ideal route to go down?

If it's a matter of free time:
Once you get a strong grasp of HTML and CSS, you should study HTML5 and CSS3.
You should know every browser number a property is supported in by heart and know the exact prefixes needed (-webkit, -moz, etc).
You should be able to solve any problem posted in this forum.

Don't waste time with a photoshop mockup lol... there is much to learn.
The best designs are thought out in your head and are tweaked as you make them happen, it probably won't come together on photoshop.

Find certain aspects you like on other website and keep a general goal in mind.

First of all, why are you making a difference between “HTML and CSS” and “HTML 5 and CSS 3”? Why not start to learn it all right away? The only thing to know is that HTML 5 and CSS 3 are partly experimental yet and some things shouldn’t be used yet or should only be used with care.

Secondly, regarding knowing “the exact prefixes needed (-webkit, -moz, etc)”: this is one of the things many newbies learn and do wrong. The first thing to learn is that these are experimental CSS properties that have been implemented to test certain features in a browser and are not supposed to be used on production sites. I saw people use them and then complain why they have to declare everything three or more times because they thought it would be normal to use these prefixed properties.
It is good and right to learn that these exist but it is not the first thing to learn when which prefix is “needed” because you are approaching the whole thing from the wrong side then.

Lastly, I think you know my opinion about SASS, LESS, and all that other crap already but just for the sake of completeness I’m gonna say it again, anway: I think all the programs, frameworks, and techniques you linked there are mostly useless and/or redundant. Nothing of this is actually needed to create websites and I’d even go as far as saying nothing of this is making a decent developer’s life substantially easier. All these ready-made programs are doing is add a lot of redundant bloat to your websites and/or computer. If you have a good editor with syntax highlighting, code completion, and maybe a snippets archive (I’m using Coda which has all that) you don’t need any of that crap to create websites quickly. And you also don’t need any boilerplate, bootstrap, or grid system nonsense if you know what you want and what you’re doing. After all, I think these so-called “aids” aren’t helping you in any way to learn the gist of a coding/programming language, you just plug something in or write an abstract command and it is doing everything automatically without you actually understanding what you do.

Now, that said, back on topic: aaronafc, if you really want to learn how to create a website then don’t take premade templates but rather create your own site from scratch. Of course it helps to look how others have done something (I’ve learned a lot by analyzing the source code of websites where I liked some feature) but by doing it yourself you find your own style of coding etc. while with using someone else’s code you might inherit some bad or wrong code without understanding what’s wrong.

You would, of course, create some wireframe or layout sketch beforehand and then convert that into an actually working website. A good goal could be to create a website for something that really exists, either just for you as exercise or for real (e. g. a local association or organization or whatever).

I was debating on whether to respond to this, but I felt uneasy seeing this left off.

Originally Posted by VIPStephan

First of all, why are you making a difference between “HTML and CSS” and “HTML 5 and CSS 3”? Why not start to learn it all right away?

I never said that. He said he already had a strong grasp of HTML and CSS, which I responded he probably doesn't know (or heard of) HTML5 (the semantic elements, though I never use them) and CSS3, in which has many useful obscure properties that are actually very useful such as background-clip and box-sizing. I can guarantee he knew neither of these. I suggested his "good knowledge" of HTML and CSS was not that great and if it was a matter of free time, he still has much to learn.

Originally Posted by VIPStephan

I saw people use them and then complain why they have to declare everything three or more times because they thought it would be normal to use these prefixed properties.

I will have to strongly disagree with this one, I use every CSS property freely on production sites. There are so many uses of even the properties that only have 50% browser support which are great for presentational things that degrade gracefully for older browsers. With SASS, I don't have to type every prefix, it automatically produces them in the final CSS file. But like I said, you should learn all the prefixes on your own before you should indulge in these luxuries.

Originally Posted by VIPStephan

It is good and right to learn that these exist but it is not the first thing to learn when which prefix is “needed” because you are approaching the whole thing from the wrong side then.

Nope, I never said it should be first or he should learn them separately. I said as a part of learning CSS3, he should have picked up each browser support and the prefixes by knowledge.

Originally Posted by VIPStephan

Lastly, I think you know my opinion about SASS, LESS, and all that other crap already

I see many uses for SASS that bring ease to coding, especially the automation of redundant prefixes and maintaining matching styles. The most annoying thing is having to string a bunch of things together to maintain a specific color across the site:

I've build so many websites in which had a specific color scheme and had to string over 20 ID/Class's for border-color, background, and font colors.

Like I said in my previous post, these are luxuries for people who already know them. As for the compilers, the automatic ability to compress CSS with different techniques such as expanded, compacted, or compressed accompanied with live reloading in codekit for $25 ($15 for fireapp and $0 for scoutapp) is a steal in my opinion. Having to de-compress then re-compress CSS for changes is unbearable. I am a firm believer in SASS.

aaronafc, if you really want to learn how to create a website then don’t take premade templates but rather create your own site from scratch. Of course it helps to look how others have done something (I’ve learned a lot by analyzing the source code of websites where I liked some feature) but by doing it yourself you find your own style of coding etc. while with using someone else’s code you might inherit some bad or wrong code without understanding what’s wrong.

Well said.

aaronoafc, another thing to bear in mind when learning is to consider the usability of a website. The classic text here is Steve Krug's book 'Don't Make Me Think' - getting quite old now but still as relevant as ever. Worth getting hold of a copy.

In an attempt to re-track the thread and additionally not step on anyone's toes...

Originally Posted by aaronoafc

Hi,

I have good HTML knowledge and decent CSS but while learning I feel it would be more beneficial to code up a mock up website and learn whilst actually creating a dummy website...

Great idea, practice practice practice. There is a reason for homework and doing seemingly the same assignment over and over again; it ingrains it into your skull.

Originally Posted by aaronoafc

Basically before I begin I'm wondering is it best to use a template from photoshop (more than likely off the internet as i'm quite poor with photoshop) or is it best to just code up a mockup site with html and css?

Re-code it by hand until you feel you know every in-and-out as Sammy was eluding to; practice makes perfect.

Originally Posted by aaronoafc

I realise it would be very basic without javascript but would this be an ideal route to go down?

Depends on whether or not you learn from it. If it makes things clear then yes, it is ideal. If you end up spending days running round in circles trying to figure it out all over again, then maybe coding is not ideal; either wayit will help you learn it.