Beginning Website Dev and Coding Advice Thread

[VGMoose]

Hi! I've been making websites for a long time, too long really. It's great! If you want to start your own personal site, let's use this thread to give each other tips or support.

I'll be checking in every day at least, so if you have a question, or need any tips, please feel free to ask!

Initial starting resources:

Development programs
On PC: https://code.visualstudio.com/download
In browser: https://vscode.dev

Starter guide
HTML: https://blog.hubspot.com/website/html

Sites to host on:
Github pages: https://pages.github.com

If you've never ever made an HTML document ever, hubspot's guide looks pretty good. It goes over the basics of opening a file, editing, and previewing it. Once you have it looking how you want locally, hosting it is the next step.

VSCode is a great starter IDE (or, text editor) that gets a lot of the basics right. Actually, I use VSCode for pretty much everything.

[VGMoose]

Personally, here's an example of one of those early sites I made way back in the day: https://backpack.vgmoose.com/2008/ . This uses pure HTML and iframes to display the different pages.

I thought I was so cool... Nowadays, the best example of a site from scratch that I'm proud of is probably the homebrew appstore web frontend: https://apps.fortheusers.org . This is coded in React and Typescript, which is a lot more advanced, but really you're just (eventually) building off those same basic starting concepts ideas.

[TeamSteam]

This so cool! I think i might use this to make one as i have no experience myself.

[lollapalooza]

@TeamSteam i can suggest a few good sites to learn from

[lollapalooza]

@VGMoose my browser is in my text editor
your text editor is in your browser
WE ARE NOT THE SAME

lol

[lollapalooza]

@VGMoose also what is that GORGEOUS navbar font?
sorry scattered thoughts lol

[TeamSteam]

Like what sites @lollapalooza?

[VGMoose]

@lollapalooza it's https://www.1001fonts.com/gooddog-cool-font.html with the dots removed!

I remember using it cause it looks like the Nintendogs font

[lollapalooza]

@TeamSteam sadgrl.online
w3schools.com is a must
internettingishard.com
html-shark.com

[VGMoose]

If you're in the @Coders group, there's now a Public Chat for discussing development and assistance!

[VGMoose]

I've made a beginning coding introduction tool at: https://github.com/vgmoose/GraphCoding#readme

It puts the code you type into the URL, updates the canvas with whatever commands you use, and allows you to edit and share it via long base64 links, for example:

https://vgmoose.dev/GraphCoding/#Ly8gc2V0IHRoZSBmb250IGFuZCBkcmF3IHRoZXNlIHdvcmRzCnNldEZvbnRTaXplKDE3KTsKZHJhd1RleHQoImhlbGxvIiwgLTUsIDgpOwpkcmF3VGV4dCgidGhlc2UgYXJlIHNvbWUgd29yZHMiLCAtNCwgNik7CmRyYXdUZXh0KCJuZWF0IiwgLTMsIDQpOwoKLy8gc2V0IGEgdmFyaWFibGUKdmFyIGJpZ1RleHQgPSAiQ09PTCEiOwoKLy8gZHJhdyB0aGF0IHZhcmlhYmxlIHR3aWNlIG5lYXIgZWFjaG90aGVyCnNldEZvbnRTaXplKDQwKTsKc2V0Q29sb3IoImJsdWUiKTsKZHJhd1RleHQoYmlnVGV4dCwgLTUsIC0xKTsKc2V0Q29sb3IoInJlZCIpOwpkcmF3VGV4dChiaWdUZXh0LCAtNS4yLCAtMS4yKTsKCi8vIGRyYXcgc2luZSBhbmQgY29zaW5lIHdhdmVzCnNldENvbG9yKCJncmVlbiIpCmZvciAodmFyIHg9eE1pbjsgeDx4TWF4OyB4Kz0wLjIpCnsKICBzZXRDb2xvcigiZ3JlZW4iKQogIHBsb3QoeCsxLCBNYXRoLnNpbih4KSAtIDUpOwogIHNldENvbG9yKCJwdXJwbGUiKQogIHBsb3QoeCwgTWF0aC5jb3MoeCkgLSA1KTsKfQ==

[VGMoose]

The above will render the following graph and text on the canvas:

And this is the code it used (Javascript):

// set the font and draw these words
setFontSize(17);
drawText("hello", -5, 8);
drawText("these are some words", -4, 6);
drawText("neat", -3, 4);

// set a variable
var bigText = "COOL!";

// draw that variable twice near eachother
setFontSize(40);
setColor("blue");
drawText(bigText, -5, -1);
setColor("red");
drawText(bigText, -5.2, -1.2);

// draw sine and cosine waves
setColor("green")
for (var x=xMin; x<xMax; x+=0.2)
{
  setColor("green")
  plot(x+1, Math.sin(x) - 5);
  setColor("purple")
  plot(x, Math.cos(x) - 5);
}

[VGMoose]

Bumping this thread! Anyone working on some interesting projects?

Also, we might add basic web hosting to BDNS, so each user can have their own profile page to edit and manage (similar to caard's).