6 ms·
I’m not even kidding, this is how I still make websites: I open a text editor, and stub this out (by hand, it only takes like 30 seconds — I’ll even do it as I
by apo 8y ago
I’m not even kidding, this is how I still make websites:
I open a text editor, and stub this out (by hand, it only takes like 30 seconds — I’ll even do it as I write this post to be authentic — except stinkin’ tab doesn’t work here):
<!DOCTYPE html>
<html>
<head>
<title>I code stuff with my bare hands</title>
<meta charset="utf-8">
</head>
<body>
Hi there
</body>
</html>
Then I open a new tab and make a CSS file; something like this:
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-size: 18px;
color: #333;
}
p {
line-height: 1.4em;
}
Same here. The main advantages are brevity, speed, and debuggability.
Having tried CSS frameworks like Bootstrap on the one hand and vanilla HTML/CSS on the other, I really don't see the attraction of frameworks.
It's not hard to quickly build something that works decently without prefabricated components. In the later phases of a project, I find it much easier to maintain a code base free of third party material.
- sho_nuff 8y agoI am interested in learning this style but keep getting drawn into some frameworks. What order would you recommend learning to create sites in this style?
- ftio 8y agoIf you're just building a website — i.e., not a highly interactive web application — here's what I'd recommend. I've been building websites since 1998, FWIW, although I'm now a stupid product manager, so take this with a grain of salt. 1. Write semantic HTML in a sane, human-centric order. Do not write any CSS yet. 2. Open your new web page in a browser. Imagine CSS doesn’t exist and you’re stuck with whatever the browser gives you forever (shudder). Is your site well-organized? Is it easy to read, to navigate? Are the most important elements on your page afforded the appropriate level of prominence? 3. Imagine everyone looking at your website reads every line of HTML top to bottom. You’re not allowed to use classes or IDs. Do your readers know what, say, the title of your blog article is? Do they know where the navigation is? 4. Do you have multiple page “types” (e.g., blog post, blog index, about me, home page)? Do this for all of those types. Don’t forget to keep making your HTML semantic. Copy and paste similar bits (navigation, etc.) from pages you’ve already created. Yes, if you make changes to one, you will have to change both. 5. Once you’ve done all of these, put a <style> tag linking to a single vanilla CSS file in the header of your simplest page. Start adding styles, beginning with text styling. Can you still tell that links are links? Is it still easy to find the navigation? Do headers look like headers? Good. 6. Did you have to pollute your HTML with a lot of classes to accomplish what you wanted to accomplish, design-wise? This might be OK, but you probably added too many. Can you accomplish the same thing using semantic elements instead? Do so. 7. Copy that <style> tag to the other pages. Do they look pretty decent? They should. Add whatever additional styles those pages NEED. 8. Yes, it does suck having to copy and paste all these repeated blocks all over the place. Find a static site generator or use something like CodeKit[1] so you can use simple includes rather than configuring the mess that is most static site generators. I use a static site generator for my site[2] for fun but don't really need one. Have fun. 1. https://codekitapp.com https://codekitapp.com 2. https://ft.io https://ft.io
- apo 8y agoI can think of two approaches: 1. Get a better idea of the tools already at your disposal (HTML5, CSS3). I can recommend Dive into HTML5 http://diveinto.html5doctor.com http://diveinto.html5doctor.com 2. Start building. Literally, start with the barebones Hello World given in the article. Then gradually turn it into your site, making liberal use of Stack Overflow (direct search) and Google.
- mmsimanga 8y agoThanks for the link. This whole thread is refreshing. I am someone who does not do web development for a living but occasionally builds a website. Every time I start building a new site I am at a complete loss where to start. Yet I have been doing HTML and CSS since 1999. I am going back to basics, starting with your link.
- raywu 8y agoOpen web inspector when you develop a website. You can get a better feel for how changing CSS on the fly take place on the actual webpage. I would save a copy of the HTML from the top level comment of this thread and use it as a base to start any new project. I like to start from scratch and add Bootstrap should I need responsiveness once I get to that point. L
- mmsimanga 8y agoThanks for the tips.
- tuesdayrain 8y agoIf you use a project generator like Next.js or Gatsby you can have a project with the advantages of React that also compiles down to static files with only one line of setup. Imo it's just as easy as what the author does except it also comes with optimizations like pre-fetching.
- balladeer 8y agoMy personal landing page(s)/website is hosted on GitHub pages. After two attempts, and at both the occasions I just blindly followed tutorial steps hoping it will show as it should - it did but I didn’t understand a thing, I am back to vanilla HTML/CSS and zero JS (I just didn’t need it). I really like it now. If I have to edit something I just change the text needed. I am planning to add a blog to this landing portal and debating whether I should have comments on it or not. Because if I’ll have comments I’ll have to deal with complicated libraries and add-ons. Maybe I’ll just have static HTML files linked from YYYY/mm folders as my blog posts and maybe some simple JS for next/previous if at all (in that case I’d want to name individual post files with some discipline so that I can parse it easily later)
- commandlinefan 8y agoRepresent!
- notrub225 8y agoDo you find * { box-sizing: border box } to be necessary? I don’t know why people need to set it for everything when it only makes a difference in a specific situation.
- titusjohnson 8y agoLess manual math when figuring out the true size of an element with margin, border, padding, and sizing applied.