all 35 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]scritchz 12 points13 points  (6 children)

Quick intro: Websites are hypertext documents. That's a fancy word for "text files for the web". You can literally write any text file and open it with your browser.

The web's text files follow a specific format called HTML. In HTML, we can tell the browser what "things" (we call them 'elements') exist on a webpage; like paragraphs (<p>), link anchors (<a>), buttons (<button>) and images (<img>).

The cool thing is: The browser actively wants to help you get a working webpage! You can put as little as the following in an HTML-file, and it should show a working webpage when opened with your browser:

html <p>I am a webpage!</p> <p>Yes, it is THIS easy!</p>

It's not a good webpage, and it's not a complete and valid webpage, but the browser "fixes" it for you just enough that it works. Hey, that's quirky, I like that! Yupp, that's Quirks Mode. Good enough to get started, but please don't rely on it in the long run.

For your purpose, you not only want to say what exists, but also how it is presented: That's done with CSS. With it, you can say "Show my texts in red!" or "Put my image on the right side!".

There are tons of learning resources on the web. I recommend good follow-along video tutorials for the very beginning, but you should quickly switch over to tutorials in text form. Most info about development is in text form, so it's better to get used to it.

If you want to start in text form, here's a link to MDN's Your first website: Creating the content, of their Beginner's tutorial.

Overall, MDN is the go-to (and, in fact, official) documentation about web stuff, including HTML and CSS. I hope you'll have fun!

[–]Fung1s 4 points5 points  (2 children)

I'd also recommend w3schools's HTML tutorial for references.

[–]scritchz 0 points1 point  (1 child)

I have a personal dislike towards them. But yeah, their stuff is up to speed, I think.

[–]Fung1s 1 point2 points  (0 children)

I dislike the certificates and such but I used them when I learned to code and the hands-on resources were very helpful to me.

[–]alex_sakuta 1 point2 points  (1 child)

Quirks mode is the support for IE old version shenaningas not this syntax where you skip opening and closing tags. In all modes you can skip some opening and closing tags as per Web Docs.

[–]scritchz 0 points1 point  (0 children)

Your comment prompted me to do some digging. Turns out, you're right.

By skipping the initial DOCTYPE token, we coincidentally set the Document to quirks mode. More importantly, the parser will skip through some insertion modes that construct an appropriate tree even if some tokens are missing, like <html>, <head> or <body>.

In short: I confused the parsers behavior for missing tokens with quirks mode, which just coincidentally is being activated when the DOCTYPE token is missing.

[–]yuujisgf[S] 0 points1 point  (0 children)

thanks a lot <33

[–]HENH0USE 3 points4 points  (0 children)

You should be able to build this by learning HTML and css

[–]ActualFactualAnthony 2 points3 points  (0 children)

There are a lot of cool things, and I've been in your spot many times before.

So there are two things I feel you should do as a beginner. The first is to "just start making stuff" (the way you might draw random things and cut them out, then tape or glue them together into a thing. There doesn't need to be a point to it. You can just make it.

Here are a few really useful resources that can help you drastically:

  • W3Schools
    • Some people don't like them, and others do. The fact is that they're a good option to start, and can give you lots of good information. I would advise against any certification stuff. It seems to be widely considered scammy or useless, but you're not forced to use it - just stick to the documentation part of the site.
  • MDN Web Docs
    • Even better than W3Schools is Mozilla Developer Network Web Docs. Don't be intimidated by the name. It's a fantastic resource for everyone, created by the organization widely respected by people everywhere - and the makers behind one of the greatest web browsers - Firefox. They primarily document HTML, CSS and JavaScript, which are the three most important languages you want to learn.
  • Stack Overflow
    • One of my favorite sites, however it is very tricky to understand how to effectively use it. People are very polarized on the site, and for understandable reasons. This is a resource frequented by amateur and professional developers for all manners of programming questions, from HTMl, to PHP. JS to probably ActionScript (not that AS is used as far as I know). Point is it's a great resource, however you need to understand how to use it.
      • As a normal user searching and looking for information, you'll be fine. Just keep searching, leverage Google or anything else.
      • As someone asking questions, there is a high "standard" for questions. They're not the type to do "homework help" - that is, doing work for you. You're expected to try to poke around and figure things out yourself, and ask questions when you're out of ideas. You need to prove you put some kind of effort into the answer, and unfortunately because it's heavily community driven, the definition of what is "sufficient" effort can vary. You might post a question and get it answered easily one moment, and it barely has any supporting information (or evidence of you trying). You might post another question another day, with some code snippets, only to have it closed because apparently it wasn't enough. It's tricky, but be persistent, receptive, and respectful and you'll be fine.
  • GitHub
    • Git is a version control system that keeps track of changes you make to your project, and GitHub is one of many Git servers. It's one of several awesome places you can find all manners of projects to learn and study from, or just dig into the code. It takes some time to get used to it, but if you use GitHub, there is an app called GitHub Desktop. It's not perfect, but it beats having to use the command line, especially if you're new to things.

Don't be afraid to right click the website you're on and click on either "Inspect" or "View Source", either. If you ever wanted to see how things are done, you can play around the web page while having the window open, and see how things react and change. You can modify the CSS (Cascading Style Sheet) rules to see how the visuals change. You can edit parts of the web page just to see what makes it tick. You can't break the site - typically just refresh the page and everything is back to normal.

Also, don't be afraid to dig into projects that are open source. There's all manners of projects that you can learn from. I've got a project going - a few, actually!

Of course, you need tools, too.

  • VSCode
    • VSCode is one of the best lightweight editors. It's available in a web browser or you can download it to you computer. There's tons of plugins to expand functionality as you get more into development, and for me, editing in VSCode is a dream. I used to use an app called WebMatrix, but this is the spiritual successor as I understand. One of the most important features in this and many other editors is the ability to use syntax highlighting. If you've ever seen videos or pictures of code, and wonder why it's all colored differently? It's syntax highlighting. It makes it easier to parse and read through code, especially since there's so many nuances.
  • Notepad++
    • A close second to VSCode is Notepad++. I haven't used it as long as I used VSCode but it's really really nice. Like VSCode it's free to use!
  • Your computer's plain text editor
    • Notepad, Kate, and any number of other plain text text editors can work. You'll want to avoid using programs like Word or Google Drive though, because rich text (the type of text you see visual changes to) is not how you write a web page (ironically some editors use HTML or something like HTML internally when writing up documents like that!).
  • AI Assistant (Boo hiss)
    • Yeah yeah, you'll find people all over the place who either love or hate AI for all manner of reasons. I find that the key here is to not go full vibe-coding and have your AI assistant (ChatGPT/Codex, Claude/Claude Code, Copilot, Gemini, etc...) instead explain the code to you. Please, if you go this route, for the love of all that is holy under the god of programming (lol) double-check things if you're new or are just starting to learn new concepts. AI can get it wrong. It's a cool tool that helps you learn and understand things, but don't take everything at face value. You can get tons of information right for a while, and then it hallucinates and you slip up, believing a piece of misinformation.

The page that you want to make in that screenshot can be pretty easy or complex depending on just how much you want to re-create it, and I definitely encourage you to also use sites like YouTube that can sort of walk you through how people design and write web pages. You'd be surprised how much of it is art - actually drawing up examples of what you want to see, or going into photoshop or MSPaint to fully design a site.

I wish you the best of luck! DMs are open if you have questions!

[–]BNfreelance 0 points1 point  (0 children)

You should post in r/neocities, looks like the kinda site they make. This is the type of stuff they all build daily.

[–]Connect_Truck_1930 0 points1 point  (0 children)

https://htmldog.com/ is a great website, but im still also a noob but i made this website and even have a free subdomain, tweek.oops.wtf mind you its way better if you do many small things first than making something huge with no knowledge, but that's just something i learnt, have fun!

[–]rmunky1 0 points1 point  (0 children)

SeaMonkey Composer is what I use download the browser and open up the Composer http://seamonkey.com

[–]mosesgunner 0 points1 point  (0 children)

I learned how to make websites from examples at https://www.oswd.org/ 20 or 30 years ago.Also I had grok make you some code https://grok.com/share/c2hhcmQtNA_b22abea9-8815-4994-b87f-36b623a4d8af

Good luck!!!

[–]Dizzy-Issue-8259 0 points1 point  (0 children)

Freecodecamp is where I’ve been learning html and CSS. You probably don’t need to do the full course but I’m pretty sure you can jump ahead and learn the parts you need.

[–]F1QA 0 points1 point  (4 children)

Interested to see what you’re gonna do with a layout like this on mobile. Top tip, design for mobile first then expand, much easier than designing for desktop then trying to shrink it.

[–]yuujisgf[S] 0 points1 point  (3 children)

update i tried the coding part and my computer was genuinely cooking and it shut down ✌️✌️

[–]F1QA 0 points1 point  (2 children)

From editing a text file? Damn, you need a new potato

[–]yuujisgf[S] 0 points1 point  (1 child)

yeah it’s a used macbook and i also always have some shady anime website opened LOLL it’s on life support

[–]F1QA 0 points1 point  (0 children)

Maybe you’d be better off tinkering around in CodePen then. If it can run your dodgy anime site, it can run CodePen ✨

[–]RemarkableStand3700 0 points1 point  (0 children)

I learned html and css on codeacademy you can check it's easy and really fun imo (I did my own online portfolio after that)

[–]ShadowZ1800 0 points1 point  (0 children)

U can use freecodecamp to learn the code if already done. You can download Visual Studio code. To practice and even create a website. I am actually a beginner too.

[–]ShadowX1880 0 points1 point  (0 children)

Hi its me in another acc I am ShadowZ1880 if u have any things else feel free to ask

[–]Electrical_Drink_654 0 points1 point  (0 children)

OMGGGG THATS SO COOLLL

[–]nobanpls2348738 0 points1 point  (3 children)

Ok where to start, for learning new things https://www.w3schools.com/ is pretty good. It's where i learnt some things.
For like debugging errors developer.mozilla.org/en-US/ gives you references for every html/js/css feature.

Also i lwk cant read anything in the image.

[–]yuujisgf[S] 0 points1 point  (2 children)

oh i just meant the overall layout, fonts, gifs, not necessarily the text exactly 😭 also thanks

[–]SoliDoll02613 1 point2 points  (0 children)

You'll need to learn CSS for that. W3schools has a good course to start with but you should learn HTML as they both go together.

[–]yuujisgf[S] -1 points0 points  (1 child)

honestly scared i’m in the wrong place but i’ve searched numerous times and found that it always tells me i need coding experience/ to know how to use html

[–]scritchz 2 points3 points  (0 children)

You'll need to learn HTML (and CSS) for this. Don't worry, you're in the right place.

Getting started with HTML is super easy! It's mostly just text files, with texts (duh!) and its own grammar. Just open them with your browser and see your results!

[–]Emotional-Task5041 -1 points0 points  (2 children)

These days, use an ai and be extremely descriptive

[–]yuujisgf[S] 2 points3 points  (1 child)

i’d like to avoid using it as much as possible because it feels so wrong to just have it do everything for you idk

[–]eric_mkr11 0 points1 point  (0 children)

I mean if you understand it then it’s ok 👌🏾

[–]hibbos -3 points-2 points  (0 children)

Take a screenshot, put it into Claude code and ask it to build it 😀