--- title: I still like writing websites by hand | daily.dev description: A web developer shares her process for building a small consultancy website for a friend, covering font and colour choices (Sansation typeface, light-on-dark... canonical: https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: I still like writing websites by hand | daily.dev og:description: A web developer shares her process for building a small consultancy website for a friend, covering font and colour choices (Sansation typeface, light-on-dark... og:url: https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t og:image: https://api.daily.dev/og/posts/jXosoP61t.png og:image:alt: I still like writing websites by hand og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # I still like writing websites by hand **[Chen Hui Jing](https://daily.dev/sources/chenhuijing)** · 5 min read · 138 upvotes · 23 comments ## Summary A web developer shares her process for building a small consultancy website for a friend, covering font and colour choices (Sansation typeface, light-on-dark theme), the Utopia fluid design system, and a CSS-based animated halftone background effect inspired by Ana Tudor's work. She also explains a simple neon glow effect using stacked box-shadows and reflects on still enjoying hand-crafted web design work. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### how do you create an animated CSS halftone background effect An animated CSS halftone effect can be made by blending two gradients together, applying a contrast filter to sharpen the blend into dots, and then adding animation on top of that combination. Ana Tudor documented the technique in detail, breaking down how the gradients and contrast filter interact to produce the halftone pattern purely in CSS. _Developers exploring creative CSS effects like this can find more experiments and writeups on daily.dev._ ### what does the background-repeat: space value do in CSS The background-repeat: space value repeats a background image as many times as possible without clipping it, pinning the first and last copies to opposite edges of the element and distributing any leftover whitespace evenly between the repeated images. It differs from the default repeat behavior, which can clip images at the edges instead of spacing them evenly. _Curious CSS developers can keep discovering lesser-known properties like this one on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@coppnic** · 23 upvotes > Personally, I always defined making websites as "Handwerk" (Crafts/Handcrafting). You have tools, you get a blueprint, and then you build. Just like a house. Only that a developer or engineer can obviously build the entire house (the website). > > Keep on crafting by hand. If not for work, then to solidify your skills :) **@nicolelozi** · 11 upvotes > i also like doing it by hand **@mheob** · 5 upvotes > It's our craft. And it's always fun to put it into practice. **@agustinbarrientos** · 5 upvotes > Nice work, the hand-built page has personality without feeling busy **@buithanhcong** · 5 upvotes > i want to write code by hand too, but my company dont allow it ## Similar posts on daily.dev - [Last week in the studio \(CW37-26\)](https://daily.dev/posts/last-week-in-the-studio-cw37-26--jrmr0pggt) · Blogging and all that Malarkey · 2 upvotes · 0 comments - [Nerdy Design Details](https://daily.dev/posts/nerdy-design-details-uhtk6vxkh) · Kitty says hi. · 22 upvotes · 4 comments - [Setting type like a printed page](https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y) · Creative Design Technologist · 9 upvotes · 3 comments - [Still blogging](https://daily.dev/posts/still-blogging-dvlzgt3or) · Pascal’s scribbles · 2 upvotes · 1 comments - [How can designers use retro web aesthetics without hurting usability?](https://daily.dev/posts/how-can-designers-use-retro-web-aesthetics-without-hurting-usability--vaccadamn) · LogRocket · 3 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#astro](https://daily.dev/tags/astro), [#typography](https://daily.dev/tags/typography) [View this post on daily.dev](https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"I still like writing websites by hand","url":"https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t"},"datePublished":"2026-08-23T12:51:40.385Z","dateModified":"2026-09-14T08:07:25.718Z","description":"A web developer shares her process for building a small consultancy website for a friend, covering font and colour choices (Sansation typeface, light-on-dark...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/664fdeb944935537c8185d070146c57c?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/664fdeb944935537c8185d070146c57c?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Chen Hui Jing","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Chen Hui Jing","logo":"https://media.daily.dev/image/upload/s--AsSqL2Hu--/f_auto/v1764505882/logos/chenhuijing","url":"https://daily.dev/sources/chenhuijing"},"commentCount":23,"discussionUrl":"https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":138},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":23}],"keywords":"css,ui-design,astro,typography","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Chen Hui Jing","item":"https://daily.dev/sources/chenhuijing"},{"@type":"ListItem","position":3,"name":"I still like writing websites by hand"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t","comment":[{"@type":"Comment","text":"Personally, I always defined making websites as “Handwerk” (Crafts/Handcrafting). You have tools, you get a blueprint, and then you build. Just like a house. Only that a developer or engineer can obviously build the entire house (the website).\nKeep on crafting by hand. If not for work, then to solidify your skills :)","datePublished":"2026-08-24T12:25:16.570Z","url":"https://daily.dev/posts/jXosoP61t#c-k9brKIecA","author":{"@type":"Person","name":"coppnic","url":"https://daily.dev/coppnic","image":"https://media.daily.dev/image/upload/s--8VyNl1cb--/f_auto/v1732889303/avatars/avatar_z5bNZJIOpNguomDjmmrE2"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":23}},{"@type":"Comment","text":"i also like doing it by hand","datePublished":"2026-08-24T13:01:50.160Z","url":"https://daily.dev/posts/jXosoP61t#c-Ue1JHjZ1r","author":{"@type":"Person","name":"Nicole Lozi","url":"https://daily.dev/nicolelozi","image":"https://lh3.googleusercontent.com/a/ACg8ocJqaLptXdHAkOxHGc8V0koG47rxEIPN8XJdtxnuVhv29MjouA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":11}},{"@type":"Comment","text":"It’s our craft. And it’s always fun to put it into practice.","datePublished":"2026-08-25T05:47:44.159Z","url":"https://daily.dev/posts/jXosoP61t#c-Zm8EfnNIC","author":{"@type":"Person","name":"Alex Böhm","url":"https://daily.dev/mheob","image":"https://avatars3.githubusercontent.com/u/3983539?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Nice work, the hand-built page has personality without feeling busy","datePublished":"2026-08-24T23:21:05.914Z","url":"https://daily.dev/posts/jXosoP61t#c-m7J8TxQ6U","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"i want to write code by hand too, but my company dont allow it","datePublished":"2026-08-25T09:34:13.767Z","url":"https://daily.dev/posts/jXosoP61t#c-ocQ5KBpCl","author":{"@type":"Person","name":"BuiThanhCong","url":"https://daily.dev/buithanhcong","image":"https://avatars.githubusercontent.com/u/106401725?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t#faq","mainEntity":[{"@type":"Question","name":"how do you create an animated CSS halftone background effect","acceptedAnswer":{"@type":"Answer","text":"An animated CSS halftone effect can be made by blending two gradients together, applying a contrast filter to sharpen the blend into dots, and then adding animation on top of that combination. Ana Tudor documented the technique in detail, breaking down how the gradients and contrast filter interact to produce the halftone pattern purely in CSS. Developers exploring creative CSS effects like this can find more experiments and writeups on daily.dev."}},{"@type":"Question","name":"what does the background-repeat: space value do in CSS","acceptedAnswer":{"@type":"Answer","text":"The background-repeat: space value repeats a background image as many times as possible without clipping it, pinning the first and last copies to opposite edges of the element and distributing any leftover whitespace evenly between the repeated images. It differs from the default repeat behavior, which can clip images at the edges instead of spacing them evenly. Curious CSS developers can keep discovering lesser-known properties like this one on daily.dev."}}]} ```