19 ms·
That Time I Made A Website
- Killah911 13y agoApparently not a scalable site which can handle traffic spikes due to HN post :-(
- nilpath 13y agonicely done!
- arpstick 13y agoIt'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 13y agoThanks 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 13y agoRemember 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 13y agoWow, 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!
- kunil 13y agoI am also on ubuntu & firefox and font is almost only anti-alias for me, not even 1 px wide. I can't imagine Windows if it is thinner
- teddynsnoopy 13y agoHi 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 :)
- runn1ng 13y agoIt's a great site for a beginner! (altough I am not sure if it deserves such a high spot on HN) It's definitely a big step up from this - http://www.tiffany-young.com/gexpro.html http://www.tiffany-young.com/gexpro.html :)
- bender80 13y agoLooks like your website is mostly static. Look into hosting using github pages which is free. Nice progress by the way.
- simantel 13y agoOr Neocities!
- smarx 13y agoMight I interest you in Site44? (I'm a founder.) www.site44.com
- unreal37 13y agoIf you're going to shill, at least you should offer her free hosting.
- logn 13y agoYour production support and quick action might be more impressive than anything else! Nice
- computeloops 13y agoYou can use services like CloudFlare.
- nkuttler 13y agoNot 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.
- deleted 13y ago[deleted]
- tentacle 13y agoIf this site was made by a male you wouldn't even see it on the front page of HN. (=ｘェｘ=)
- bsaul 13y agounless it's a 6 years old. Which says a lot about how sexism works both ways :)
- orng 13y agoI really disagree. It isn't about the site. It's about the post, which happens to be well written and informative.
- tentacle 13y agoAre you being sarcastic?
- 0X1A 13y agoI 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.
- reinmen 13y agocool story, bro!
- KirinDave 13y agoI 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.
- aroman 13y ago
- C1D 13y agoI 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 13y ago"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-about-the-center-tag http://stackoverflow.com/questions/4873491/what-is-so-bad-ab...
- C1D 13y agoThanks for that. I thought it lagged more than inline center.
- MatthewPhillips 13y agoIn practice <em> and <strong> are only used for presentation.
- jjjjjosh 13y ago<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?
- jfarmer 13y agoThere's a few things worth responding to in your comment, some technical and non-technical, but both important for beginners to keep in mind. I assume you know most of what I'm going to say, so I'm pretending a student asked this. So, what's the problem with the <center> tag? First, at the purely technical level, <center> was deprecated in HTML4.01 and is not part of HTML5 at all. As far as I know browsers will still render it fine, but it's technically not valid HTML5. Second, <center> was deprecated along with other tags like <font>, <blink>, <big>, and <strike> because of a popular movement in the late 90s to encapsulate the logical and semantic structure of the document in HTML and the display structure in CSS. So, there's a case to me made for not using it as a Best Practice™, irrespective of the technical details about what browsers do or don't do, whether it's deprecated or not, etc. Third, other people take your code as a reflection of what was going on inside your head when you wrote it. Your HTML and other code exists in a cultural milieu whether you like it or not. Potential employers will certainly read these sorts of things into your code, so if you care about that then you should care about what they'll think when they see you using the <center> tag. In sociolinguistics there's an idea of the "prestige" of a dialect. For example, in the US, someone speaking Received Pronunciation (http://www.youtube.com/watch?v=bIemPxHSb6Q&t=6m28s http://www.youtube.com/watch?v=bIemPxHSb6Q&t=6m28s) will be perceived as more educated and worldly while something speaking with a thick Appalachian accent (http://www.youtube.com/watch?v=03iwAY4KlIU http://www.youtube.com/watch?v=03iwAY4KlIU) might be perceived as a hillbilly. It's relative to both the listener and the speaker, of course, so someone might think someone with an RP accent is a snob or find solidarity in in a shared-but-low-prestige identity (cf. http://www.youtube.com/watch?v=d7CzHFWsXQQ http://www.youtube.com/watch?v=d7CzHFWsXQQ). The <center> tag is a marker for a low prestige dialect of HTML authorship. The fact that the OP got mildly reprimanded for using it is actually a sign of that. Folks will take its use as a sign that the author is an amateur and doesn't know that much about HTML. And if she were to use a <font> tag, oh buddy -- let slip the dogs of war! This isn't inherently true, of course. If I sat down and wrote some HTML using center tags I wouldn't suddenly know less about HTML, but that's the default presumption. This might not seem fair, but be honest: what would be your default, automatic reaction to someone using the <blink> or <marquee> tags non-ironically? Like someone moving to a foreign country for the first time, you'll pay a price if you don't understand the parameters of the culture in which you've decided to participate. Even if you disagree with the "cultural" conclusions, e.g., you think <center> is fine in certain situations, you should have an idea of how other folks might take it. Otherwise you'll be surprised, confused, and perhaps a little hurt when folks push back.
- adamors 13y agoI 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/
- GhostHardware 13y agoFrom what I understand ZUBR's Foundation is also one of the top front-end mobile first frameworks: http://foundation.zurb.com/ http://foundation.zurb.com/
- eCa 13y agoNo, 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.
- HipstaJules 13y agoyes please! It's so good to modify and adapt bootstrap on your website and read good styled css!
- apricot13 13y agoSeconded, 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!
- nicklovescode 13y agoWohoo I can sleep well again. Looking pretty good Tiffany!
- tentacle 13y agoLike what do you actually mean?
- nicklovescode 13y agoMaybe 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 13y agoI know hacker news is going to kill me for asking this, but what's wrong with center?
- NoodleIncident 13y agoI'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 13y agoThe 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.
- opminion 13y ago
- econnors 13y agoIf 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 13y agoI 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.
- trimbo 13y agoI've worked with all levels of developers who do that.
- GuiA 13y agoI've been with senior developers who, in code reviews, made a point of bringing down the junior devs and flogging them over some minor mistakes they made instead of fostering a learning environment :)
- rjbwork 13y agoI'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.
- deleted 13y ago[deleted]
- deleted 13y ago[deleted]
- jmduke 13y agoThis 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 13y agoWell .... 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.
- bliti 13y agoThe great wall of China started as one measly block. Do we undermine the effort of the labourers that pushed it into place? It is just one rock. Not worthy of any praise. But we may be missing the bigger picture. What you call a minor achievement is in reality a big step towards becoming a programmer. The biggest block to programming is being courageous enough to dig into the source code. Be it markup, or else. Who are we to criticize the achievements of others? When in reality we walked down the same path. Do you not remember the first time you were able to print your name to the terminal prompt? I do. It was 1984. I got the same jolly feeling when I did it with Javascript, back in the year 2000. Who knows if the OP will turn out to be a great programmer?
- cpursley 13y agoAwesome. Looks great. I just went through the codecademy HTML/CSS course not expecting much and came out with a bunch of new knowledge.
- deleted 13y ago[deleted]
- aroman 13y agoBecause people voted for it. Seriously, what kind of explanation are you looking for? It's a short chronicle of trial and error and growth, which is certainly consistent with the hacker ethos. And it's on a technical situation which undoubtedly many of us have been in. I really don't understand why people feel the need to leave comments like this. If you didn't find it interesting, don't upvote it. Not everything on here needs to suit your definition of worthy.
- HipstaJules 13y agoWell, 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!
- Raphmedia 13y agoI absolutely love that post. It shows what we forget. I love the naive view on web design. The end products works good enough.
- bifrost 13y ago> 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.
- deleted 13y ago[deleted]
- michaelbuddy 13y agoif 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.
- wiml 13y ago"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.
- deleted 13y ago[deleted]
- KirinDave 13y agoAm 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!
- dylnclrk 13y agoGreat 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.
- aj700 13y agoI 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 13y ago> 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!
- NKCSS 13y agoA 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 :)
- DaemonXI 13y agoDoes 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.