Beginning Website Dev and Coding Advice Thread
-
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.devStarter guide
HTML: https://blog.hubspot.com/website/htmlSites to host on:
Github pages: https://pages.github.comIf 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.
-
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 Fans of Star Wars Lovers Of Latin Knights Of Tolkien pet lovers! #KeepBDNSSafe we read fanfic lol Nintendo Switch Users Marvel Fan (cool) 3ds Players Epic Gamers 55 switch players Lop Never Dies ♥BrowseDNS Children's Table★
This so cool! I think i might use this to make one as i have no experience myself.
-
@TeamSteam i can suggest a few good sites to learn from
-
@VGMoose my browser is in my text editor
your text editor is in your browser
WE ARE NOT THE SAMElol
-
@VGMoose also what is that GORGEOUS navbar font?
sorry scattered thoughts lol -
@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
-
@TeamSteam sadgrl.online
w3schools.com is a must
internettingishard.com
html-shark.com -
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:
-
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); }