Tell HN: I let my 6-year-old daughter design my website

923 points by kbst ↗ HN
We had some free time during the Chinese New Year vacation (we live in Taiwan). So I thought it would be fun to work with my daughter on a little web project.

She did all the drawings. I digitized them and added them to the page as inline SVGs. Then I wrote the code. Nothing fancy — it's just one HTML page with a few links. But I like the end result (yes, I'm 100% biased): https://kevin.tw

Fun technical facts: the page is entirely self-contained (except the favicon). It doesn't have any JavaScript at all. And it weighs 35Kb total (52Kb if you include the favicon).

189 comments

[ 4.1 ms ] story [ 252 ms ] thread
It looks good, i'd say it's not biased!

Practical: no "actual" portfolio except 2 links/why do you want people to visit the site?

Not everyone likes going to LinkedIn to see more about you, since it automatically tracks the visitors.

> Practical: no "actual" portfolio except 2 links/why do you want people to visit the site?

Not OP, but I hate having to update multiple sources when I update my portfolio. I jumped through some hoops to get around that and I'm still not content with my setup. Not sure if that's the reason OP didn't put his resume on his site, but if it is, I sympathize.

Why would you need to constantly update things? Just give a brief description of yourselve ( eg. like an intro on github). Or give a couple of examples of a portfolio ( doesn't need to be up to date)

They can see employment details on Linkedin, if they are curious.

That's a great idea and it turned out way better than the headline made me fear. You keep the spirit of her drawings but present it in a really creative way.

I also like the no-bs approach on the technical side. This is indeed a page that does not need a single line of Javascript and it's a testament to what you can do with most basic web technology. I hope this lightness will have its big comeback someday.

Yeah I was not expecting to like this as much as I do
The design looks great, and behaves good on smaller width screens. However, the site breaks a bit when you have a smaller height screen. Maybe thats something you could fix :)
Great! I was like that and this will help her A LOT.

Save this website for later Maybe it could become a NFT haha

Yep! Just as soon as, like my parents used to say, "you become very rich and famous and buy your dear old parents lots of nice things".
This is cool! Constructive critique: Maybe add some text labels for a11y? From a cursory glance in dev tools it seems a little confusing, looking at the heading and some of the illustrations.
Awesome. I like the style :)
> the page is entirely self-contained (except the favicon)

I have made a self contained page as well a few days ago. This is oddly satisfying. I use pixel art to make the illustrations (it's all CSS though).

If you want to take a look at it : https://drdru.github.io/pixel_art_book/pixel-art(1).html

Pixelart images?? You sir have too much free time on your hands

Love the outcome though

I was wondering why the zoom was all wrong and I had to zoom out 2 steps. Turns out thats what happens when you use 125% ui scaling in windows 10.
I also like self contained pages, especially how they simplify long term maintenance.

For images I do a different hack, I encode images to base64 and embed them via CSS `background: url('data:image/jpeg;base64,/...')`, or img src. The base64 encoding is not very efficient though, so I wouldn't do this for larger images.

Example: https://merely.xyz (page background has a subtle "concrete" pattern).

I’ve been working on something similar - embedding pixel art as ASCII with some JavaScript to render it as images:

https://memalign.github.io/m/pceimage/index.html

Oh nice! Love that you color the characters in the editor appropriately as well, that makes working with it a lot easier. Would it be possible to have space be #00000000 by default?
Thanks for trying this out! That’s a good idea! For now, you can manually specify “ :#00000000” in the top section.

One reason I’ve been using “.” as the background in my own PCEImages so far is so it’s easy to see that all the lines are the right width.

Excuse my ignorance. What does self-contained mean? I've seen a lot of people mentioning it but haven't been able to find a good source to read from and learn more about
That it's only the HTML file, no external files (CSS, JS, images, ...) loaded/needed.
Got it. Thanks!
Very nice site. Kudos to your daughter :)
Heartwarming and awesome!
Wasn't it possible to do some antialiasing for Firefox? So painful to look at these stairs instead of good old lined pages from notebooks. And only two holes in the page which meant to be a spring notebook is kind of lame. And afaik margins and holes for spring are on different sides of a sheet. And of course it looks sooo ugly on vertical ultrawide because of noticeable incline of buttons (on usual monitor they are not) and the insane height of a notebook page. BTW it will be interesting to see the design of new (also clickable) arrows gathered in stack when this page will contain more links to your works (now it is progressier.com and coronavirus.app and they are not stacking until some third work will appear). So, your daughter has done a great job but you still have some space to grow.
Firefox has always done a spectacularly bad job of thin and especially thin slight-angled gradients. I’m not sure quite why they allow it to remain so bad. I wish they would fix it—but my wish is nowhere near great enough to try to figure out how to fix it myself, which would doubtless be an arduous journey.
Why am I downvoted so heavily? I tested the website in two computers and have payed my attention to any element in dev console, then wrote down all the issues I have found. If I was rude or something, why not just to tell me?
The community guidelines are a pretty good start. If I were to take a guess, your comment came off as more of a complaint than constructive feedback. Your point may have been valid, but the delivery was just “off”.
(comment deleted)
Was it necessary to say "of course it looks sooo ugly" before delivering your feedback? This sort of phrasing isn't constructive, and taints the rest of your message.

When I was younger, I thought it was enough that I was speaking the truth, even if I phrased things harshly. I'd think to myself "they should listen to what I have to say, because I'm correct. If they don't like how I phrased it, that's their problem." Unfortunately, humans aren't robots. If you're going to deliver harsh feedback, it's important to do it in a way where the other person is likely to accept the message you're trying to communicate. Otherwise, you may as well have not sent any message at all.

I like it a lot! Looks great on a 4k screen.

Perhaps the next logical step would be to move the blog over at medium to your site.

See also: https://www.lilywise.com/

(JeffTK's daughter, he comments around here sometimes)

reminds me of geocities
Nah. Needs more animated "under construction" GIFs, a hit counter, and maybe a guest book... lol.

In all seriousness, yeah, I agree. It would be an excellent design if the text were more readable. There's not much contrast between the text color and background image.

Edit: Hey, @jefftk, here's a before and after of a tiny tweak I did to Lilly's page to increase readability: https://imgur.com/a/AEAc4pk

All I did was add

    text-shadow: 1px 1px 1px lightgrey;
to the html element style. Maybe you can suggest she and her sister make a similar change? :)
Thanks! I showed it to her when she came home from school, and she decided she liked it, so I've made the change.

(She also updated the picture)

My fave section on this is “Birthdays I’ve Been To”
The Bad Day - "I didn't like today, and also it was super bad."

Simple and to the point. I love it.

It's great! Lacks nothing.

On a related note: I friend of mine once said that an architect (the kind that design buildings) shouldn't be allowed to be older than eight. Still feels like a low-hanging fruit to make the world better.

The website looks great! It has a really nice feel to it.

It makes me want to see more pages designed by kids, but at some point I think there might be an issue of child labor.

The design feels unique and genuine

And it does all that without requesting untrusted third party JS? Amazing! Have my upvote.
So good! Websites rarely have personalities any more.
I couldn't draw/write that neat until I was probably twice that age.

Nicely done

Looks nice!

In landscape mode on chrome/android, the footer overlaps the main part of the page.

Landscape on iOS, you can’t even see the header nor can you scroll it.

Given the web today, I wonder is anyone still turns their phone. I hold a phone in landscape sometimes, and see 14px of content, a header, a huge cookie choices bar (scroll to see the “decline cookies” button, which leads to a maze of twisty toggles all alike), and an advertising bar at the bottom with a teeny tiny X. Even broken this site’s design is better.

Nice!

Did the same kind of thing a few years ago. When my kids were in to tower defense games.

https://pettersson.casa/td2/

haha the crayon styling is great, care to share any implementation details?
Thanks, courtesy of my kids 8 years ago. =)

The implementation is nothing fancy at all. The graphics is done with PixiJS, and there is a sprinkle of jQuery and TweenMax for the movement.

Came for copper i found gold. got a nice inspiration by seeing this website
She's a better web designer than I was at 6!

Did she design it as a website? It's interesting that she went with drawings/a piece of paper as the default presentation. (Assuming that was her decision).

She's a better web designer than I am at age 37 ;-)
She's 6. Of course she didn't. She drew it on paper and then he made a website that looks like something a 6 year old drew on paper.
Sure. I mean, she's 6. The point is that she contributed to it, the point is she collaborated with dad to make a website, just like my 4 year old daughter contributes in the kitchen, 'helping'. Its 'helping' because its helping in spirit. It would be more productive if she didn't help, but then she wouldn't learn from it. Which is the point of this: learning by doing (and its good for the dad-daughter connection). I love the concept (before result), I also love the end result. Well done, daughter & dad. Inspiring (not that I'm into web design, so perhaps rather: encouraging) <3

To draw a parallel: I got skates for my birthday. I got nothing with skating, I will probably dislike it. I haven't used them yet. But I will. And then my daughter will see how I learn it, and guess what? We already bought her skates as well. If she's anything like me (and she is, given she was late walker and finds playground scary), she's gonna find it difficult. But if she overcomes it, she's gonna love it (like I had with running, hiking, swimming). We'll also go to the swimming pool together. We already got 3 bicycles for different stages in her life, also for her brother (she used the walking one already). Its just that she's occupied with a different goal right now (just turned 4, getting out of diapers, going to school, plus we had the Covid pandemic), so I was & am procrastinating.

It could be that the kids artwork is cuter than her dads artwork.
I had a website that was up when I was 6 that an adult had never touched. It was shit, but it existed, and I understood the difference between 'designing' for paper (I also liked drawing) and a website.

I thought it was interesting because when I was 6, it was 1994 and the Web was very different from analogue information, presentation wise, and so I never really tried combining my artistic skills and my Web skills, but now the Web is full of images + videos and everybody knows that using neon text/backgrounds aren't a great idea just because we're not using ink.

So a kid's conception of what can go on a website now is completely different and I thought that was neat. Makes me wonder what a 6 year old designing a website will look like in 2052.

OT: How is the tech scene in Taiwan?

My wife is from Taiwan. Every time we visit I am very sad to leave. We have thought about moving to Taipei.

Also interested in this and also very sad every time we need to leave Taiwan! I've always liked the idea of moving to Taipei though the summer weather does dampen my enthusiasm :D