1. 36

It’s been a long time since I’ve refreshed my personal site. After a few attempts at launching something new and really just more interest in doing other things other than learning flex layouts, I think I’d like to hire someone to do it.

Finding someone who can pull together a quality CSS theme or design outline for me versus me trying to cobble something together with the newest whatever.css seems like a better choice. Overall, having my own spot on the internet is valuable to me so I’m willing to pay to have someone draw some design lines for me so I may fill in my content.

Have people had similar dilemmas? What did you do?

(Also I’m uncertain of my tag choices, I welcome feedback / correction!)

  1.  

  2. 23

    I usually steal, I mean, get inspired by a theme on another site. I then manually edit the CSS and throw 99% out, and combine with CSS from other sites. It’s usually easy to get something that looks roughly like what you want, and very hard to get exactly what you want.

    Of course, it won’t use the latest framework, but it’s javascript-free, artisanal, and people are usually surprised at how fast it loads.

    1. 3

      This is exactly what I did. I copied over a theme that vaguely looked like what I wanted, discarded the parts I didn’t need, then frobbed it until it looked good. (Few original LoC had remained by that time.) Some time later I rewrote the style from scratch using what I’ve learnt.

      1. 2

        This is what I did for https://bitemyapp.com/

        It probably helps that I have some experience typesetting and like minimal/booky themes that focus on the type.

        1. 2

          I wouldn’t say that I’m bad at CSS, but I am pretty poor at coming up with originality. So, I end up pretty much doing something similar to you.

          At the very least, I’ll get inspiration for design from other sites. Right now, I’m working on redoing my personal site as well (primarily my blog), and I’m really into Drew DeVault’s personal website. I also like Medium’s approach to focusing on the story content. I’ll probably end up doing an approach the combines them in some form.

          I once had a colleague tell me that art is just regurgitation of other art.

          1. 1

            I like the site from crafting interpreters a lot, which is also hand-crafted (as it proudly declares in the footer). I checked out the source and it contains a comment along the lines “ is so beautiful it makes me want to cry”. Robert Nystrom seems like a nice guy.

            Also, I really like the layout that stackedit.io generates.

        2. 14

          My two cents: keep it minimal, focus on content and not on fancy themes.

          For my personal website I keep it as simple as I can and I’m quite satisfied. https://github.com/dacav/App-PFT/blob/master/share/templates/terminal.html rendering as https://dacav.roundhousecode.com/

          1. 1

            I also tried to keep it minimal: https://soc.github.io/

            1. 1

              I really like that you have things organized into a grid, it makes it so that I don’t have to do a separate search once I’m already on the site.

              1. 1

                Thanks! It took a substantial amount of time to get the dimensions to 2. :-)

            2. 1

              I agree with this. It’s roughly what I’ve done with my site as well: https://c.har.li/e/

              1. 1

                I really like the look of your site!

              2. 12

                Okay, I know it’s not what you’re asking, but let me be that guy in the thread:

                You might be better off writing your own styles :-)

                What is the nature of the content you’re putting on your website, and what are your goals with it? (Unfortunately, the website doesn’t load for me at all, so I can’t get an idea). If it’s just your “corner of the internet” where you post your thoughts, you can get away with very little CSS and things will look good. Web design in 4 minutes is a wonderful explanation of how it only takes a few lines of CSS to improve an article page.

                If you’re out of ideas on how a personal site should / could look, feel free to use the Lobste.rs front page — most of the links are from people’s personal websites — start with a design you like and make it your own. I find that “imagining layouts” and “implementing layouts in CSS” are two separate modes of working for me; the former gives me impostor syndrome vibes, while I’m 100% in executing the latter, and I kind of intuit that I’m horrible at CSS is more of a I can’t imagine how it should look kind of thing? (Please correct me if I’m reading this wrong)

                Back to CSS — and the newest whatever.css thing. Discourse around CSS features goes like this: here’s a one-liner to do thing. But ah, the thing is not supported in browser X, so you also need to do Y, et cetera — and next thing you know you’re knee-deep into arcana, which makes people uneasy about starting out. But right now we’re living in a world where 90%+ of people are on evergreen browsers, and they tend to adhere to the specs pretty well. And, in the case of Flexbox and Grid, the consequences of lack of support from browsers are minimal — the occasional visitor might see the layout collapsed to a vertical stack, but the content’s still there.

                By taking the specs at face value, and flat-out ignoring the edge cases, you cut out a huge swathe of complexity. You only really need flex / grid when you want to change from the normal top-to-bottom flow. Here’s a good guide for Flex, and I found the Every Layout book is a good investment for a clear-eyed intro to the good parts of CSS. Jeremy Keith has recently posted a set of resources for starting out in web development, there are some great things in there as well.


                This is not to say paying someone to do it for you is not a legitimate approach. I’m just building the case for DIY, which can be very rewarding — knowing how / why the thing works, and changing things with confidence.

                1. 4

                  You might be better off writing your own styles :-)

                  I would have been hesitant to recommend this in the past, but in our new world of CSS Grid this might actually be pretty reasonable advice. I would say don’t even bother with learning Flex (yet), just start with Grid. Most personal sites (most sites!) don’t need a layout more complicated than what you can achieve with a few lines of grid.

                  I think there are two things that need to be separated though:

                  1. The design/layout and palette
                  2. The actual CSS to implement it

                  I ’m a lousy designer, so I always just steal a layout from a site I like, and either use a palette generator or steal the palette too. But I would roll my own CSS these days, which makes it easy to tweak things a bit if I want to.

                  Having said that, I do a lot of FE work so I may be overstating how easy it is to do the CSS work for someone who is really unfamiliar.

                2. 4

                  If you’re not good at design or it’s not something you enjoy, and you want your website to be well-designed, pay a professional to do it. Design is subtle and hard, and if you want your website to be accessible, somewhat responsive and avoid website obesity, it is harder.

                  1. 4

                    In the same situation I tweaked http://akkartik.name over months, asking lots of people for feedback along the way. Then I left it alone :) That was ten years ago.

                    1. 2

                      Great site. One suggestion is that you inline your CSS (since it’s so small anyway) directly so you save a network trip for the CSS and you don’t have to deal with that flash of unstyled content.

                      1. 2

                        I’d never seen it! I’ll do so.

                    2. 2

                      Some more:

                      https://github.com/kognise/water.css https://github.com/arp242/hello-css

                      Or there’s a crap-tonne of templates, free and other wise.

                      1. 2

                        I used https://github.com/arp242/hello-css to build the latest avatar of my website - https://www.btbytes.com/

                        1. 1

                          I used Bootstrap 4 and it was easier than pure CSS. But everything is not about CSS, there is also the visual look. Since I suck at that, I decided to focus my efforts towards ergonomics and readability and not bother with visual beauty.

                          Overall, I am not that satisfied by the design itself. But, I think my website does the job, so as is it will remain. Ugly, but perfectly readable on all kinds of screens I used so far, and super fast!

                          1. 1

                            I’ve been around the block on this. There are different starting points here with different trade-offs:

                            Start from an empty CSS file

                            Either implement your own styles, or copy in elements from places that inspire you. Just poking around with the browser’s developer tools may be enough to give you an idea on what you need to do. Historically, view sourcing designs was a much more involved process.

                            Rip a whole site and modify it

                            I don’t recommend this due to copyright, but a lot of people do this to start and end up modifying it significantly once they learn that the original has compromises they don’t like.

                            Start from a CSS framework

                            These provide a good foundation and make compatible and responsive design simpler. As I’m learning from Tailwind CSS there can be a lot to learn to just redo a personal site.

                            Start from a good looking site template

                            There are many free (as in money) and inexpensive pre-built templates for WordPress and other platforms. These can applied to the CMS with dummy content and then you can rip the completed site as HTML for your starting point. Again, be careful with licencing, but many authors are fine with you buying their theme for WordPress and just using it as HTML. Many authors will be puzzled that options beyond WordPress exist.

                            When you go down this path you can get some nice designs, but the accessibility, performance and other details can be lacking. It can be fun optimising templates that have never been run through the Chrome developer tools Audit feature, but you can also run this on the template preview site before buying.

                            Get a custom design

                            Unless you are prepared to pay a decent chunk of money for a design, or are in with a web/graphic designer, then you’re probably going to find that the designer resorts to taking elements of another site, or customizes a template (asking for this could be more cost-effective.) Asking for some wireframe designs which are not too complicated to implement may be another option. You’ll have to write the CSS, but you’ll at least have a target design you are aiming for.

                            1. 1

                              I’ve struggled to design my own website over the years. I have a hard time with the subtleties of design, the types of things I should hire a designer to understand and take care of for me. I’m in the same boat as you. I just kept at it, though, and ultimately it didn’t take long to build something good. Minimalism is the name of the game these days: you want something simple so it will look good on mobile devices and desktops, and lightweight so that it will load fast over any connection. This doesn’t take much expertise. If you’re trying to build something more complex, that does require more expertise, I would argue that you need to reevaluate your approach.

                              You can check out my design at zacs.site, since it seems like we’re all using this thread to advertise our personal websites.

                              1. 1

                                Having a plain HTML website without any CSS is not a sin, I think.

                                1. 1

                                  Feel free to start with this: https://within.website/

                                  1. 1

                                    My tip would be to start it simple, just aid the “default” layout (I’m currently in that stage again, https://zge.us.to/style.css, another site of mine, at the more advanced stage: https://faui2k17.de/style.css) and then add stuff like colours to give the site a personal touch, changing fonts for different elements for structure, etc. I usually like a design more the first time I see it, but when it gets old or I see how a different engine renders it, I begin to reconsider. Therefore it’s something I think that one has to spend time with, comparing it to other sides (not so much complete themes, but sites with the same “style-complexity”) and learning what tricks and principles they use.

                                    Above all, good CSS requires well structured and clean HTML. If everything it just ten div‘s in one another, you’ll end up having a harder time to maintain the style, especially when I site expands.

                                    1. 1

                                      To me this is the kind of perfect example in real life I can use to gauge both my learning skills and where the tech is.

                                      For most tech, can I pick it up easily and code what I want in100 lines of code or so? If yes, cool, I am aligned with that tech. In other words I am familiar enough with the environment to work there.

                                      If not, why? There’s really only three answers: I’m learning poorly, the underlying problem is too tough, or I’m using the wrong tech stack somehow (my tools are getting in the way of working)

                                      For me, CSS for a personal site should be simple, but I know web technologies. I think the key question, as others have pointed out, is figuring out what I want it to look like, not necessarily making it look that way. Perhaps you need a designer who also knows CSS, not a web dev.

                                      1. 1

                                        My website is using a static site generator (pelican) and I’m using a so-called minimal theme from the public list of themes. I’ve changed a color and made some readability tweaks,bbutt that’s all. Helped me avoid designing thing without having actual experience or skills but picking a color or so helps me stand out but also reduced how much I could fail.

                                        If youeenduo usingaa static site generator, I recommend you also pick a ready made theme and adjust it to your liking.

                                        My website is https://frederik-braun.com/ theme/content is on https://github.com/freddyb/homepage