
That Time I Made A Website - teddynsnoopy
http://www.tiffany-young.com/website_progress.html
======
jmduke
This is why I love programming -- and the programming community, warts and
all. Tiffany's an Environmental Science major who had a month of free time so
she decided to learn how to make web pages. That's the same way I started
(albeit as an English major), and the cocktail of instant feedback and ease of
discovery kept me as a happy addict of the command line ever since.

To me, accessibility and approachability are two of the most important tenets
of any discipline. I think it's important that we make sure there are more
Tiffanies and less stories of overharsh criticism (eg.
[http://harthur.wordpress.com/2013/01/24/771/](http://harthur.wordpress.com/2013/01/24/771/))

You might not think that everyone should learn how to program, and that's
okay, I agree with you -- but at the very least, I think people should have
the ability to learn what they want to learn, as ably and quickly as possible.

~~~
mb_72
Well .... making a website != programming.

Maybe it's because I'm old (41, starting programming on a TRS-80 in the early
80s), but I'm astonished sometimes at how much fuss is made over such
relatively minor achievements. This is lowering the bar on what stories are
'interesting', and - honestly - turns me off coming to HN because of the (for
me) lower signal : noise ratio.

And I disagree that accessibility is so important. Hard stuff is hard, and
takes time and effort to work out. To provide a counter and parallel example -
these days anyone can download some software and produce 'music' on their
computer, and the ease of doing this means that a whole pile of rubbish is
produced, some of which people actually believe is worthy of sale. People who
are talented and capable will always find a way; conversely, I don't think
it's a bad thing that people who are less talented and less capable give up,
and find something else they are better at and have more fun doing.

~~~
lsc
>Well .... making a website != programming.

Oh man, I remember when everyone looked down on web programmers and PHP
monkeys. Hah. (I also did my much of my early programming on a trs-80, but
mine was an obsolete tandy model 100 that I brought to school in the mid-90s,
mostly to automate the 'guess and check' rote math homework.)

It used to be that there was a strong hierarchy. I know in the '90s and the
first half of the '00s, you had the "real programmers" \- the embedded and
systems programmers... then the sysadmins, then your web programmers, then
your web "designers" \- with respect scaling in the obvious direction.

But, I think, this has shifted, especially in the HN world, where VC is very
influential. The web programmers are now the 'serious programmers' \- the
valuable commodities, with designers also being fairly important. My people,
the sysadmins are largely considered surplus population, and what you would
have called 'real programmers' are now irrelevant old fogies that sometimes
have interesting things to say.

(the question that looms in my mind is this: Will the construction of online
CRUD apps be automated the same way that the construction of native CRUD apps
were automated in the '90s? Will we have 'visual FoxPro' for the web? I mean,
my stepfather, a long time user of such programs has shown me some of the
rudimentary dot-net stuff... but it's not all the way there, as far as I can
see, when it comes to whipping up a webapp as simply and easily as it whips up
a native app.)

>This is lowering the bar on what stories are 'interesting', and - honestly -
turns me off coming to HN because of the (for me) lower signal : noise ratio.

See, I've always thought of HN as a site more focused on the business side
than the technical side. I mean, we do have some interesting technical
articles, but ycombinator is about making money, and a lot of that is raising
money. (my impression is that being young and goodlooking is an important part
of raising money right now, but what do I know? I have yet to seriously
attempt raising money.)

From the business perspective? learning how to, you know, use computers is
pretty important and interesting.

>conversely, I don't think it's a bad thing that people who are less talented
and less capable give up, and find something else they are better at and have
more fun doing.

See, I kindof disagree. Sortof. in a way. You see, I think using computers is
a bit like literacy. We all can't be Shakespeare, but even if you only get to
'spot is on the rug' well, you are way better off than otherwise.

Personally, I think that really basic programming should be taught in schools
the way reading and writing is. Sure, most people aren't very good, but we put
a hell of a lot of effort into getting folks to the 'spot is on the rug'
level, and I think that most people would be better off if they, say, knew how
to make a loop and an 'if' statement in basic.

I mean, certainly, most people can't be specialist programmers. But look at
those CRUD app creators in the '90s, like FoxPro. Your ability to understand
business processes was just as important, if not more important than your
programming ability. We have the ability to make simple programming languages.
We have the compute power to be able to run extremely inefficient code at
reasonable speeds. Knowing just a little can help a whole lot.

~~~
potatolicious
> _" Will we have 'visual FoxPro' for the web?"_

IMO we've already seen the automation of web-CRUD. It used to be a _lot_ of
work to set up even a simple CRUD app on the web, now a brain-dead simple CRUD
app is 15 minutes in skilled hands.

This differs from Visual FoxPro substantially. Our jobs are being automated,
but instead of automating into the hands of an army of lay users, it's
automating into the hands of a few skilled practitioners.

The productivity of the modern web programmer is at least an order of
magnitude beyond where we were 10 years ago. What used to take a veritable
army of CS majors takes 3 people and a fridge full of Red Bull.

Our tools and processes are getting better every day. So far "stuff that needs
to be done" seems to be outpacing "increasing efficiency per programmer", but
I doubt that will hold true forever.

~~~
lsc
>IMO we've already seen the automation of web-CRUD. It used to be a lot of
work to set up even a simple CRUD app on the web, now a brain-dead simple CRUD
app is 15 minutes in skilled hands.

hm. so what tools would a skilled developer use to, say, write a simple
invoicing system in 15 minutes?

~~~
klibertp
Most would most likely use only one essential tool: google. Finding, for
example, this:
[https://www.djangopackages.com/grids/g/ecommerce/](https://www.djangopackages.com/grids/g/ecommerce/)

------
econnors
If I were an employer, I would be more impressed with the way the author
responded to feedback/criticism and was able to improve her site on future
iterations more so than I'd be impressed with the site itself (although it
looks great).

~~~
robbyking
I immediately thought that, too. I've worked with junior developers who,
instead of learning from their mistakes, were defensive in code reviews and
never took time to learn from their mistakes.

~~~
rjbwork
I'm 3ish months into my first post-graduation development job. It's really
hard to go from school, where results counted, to an internship, where there
was far more emphasis on getting shit done than how it was done (enterprise
back office systems) to a professional software development job on a fully
functional profitable web app.

It's not so much that the skillset that's required is different, though that's
certainly part of it, it's that us junior devs are simply not used to having
our code scrutinized very much. Sure, we've done some pair programming and
group projects, but that was with other inexperienced undergrad/grad students,
and it was difficult to just say "this code sucks, do it over" to an equal,
just as much as it was difficult to hear that.

It's simply a mindset that is hard to break out of. A lot of us, myself
included, were not ready for the reality that is a code review. I've gotten a
lot more used to it, and I'm settling nicely into my role I think. Until now
my mindset has been "make it work". I'm now transitioning to "make it work
well. It's still hard to have to defend your code or methodology, or worse
yet, during code review have the sudden realization that it is indefensible.

~~~
klibertp
> or worse yet, during code review have the sudden realization that it is
> indefensible.

When all else - I mean google and more importantly talking with colleagues
during breaks about what you're doing - to make you realize this is the point
of code reviews. And it's good - after that realization you suddenly have one
more known mistake under your belt which you won't make in future.

When I was young I practiced kendo. One of the things I learned then was that
when a partner hits you, he's actually helping you realize your technique has
a flaw. That's how you grow as a swordsman - and as a developer too.

~~~
rjbwork
>when a partner hits you, he's actually helping you realize your technique has
a flaw

I really like that viewpoint. It's very zen. Thanks for the discussion!

------
wiml
"Nobody has time for my fancy "overflow: scroll;" in a 600 x 600px box"

Seriously, with this one insight the author is ahead of a good third of the
professional web designers out there.

------
teddynsnoopy
Hi everyone, sorry it went down for a few minutes. I was hosting it on Dropbox
but turns out that's not a good idea for HN traffic, so I switched to using a
copy of it. Thanks for reading :)

~~~
bender80
Looks like your website is mostly static. Look into hosting using github pages
which is free. Nice progress by the way.

~~~
simantel
Or Neocities!

------
nicklovescode
Wohoo I can sleep well again. Looking pretty good Tiffany!

~~~
tentacle
Like what do you actually mean?

~~~
nicklovescode
Maybe a public forum wasn't the best place for a comment meant specifically
for the author. I'm the person who criticized the <center>.

~~~
philangist
I know hacker news is going to kill me for asking this, but what's wrong with
center?

~~~
NoodleIncident
I'll bite.

The idiomatic way to create webpages, in this day and age, is to try to
separate content of a page from how the browser presents it.

HTML is for the content and structure of a page. CSS is for controlling how
it's displayed. The <center> tag is an HTML tag that only exists to control
how a page is displayed.

In case you're wondering what to use instead, adding 'margin: auto;' as a css
rule will do the trick.

~~~
throwit1979
_The idiomatic way to create webpages, in this day and age, is to try to
separate content of a page from how the browser presents it._

Which is why "modern" frameworks like bootstrap still encourage grid layouts
using explicit width classes like span3?

Face it, we haven't gotten any better since Mosaic.

------
nkuttler
Not bad. First design revision looks like back when css round corners and
opacity became usable. Next one looks like the usual "I'm a designer" design.
The grey one reminds me of Yahoo's early days when grey backgrounds were
popular. The the last one is minimal and clean, so rather modern. Not a big
fan of this particular green though.

I think it's great when people work with the feedback they get and decide to
act on it.

I have to admit though I was a little surprised this post was about simple
frontend design/HTML/CSS, I was expecting something more... techy.

------
bifrost
> My first reaction was "WHO RIGHT CLICKED 'VIEW PAGE SOURCE'??? WHO DOES
> THAT???"

People with too much time on their hands I guess. There's a phenomenon (that I
subscribe to) that includes helping people by pointing out mistakes (since
humans learn by making mistakes) but often not providing guidance. Not
providing guidance forces the person who made the mistake, to think about it
and then fix it in their own way.

Its not the kindest form of helping, but its pretty darn effective.

~~~
michaelbuddy
if I run across a website, I'm not looking for source. But if a friend of mine
was showing off her site specifically with a facebook post and I looked at it,
I would absolutely look at the source to see what direction of knowledge they
appeared to have picked up. Not hoping to complain of mistakes but just
curious about a fellow web dez/dev.

------
tentacle
If this site was made by a male you wouldn't even see it on the front page of
HN. (=ｘェｘ=)

~~~
0X1A
I recently got to learning CSS, HTML and launched my own website using
bootstrap that I host at home on a rinky dink Thinkpad X40. Would anyone be
interested in seeing that? I'm a male though, so probably not huh? Also
running an instance of gitlab, wordpress, owncloud and I had no prior
knowledge of how apache worked about a month and a half ago.

~~~
KirinDave
I suspect a lot of people here would be interested in reading about your
learning process. What they are not interested in is a post in which you try
and say, "I am so awesome look at all I did."

Voyeuristic tendencies aside, a lot of experienced programmers find that stuff
refreshing. Less experienced programmers often find inspiration to try new
things.

------
NKCSS
A lovely read, but I must say, that last line gave me a little adrenaline
rush.

What seemed like a first timer progressing, giving you the ahh, how cute (like
a cat video), all ended for me on the last line, where she addressed me with
my first name.

I immediately assumed it was someone who had used a facebook/google 0-day to
get profile information and show off at the end, hitting you while you were at
ease, reading this lovely progression... until I continued to read and figured
she just had a friend called Nick :P Guess I'm to paranoid for the internet :)

------
HipstaJules
Well, I made my first site in those days too and I know how you feel! It's
really a joy when you make your first one and I know the pain that you feel
when you are at the beginning!

------
C1D
I don't understand the problem with the <center> tag. It does the job and even
though its deprecated its a long way away from being unsupported.

~~~
nicklovescode
"The issue is not that it is "bad". It a matter of separation of concerns.
This tag is intended to be used for presentation only. It has no other
semantic meaning.

Since the move is to have presentation handled by CSS and HTML should only be
used for semantic markup, the tag has been deprecated."

[http://stackoverflow.com/questions/4873491/what-is-so-bad-
ab...](http://stackoverflow.com/questions/4873491/what-is-so-bad-about-the-
center-tag)

~~~
MatthewPhillips
In practice <em> and <strong> are only used for presentation.

~~~
jjjjjosh
<em> and <strong> also have meaning. If I put some text in an <em> tag, it's
because I want it to have emphasis, no?

------
KirinDave
Am I the only person who wished she had kept the patterned background? I
thought it was profoundly refreshing after years and years of smooth and flat
design.

The thing is, finely textured backgrounds have been slowly creeping back into
the web design world for some time now after the collapse of the organic noise
craze touched off by Apple's popularization of the linen background. It's time
for some coarse patterns!

------
aj700
I feel like my personal site should reject all current web design practice and
just have Times with the occasional {h1} black on #ccc with #00f links. You'll
never come up to the standard people expect in this world of ajax, tumblr and
css3, so why not just do it CERN and Netscape style?

Dark green on yellow is actually the easiest to read, but that's garish.

------
nnq
> For about 15 minutes, I thought about keeping it the way it was since it was
> practical and straightforward, but I couldn't. Every time I looked at it I
> felt the urge to throw my computer out the window cause it was so UGLY.

Sad to see another soul giving in to the temptation of "over-designing"
things. For fuck's sake, what's wrong with light text on a white/gray
backgrounds? She could've tweaked the fonts, spacing and colors a bit, but
people no longer do that these days, instead she went full steam and
_overdesigned_ the shit out of it and it still looks bad.

...she could've learn a bit of Javascript and called herself a programmer
instead of masturbating with CSS and posting about it on Facebook.

If you're not a designer, don't overdo design because you're not gonna do it
well! If you are a designer, just stop when it looks "good enough" and start
working on something more interesting than a bloody website design! We're
wasting waaay too much of our lives "designing" stuff, whether it's our garden
or a blog, instead of actually _putting things and information in order_ (no,
just "search" is no good enough though I guess some day I'll be able to google
for my keys) or actually _building cool new things!_

------
DaemonXI
Does anyone know of that Adobe post and JS script to equalize the line length
of text for aesthetic purposes? I remember if one line was full div width and
the next line was only a couple words, it would insert line breaks to try to
make both lines closer in width to one another.

------
adamors
I highly recommend you check out Bootstrap[0], especially since their recently
released version is mobile first.

[0] [http://getbootstrap.com/getting-
started/](http://getbootstrap.com/getting-started/)

~~~
eCa
No, please don't.

This is about learning. Going through evolution of design from the ground up.
Getting that joy that only comes when you do View Source and every single line
is written by you.

~~~
apricot13
Seconded, there should be a rule that says you must have tried to make
everything included in bootstrap at least once yourself before your allowed to
use it. Otherwise how will you learn? That way when you do use it you'll have
the knowledge to use it properly (and hopefully within moderation) well and
you'll appreciate how much easier it makes life that much more!

~~~
yogo
The same can apply to all frameworks and libraries, both front and back end.

~~~
qu4z-2
I'd go so far as to say that after a certain level of experience, everyone
should implement a compiler/interpreter. Automation is awesome, but it's
better not to treat them as "magic".

------
dylnclrk
Great work iterating! Keep it up.

You might consider changing your banner's background color to something more
"minty" like #45E488. It seems more you _.

_ As someone who has never met you, I feel 100% qualified to say this.

------
arpstick
It's a nice site for a non programmer although the font hurts my eyes a bit.
Her server host must be thrilled now that her site probably overloaded their
box with requests.

~~~
teddynsnoopy
Thanks for the feedback! I was having a bit of a debate with myself on whether
or not I should keep the font, since the punctuation kind of bugs me, so I'll
definitely look into that.

~~~
goblinfoblin
Remember that OSX makes fonts a lot thicker so this font looks insanely thin
on other OSs. I'm on linux with ubuntu font rendering which is somewhat
thicker than windows and it looks to thin to me.

Usually this means that it will look impossibly thin on Windows.

Raleway medium would look better, or you could look at some other fonts like
Lato
[http://www.google.com/fonts/specimen/Lato](http://www.google.com/fonts/specimen/Lato)

~~~
teddynsnoopy
Wow, I had absolutely no idea. I'm on a Macbook so I'll definitely be more
mindful of that from now on. Thanks so much, this is super helpful. And thanks
for the suggestion!

------
Raphmedia
I absolutely love that post. It shows what we forget. I love the naive view on
web design. The end products works good enough.

------
Killah911
Apparently not a scalable site which can handle traffic spikes due to HN post
:-(

------
cpursley
Awesome. Looks great.

I just went through the codecademy HTML/CSS course not expecting much and came
out with a bunch of new knowledge.

------
nilpath
nicely done!

