TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Make Your Own Website: A beginner's guide

189 点作者 panic3 个月前

19 条评论

shit_game3 个月前
&gt; I originally wrote this guide for my daughter, then 12 years old<p>I like the idea of this as an introduction for a child to web development, but I feel like it (<i>in isolation</i>) is wanting. One of the most jarring bits of this page is that there is an almost immediate jump from this page to MDN, which is drastically too much for most 12 year olds. There is a lot of &quot;do this, and then do that&quot; style of instructure, but not very much child-friendly explanation as to <i>why</i> to do <i>that</i>. Most things described here are trivial to people who are familiar with the subject, but not anything obvious or natural or intuitive without the necessary context or experience.<p>Further, there is a significant push into HTML semantics before describing the simplest workflow of creation -&gt; publishing that may lose the target audience&#x27;s attention; I feel that describing a process more abstractly and then expounding on the details may be more helpful if you&#x27;re teaching children how to make a website (websites are documents on another computer that you can ask for, this is an example of a very simple document, the document goes on a computer that talks to other computers and responds to their requests for documents, other computers then can see the document when they are responded to, etc.).
评论 #43010541 未加载
mg3 个月前
I made this html editor with instant preview and it turned out useful when I show friends how make their very first html page:<p><a href="https:&#x2F;&#x2F;no-gravity.github.io&#x2F;html_editor&#x2F;" rel="nofollow">https:&#x2F;&#x2F;no-gravity.github.io&#x2F;html_editor&#x2F;</a><p>Originally, I made it for myself. To quickly do HTML&#x2F;CSS&#x2F;JS experiments. And I still use it for that use case.<p>Often when I show it to non-developer friends, I can see how they light up to coding for the first time. I think it is because it is so accessible. No signup, no setup, no long page load. Everything is instant, and they see each change the moment they type it.
评论 #43010077 未加载
评论 #43010880 未加载
评论 #43010853 未加载
评论 #43011235 未加载
评论 #43010009 未加载
评论 #43010385 未加载
tommica3 个月前
This is a really good article - this is the kind of thing I would link to a person that wants to build a website. I&#x27;d hate to be a noob developer, and having to learn to build a react site as my very first thing.
nhatcher3 个月前
I always like mentioning neocities in this context:<p><a href="https:&#x2F;&#x2F;neocities.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;neocities.org&#x2F;</a><p>It&#x27;s one if those gems in the Internet
评论 #43010435 未加载
Brajeshwar3 个月前
An aspiring founder asked me what to read&#x2F;study when everything around is AI—which AI tools or AI Framework? My answer was HTML. HTML ain’t gonna go nowhere.
braggerxyz3 个月前
In Germany we have Self HTML (<a href="https:&#x2F;&#x2F;wiki.selfhtml.org&#x2F;wiki&#x2F;SELFHTML" rel="nofollow">https:&#x2F;&#x2F;wiki.selfhtml.org&#x2F;wiki&#x2F;SELFHTML</a>) since 1995. I learned all the web dev basics with it as a 12 year old. It was the kickstart for my career, and 28 years later I can safely say I was successful. And it all started with that.<p>Keep up the great work with such a guide, maybe you kickstart some careers with it!
评论 #43011253 未加载
greazy3 个月前
Creating a website is the easy bit. The publishing and continually updates, even for a basic website, that&#x27;s the bit that will make you stop and give up.<p>I think this is why wordpress or drupal services are multimillion dollar companies.<p>The web is hard.<p>My experience as someone who programs but was never formally trained even if my job requires the skill set.
评论 #43011501 未加载
steren3 个月前
No, we should teach React to beginners! ;)
评论 #43010378 未加载
egeozcan3 个月前
This is amazing! However, for the 99% of the non-developer people in my circle who started this journey, it goes on like this: Learn basics of HTML &amp; CSS, start creating stuff on some free host, &quot;oh my deity, this is too much to handle&quot; moment comes, they create a wordpress blog, something in it gets broken after a year or two, they ask for help from a developer friend or give up.<p>For the developers, we are busy writing our own static site generators and blogging about it (which is a lot of fun too!)
susam3 个月前
This is pretty much how I began developing my own websites back in the early 2000s. Except that it was Notepad on a Windows 98 machine, and it was customary to write HTML tags in all uppercase. Layout was done with &lt;TABLE&gt; tags. The hosting was done on 20m.com which provided a free subdomain and 20 MB of hosting space. Remarkably, that silly website is still up at &lt;<a href="http:&#x2F;&#x2F;encoders.20m.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;encoders.20m.com&#x2F;</a>&gt;!
caspper693 个月前
That site gives me flashbacks to my 1994 O’Reilly HTML book. That and the Perl one (was that the Camel book?)<p>I am glad to see something like this though. You might reach some people.<p>You see folks, when you had to live through doing this shit by hand, and if memory serves, this was even pre-css (or maybe pre separate css files, shit, maybe just pre-css2?) and your only dynamism was through cgi with C or Perl, because Cold Fusion cost waaay too much for mere mortals (and the Sun server costs were even more eye watering), you welcomed things like Linux, PHP, MySql and Apache with open arms. It was like being rescued from a refugee camp and being given prime rib. And think about this- if someone thinks PHP back in the version 3&#x2F;4 days was salvation, that person has seen some <i>real shit</i>.<p>Point being, we came OUT of the woods. We knew better than to build rube goldberg machines that would lead us right back in, lol. We have a word for that- masochism.<p>Take what you know <i>now</i>, and simplify. Untangle the knots. Spring clean. Throw away the cruft. Free your minds.<p>And I know y’all can. Don’t be pretending like you don’t rewrite all your shit every year anyway ;)
zelphirkalt3 个月前
Very accessible. I don&#x27;t need to load tons of third party JS to view this website. It doesn&#x27;t hold its content hostage. It also makes use of things like the details element, instead of resorting to JS for such things. Basically, this is what one could expect from a website, that teaches HTML. To actually know the stuff it teaches, and apply that. This will also be more responsive than 95% of the websites out there. Nicely done.
评论 #43010841 未加载
soupfordummies3 个月前
Ah this is nice! Fond memories coming back of learning HTML and web design with HTMLGoodies and LissaExplains. Anyone remember those?
abetusk3 个月前
Jesus, what a refreshing site. People are so terrified of getting their hands dirty with HTML that they&#x27;ve forgotten how straight forward it is.<p>Abstractions, frameworks, static site builders, etc. are all great but we shouldn&#x27;t shy away from understanding the basics.
defanor3 个月前
A few things in it that I would not put into a beginner&#x27;s (or any) guide:<p>- Semantic tags (header, footer, main, section): machine-readable semantics can be fun to play with if one is so inclined, one can go even for RDFa, but AFAICT they will not do anything visible or useful, especially for a small beginner&#x27;s website, but they complicate the guide.<p>- CSS: the page itself uses low-contrast pink text on a pink background, which is hard to read (and goes against W3C accessibility guidelines, which can be checked with one of the online contrast checkers as well), and provides similar low-contrast examples. It also makes links bold on hover, which moves the texts that follow them, and which is annoying.<p>- Viewport meta tag: this can be controversial, I think, but the tag itself is rather a hack to tell a browser &quot;this page is not too broken, it can be rendered with a legible font size without breaking the markup&quot;. Teaching beginners to repeat that feels wrong both as promotion of such bad browser behavior, and as a road to potential misuse even of that (and the next version of the guide will have to include a new &quot;this page really is not broken&quot; invocation).
评论 #43009588 未加载
评论 #43009681 未加载
评论 #43010331 未加载
评论 #43010324 未加载
jichiduo3 个月前
太辣眼睛了 That&#x27;s an assault on the eyes
h37943 个月前
This is awesome!
anshulbhide3 个月前
<a href="https:&#x2F;&#x2F;v0.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;v0.dev&#x2F;</a>
Dementor4303 个月前
Please just use: - <a href="https:&#x2F;&#x2F;techdevguide.withgoogle.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;techdevguide.withgoogle.com&#x2F;</a> - <a href="https:&#x2F;&#x2F;www.freecodecamp.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.freecodecamp.org&#x2F;</a> - <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;</a>
评论 #43010228 未加载
评论 #43009904 未加载
评论 #43009894 未加载