208 lines
7.8 KiB
Plaintext
208 lines
7.8 KiB
Plaintext
[1] My name is Brad Frost
|
||
|
||
• [2]Work
|
||
• [3]Training
|
||
• [4]Book
|
||
• [5]Blog
|
||
• [6]Contact
|
||
|
||
Ella’s First Website
|
||
|
||
ULTRA PROUD DAD MOMENT: Ella made her first website!
|
||
|
||
Melissa and I woke up on Saturday morning to our goofy 6-year-old daughter
|
||
entering our bedroom making this obnoxious sound. It was impressively annoying,
|
||
especially considering she hasn’t seen [7]Dumb and Dumber yet. She truly is her
|
||
father’s daughter.
|
||
|
||
After we were done laughing, we recorded her and cracked ourselves up listening
|
||
to the playback. We joked that it would make for a really effective alarm
|
||
clock.
|
||
|
||
“We should make one!” I said.
|
||
|
||
Her face lit up.
|
||
|
||
“Yeah, we can make a little website that loops the sound. It’ll be funny.”
|
||
|
||
I brought my laptop to breakfast and I fired up my trusty, faithful, incredible
|
||
friend [8]Codepen. I insisted that Ella drive.
|
||
|
||
Ella on Brad's laptop sitting at the breakfast table
|
||
|
||
I decided to start her with one of the most magical, visceral aspects of
|
||
front-end development: changing the body‘s background-color.
|
||
|
||
Just look at that reaction as soon as the web page’s canvas changed colors:
|
||
|
||
Ella reacting to the browser window change from white to green when she entered
|
||
the appropriate CSS code.
|
||
|
||
Surprise. Wonder. Happiness. Pride. Satisfaction. You can see the gears
|
||
turning.
|
||
|
||
We continued on our journey. Like most kids her age, she is learning to spell
|
||
and isn’t used to typing on a keyboard. On the back of an envelope, I wrote
|
||
some of the words and syntax down for her to transcribe:
|
||
|
||
A zoom in of my writing code on the back of an envelope
|
||
|
||
She diligently followed instructions, and though it required patience (she
|
||
definitely started losing focus over time!) we kept at it. I said we needed
|
||
picture of her that would be part of the alarm clock website. We took the photo
|
||
and turned our attention to the next magic trick: replacing the background with
|
||
her goofy face. She truly is her father’s daughter.
|
||
|
||
I had to intervene a bit here to open up [9]Codepen’s super helpful assets
|
||
feature to get the image online. But! I taught her how to use the trackpad, as
|
||
well as copy and paste keyboard commands. It took a second and some fiddling
|
||
around with the [10]background-size value, but we got her goofy mug onto the
|
||
website:
|
||
|
||
From there, we turned our attention to the HTML panel to add the [11]audio tag.
|
||
That was a little tougher, especially since her patience was wearing thin. But
|
||
I was able to explain that writing [12]loop would make the sound repeat
|
||
forever, which she thought was funny. I also explained that autoplay would make
|
||
it start playing immediately, but I learned autoplay (rightly) [13]blocked by
|
||
default to prevent, say, an annoying sound to loop for infinity.
|
||
|
||
After a little bit more finessing and me getting the audio asset in there, she
|
||
had her finished website!
|
||
|
||
So here it is: Ella’s [14]funny annoying alarm clock website!
|
||
|
||
See the Pen [15] funny annoying alarm clock by Brad Frost ([16]@bradfrost) on
|
||
[17]CodePen.
|
||
|
||
She had a great initial reaction, and I think hearing her annoying sound come
|
||
from a totally different machine didn’t really compute to her. And while her
|
||
patience was understandably spent, she enjoyed the results.
|
||
|
||
There is a lot I could say here. That this is a beautiful reminder of the
|
||
absolute magic that is web design and development. That a beginner’s mind can
|
||
change your perspective. That the declarative and human-readable languages of
|
||
CSS and HTML help make coding less intimidating. That we could continue to
|
||
improve the website and add new features. That accessible tools that help
|
||
people learn web development are incredible.
|
||
|
||
I could go on about all of these things, but I won’t. Instead I will say that I
|
||
am so incredibly proud of Ella. I am lucky to be the dad of such a smart,
|
||
creative, hilarious, curious, and yes obnoxious girl. I hope this is but one of
|
||
many many many many many many creations that leave her head and make their way
|
||
out into the world. I love you so much, Ella.
|
||
|
||
And yes, I woke her up for school today with her alarm clock.
|
||
|
||
Posted by [18]Brad Frost on [19]27 Nov, 2024
|
||
|
||
Tags: [20]codepen, [21]css, [22]education, [23]ella, [24]html, [25]life, [26]
|
||
personal, [27]web design, [28]web development
|
||
|
||
• Brad Frost
|
||
|
||
Hey there!
|
||
|
||
I'm [29]Brad Frost, a design system consultant, web designer, speaker,
|
||
writer, and musician located in beautiful Pittsburgh, PA.
|
||
|
||
• [30]
|
||
Atomic Design Book [atomic-des] [atomic-des]
|
||
• [31]Atomic Design
|
||
|
||
I wrote a book called [32]Atomic Design, which covers all that goes into
|
||
creating and maintaining effective design systems. You can [33]read it
|
||
online and [34]order the ebook.
|
||
• [35] Brad Frost speaking at TEDx Pittsburgh
|
||
• [36]
|
||
|
||
Wanna work together?
|
||
|
||
I'm a principal and technical strategist at Big Medium, where we help teams
|
||
establish and evolve design systems, establish more collaborative
|
||
workflows, and create better software together. Need design system help?
|
||
Need help leveling up your organization's digital practice? Get in touch!
|
||
|
||
• [37]
|
||
|
||
Blog
|
||
|
||
I write about web design best practices, design systems, responsive design,
|
||
and other tasty topics on my blog. I also enjoy sharing and commenting on
|
||
interesting links from around the web.
|
||
|
||
• [38]
|
||
|
||
Contact
|
||
|
||
Does your team need help taking your design system to the next level?
|
||
Interested in a workshop, consulting, or co-creation project? Have a
|
||
question about atomic design or web development? Get in touch!
|
||
|
||
• [39]
|
||
|
||
Music
|
||
|
||
Music gives me an enormous amount of mental, physical, and spiritual
|
||
satisfaction. I just love playing music, plain and simple.
|
||
|
||
• Around the web
|
||
|
||
You can follow along on [40]Bluesky, [41]LinkedIn, [42]Mastodon, [43]
|
||
Threads, [44]YouTube, [45]Instagram, [46]Github, [47]Codepen, [48]Spotify,
|
||
and [49]Last.fm.
|
||
|
||
•
|
||
|
||
|
||
References:
|
||
|
||
[1] https://bradfrost.com/
|
||
[2] https://bradfrost.com/work
|
||
[3] https://bradfrost.com/workshops
|
||
[4] http://atomicdesign.bradfrost.com/
|
||
[5] https://bradfrost.com/blog
|
||
[6] https://bradfrost.com/contact
|
||
[7] https://www.youtube.com/watch?v=aR3MDSF-IpQ
|
||
[8] https://codepen.io/
|
||
[9] https://codepen.io/features/asset-hosting
|
||
[10] https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
|
||
[11] https://www.w3schools.com/html/html5_audio.asp
|
||
[12] https://www.w3schools.com/tags/att_audio_loop.asp
|
||
[13] https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
|
||
[14] https://codepen.io/bradfrost/pen/GRVLEKY?editors=1100
|
||
[15] https://codepen.io/bradfrost/pen/GRVLEKY
|
||
[16] https://codepen.io/bradfrost
|
||
[17] https://codepen.io/
|
||
[18] http://bradfrost.com/
|
||
[19] https://bradfrost.com/blog/post/ellas-first-website/
|
||
[20] https://bradfrost.com/blog/tag/codepen/
|
||
[21] https://bradfrost.com/blog/tag/css/
|
||
[22] https://bradfrost.com/blog/tag/education/
|
||
[23] https://bradfrost.com/blog/tag/ella/
|
||
[24] https://bradfrost.com/blog/tag/html/
|
||
[25] https://bradfrost.com/blog/tag/life/
|
||
[26] https://bradfrost.com/blog/tag/personal/
|
||
[27] https://bradfrost.com/blog/tag/web-design/
|
||
[28] https://bradfrost.com/blog/tag/web-development/
|
||
[29] http://bradfrost.com/about
|
||
[30] https://shop.bradfrost.com/
|
||
[31] https://shop.bradfrost.com/
|
||
[32] http://atomicdesign.bradfrost.com/
|
||
[33] http://atomicdesign.bradfrost.com/table-of-contents/
|
||
[34] https://shop.bradfrost.com/products/atomic-design-ebook
|
||
[35] https://bradfrost.com/speaking
|
||
[36] https://bradfrost.com/work
|
||
[37] https://bradfrost.com/blog
|
||
[38] https://bradfrost.com/contact
|
||
[39] https://bradfrost.com/music
|
||
[40] https://bsky.app/profile/bradfrost.com
|
||
[41] https://www.linkedin.com/in/bradfrost
|
||
[42] https://mastodon.social/@brad_frost
|
||
[43] https://www.threads.net/@brad_frost
|
||
[44] https://www.youtube.com/@brad_frost
|
||
[45] http://instagram.com/brad_frost
|
||
[46] https://github.com/bradfrost
|
||
[47] http://codepen.io/bradfrost/
|
||
[48] https://open.spotify.com/user/ienjoyhotsoup
|
||
[49] http://www.last.fm/user/brad_frost
|