#javascript projects for beginners

[divinector]

Stopwatch using HTML CSS and JavaScript Check out Divinector YouTube Channel For more

[kitkatcodes]

[Tutorial] Personal Linktree Clone ・❥・

I came across Takuya Matsuyama’s “link in bio page” tutorial not too long ago and decided to recreate it with my own little twist. (See his source code here)

I love that it was done only in basic html & css, with the tiny amount of javascript for the flying birds. It makes it super beginner friendly while allowing you to be as creative as you want with it.

I coded a few variations of the site and now I am finally very happy with the final product ₍ᐢ. ̫.ᐢ₎

If you're curious to see how the previous versions looked, I show them on my site project blog, here ✧.*

and ofc if you wanted to view the actual site you can do so, here ✧.*

[codingflicks]

3D Cube Slider using HTML CSS JavaScript Get code from codingflicks website

[codenewbies]

Javascript Background Color Change

[spiders-around]

YOU MUST MAKE A WEBSITE

Oh wow, look at that! YET ANOTHER post urging you to make a webbed site! What a completely new thing that people haven't made a thousand masterposts for already!!

• Making a website might look scary. It is Not.

At first, I too thought making a website was too much work. It really isn't! It turns out that all you need is

an HTML file,

a web hosting service and

w3schools tutorials,

and that's about it!

This post will point you towards these resources, and others I found useful while figuring out how to make a website.

• VERY QUICK EXPLANATIONS:

What's HTML and CSS?

HTML is the content of your webpage, the skeleton of it. What shows up in a webpage is what's written in the HTML file!

CSS is the way the HTML is styled; the colour of the background and the letters, the size of elements, the font, all that!

Do I absolutely NEED JavaScript for a website?

Not at all! You don't need to worry about learning it before getting started.

• What do I make a website for? What do I put in there?

ANYTHING AND ALMOST EVERYTHING. Here's some ideas for pages from a post of mine were I was very normal about websites:

You can make a page that's only pictures of your pets.

You can make an interactive adventure.

You can make your own academic blog full of your own essays or articles.

You can just post a ton of art or make a full music page.

You can make a blog and infodump eternally, give book reccs and reviews. You can host a thousand virtual pets and nothing else.

Upload entire books in a single html file. Make a wikipedia for your ocs. Make a fake site for a random fictional place (restaurant, hotel, whatever). You can make a thousand fanpages/shrines about your favorite media. You can upload your own webcomic and make it all like a fancy website and shit.

I could keep going but, for the sake of "brevity", I won't.

• WEBSITE EXAMPLES!

If I started listing the websites I know, this post would be bottomless. Here's only seven:

https://publictransit.neocities.org/ - A webbed site, for sure

https://ribo.zone/ - A personal site

https://leusyth.neocities.org/ - An art archive

https://solaria.neocities.org/ - Personal website with A Lot of stuff (it'll come up in a bit, because it offers web making resources)

https://hog.neocities.org/ - The Hogsite

https://thegardenofmadeline.neocities.org/ - Another personal site! It also has a web resources page and has made another masterpost like this one (but better)

https://spiders.neocities.org/ - My own website, which must be weird to see in mobile . sorry

• You've convinced me. I want a webbed site. Where do I start?

https://neocities.org/

FIRST OF ALL: Neocities. It is a free web hosting service, and it's the one I and the sites I linked use!

When I first started, my website was a black page with red letters and a drawing, and nothing else! It was like that for a month, till i started picking up on how to do things.

Here's what helped me get an idea of how to make things work:

https://sadgrl.online/learn/articles/beginners-guide-neocities

An absolute beginners guide to neocities -- while when you make an account there you get a tutorial page from the site, this one's extra support for that.

https://www.w3schools.com/

Learn HTML, CSS, JavaScript and MANY other coding things for free. All the tutorial/reference pages have live testing windows for you to mess with!! helped me a LOT while figuring this stuff out!

https://htmlcheatsheet.com/

https://htmlcheatsheet.com/css/

Cheatsheets for HTML and CSS, respectively. It includes a JavaScript one too!

https://sadgrl.online/webmastery/

Sadgrl's webmastery resources! Also includes the next resource listed here:

https://sadgrl.online/projects/layout-builder/

Sadgrl's layout builder; not a lot of customization at a first glance, but I've seen wildly different websites all using it as a base, plus it works using CSS Flexbox, so it generates a responsive layout!

(basically, a responsive layout is one that translates well in different sized screens)

https://www.tumblr.com/fysa/728086939730919424/wikitable-code?source=share

Tumblr user fysa made this layout imitating a wiki page!

https://brackets.io/

At some point, you might want to do things outside the Neocities code editor and get one outside the site. I recommend Brackets, because my old as fuck computer can run that and absolutely nothing else apparently, and it works wonderfully! Though I recommend either turning off the code autocomplete or using it after a good while of already using the Neocities code editor, so you get used to coding on your own.

http://www.unit-conversion.info/texttools/text-to-html/

Turn your text into HTML code! i use this kind of pages for my lengthy blog entries that I don't feel like formatting myself.

https://imagecompressor.com/

COMPRESS YOUR IMAGES.

The heavier an image is, the more your site weighs and the more time your page will spend loading. You don't want that, specially if your site is heavy on graphics. This might help!

https://solaria.neocities.org/guides

Some CSS, JavaScript and Accessibility guides! Worth checking out!

https://eloquentjavascript.net/

This is a free, interactive book for learning JavaScript! NOTE: It is very intuitive, but JavaScript is HARD!! I still haven't learned much of it, and my website does fine without so don't worry if you end up not doing much with it. It's still useful + the exercises are fun.

And now, accessories!

• Silly stuff for your page :]

https://gifypet.neocities.org/

Make a virtual pet, copy the code and paste it in your HTML file! You'll get a little guy in your webbed site :]

https://www.wikplayer.com/

Music player for your website!

http://www.mf2fm.com/rv/

JavaScript silly effects for your site :]

https://blinkies.neocities.org/geoblinkies

Blinkie search engine!

https://www.cbox.ws/

Add a chatbox to your site!!

https://momg.neocities.org/

Infinite gallery of gifs. i've spent hours in there looking at moving pictures and out of them all, the ONLY gif i actually ended up using on my site was a rotating tomato slice. it is still there. trapped.

https://wrender.neocities.org/tarotinstructions

A widget that gives you a random tarot card!

https://www.websudoku.com/widget.php

Sudoku widget!

That's about it for now! I don't know how to end this!!! Remember to have fun and google everything you don't know :]

[izicodes]

Here’s a project idea: create a project that can be easily translated using other languages.

E.g. you know those beginner projects like “Build a calculator”? Yeah but do it in as many languages/frameworks as you can.

E.g. (again) I would build a calculator in:

JavaScript

HTML, CSS, JavaScript

HTML, SCSS, jQuery

Python console app

C# console app

Lua console app

WPF

Django

C# ASP.NET

You get the idea, building a singular “project” in various languages. This would be for fun, best way I believe to see how you could mend your project’s logic in the other languages syntax and concepts.

Might do this in the future, I don’t know yet 👩🏽‍💻⚡️

[fujocoded]

Funding FujoCoded: Stretch Goals!

It’s time! With our first goal met (🎉 thank you!), let’s talk about stretch goals. We have quite a few planned, so we're going to go through them one by one and explain what they are and why we chose them!

Before we go down the list, here's something fun:

Sticker Unlock: At 45 backers, we also unlocked one more sticker!

The goal of our campaign is to cover business expenses most of all. The unlocked content is an extra token of gratitude for your support that also helps us meet our own targets! 

With that said, let's get to our stretch goals...

$4,000: "That's Why I Ship On Company Time" Ao3 Sticker

At $4,000 we'll unlock one more sticker design that you can add to your collection! 

Our first version of this "shipping" sticker features VSCode and a terminal, but there's more than one type of shipping... here's to the other one!

$5,000: "Using NPM with Javascript" Article

Next up, we have our first article. Our plan is to add an Articles section to @fujowebdev where we'll collect simple, free guides to help beginners get past the roadblocks we see them encounter!

This first one will cover the basics of NPM, a core element of modern JavaScript!

"How do I install this JavaScript library? How do I run this open source JavaScript project? How can I get started creating my blog using a tool like @astrodotbuild?" are some of the most common questions we get in our Fandom Coders server. 

Let's give *everyone* the answer!

$6,000: Offering Website Art Prints

Next up, we'll turn the excellent art on our website into prints! These will be (probably) 8x10-sized art prints that will look amazing without breaking the bank. Full specs soon!

...and speaking of the site, you have tried moving the windows, right?

$7,000: "Catching Up With Terminal" Article

Next, another common issue for beginner developers: how to start learning how to handle the Terminal.

This will require some research to determine the major roadblocks, which is how our project operates: active learning from those going through it all!

$8,000: "Crucial Confrontations" Article

And last (for now), something very dear to us: an article extracting some wisdom from the book "Crucial Confrontations": https://www.amazon.com/Crucial-Confrontations-Resolving-Promises-Expectations/dp/0071446524

This may seem like an unusual choice, but it highlights how our teaching goals go beyond programming to cover collaboration!

After years of working within our community, we repeatedly found that developing effective communication and confrontation skills helps our collaborators thrive. Unfortunately, the world doesn't teach us how to effectively (but kindly) hold each other accountable.

Some of our most involved collaborators have read this book and found the tools within it transformative. Given this experience, we deeply believe that making some of this wisdom easily accessible (without having to read the full book) will allow all of us to collaborate better!

If we can reach $8,000, this will enable us to test this hypothesis and learn how teaching soft skills beyond programming influences what we're able to achieve! It's a bold idea, but we're excited to see how it turns out in practice.

Help us make it there!

And that's all...for now!

If you want to hop on Twitch right now, you can join us as we put some extra polish on our shiny new FujoCoded website.

And remember, you can back our campaign here to help us achieve these goals and more:

[sagecodex]

Jcink Coding Communities & Resources

Coding shouldn’t feel like some exclusive, unattainable club. We all started somewhere—most of us just messing with elements to try customizing them before we got ✨ambitious✨ and started building our own projects. 

Most of us are hobby coders, and we can’t always hold everyone’s hand as they’re getting into the community. Plus, a lot of our knowledge is hobbled together according to need (maybe that’s just my personal experience though lol). But we can share the resources and communities we use to build our sites and skins with you. So here’s my ever-growing list of communities, resources, and learning tools I’ve used, and still use every day, to build my projects.

If I’ve missed a valuable community or resource, let me know so I can add it to the list! And if you’re a coder with resources on your blog, reblog this with a link to a tag that others can follow! 

Forums

Jcink Support Community This should be everyone’s first stop shop when it comes to Jcink. The support forum has an active community that’s ready to help with specific problems, and is full of very specific codes that usually don’t ever make it to other resource forums. Learn how to use the search function to find what you’re looking for!

Caution to the Wind The OG jcink rp resource site at this point. It has a lot of what we now consider essential building blocks of our forums, as well as tutorials to teach you how to do things.

jCodes A community that is mostly full of JavaScript coders, with an amazing collection of Jcink plugins to optimize your forum and add functionality. Not necessarily the best for learning, but definitely a wealth of resources.

Sourced A mini-resource community, hosted by Essi. It’s the home of many useful resources for forum development that Essi and others have put together. This is not an active community, but a home for resources. 

RPG Initiative A resource forum for more than just Jcink rp’s. There isn’t so much a coding community here, but there are some great coding guides in the codex.

RPG Directory Another general resource site, the coding community here is pretty quiet these days, but it has some classic tutorials and resources worth visiting.

Discord Groups

The Jcink Community Corner A great community for coding, as well as writing and general site management. For newbies and pro’s alike! This is the general home for most of us (afaik), and is probably the biggest/most active group of jcink coders on discord.

Coding Camp A discord community for all levels of coders. Camp offers regular coding challenges, as well as a variety of resources for beginners who might not know where to start but want to get into the thick of things.

General (and free!) Learning Resources

If you’re just starting out, want a general refresher, or are a seasoned pro looking to add some credentials to your name, these resources are for you! All of them are free and are not Jcink-specific.

Free Code Camp Learn how to code for free! It walks you through the basics to build the fundamentals you need to start on more complex projects. I’ve done the CSS and JavaScript courses and cannot recommend it enough.

The Odin Project A full stack curriculum that I’ve heart great things about! I haven’t used it myself so I can’t speak to it, but their JavaScript and CSS courses looks amazing.

Flexbox Froggy A game to learn how to use flexbox and all its corresponding properties by organizing some frogs and their lilypads. When I take a break from coding, I always play a round of flexbox froggy as a refresher.

Grid Garden A game to learn how to use CSS Grid! A lot like flexbox froggy, but with vegetables. 

CSS Tricks Not recommended to open until you have a basic handle on things, only because it has a wealth of articles that are easy to get lost in. But if you’re looking for how to do something specific, chances are CSS Tricks has an article on it!

Stack Overflow An active community for coding of ALL kinds, every question about coding ever has been asked and answered here somewhere. 

W3 Schools The reference sheets on W3 are tools I reference all the time. I always have a tab with the CSS or JavaScript references up, because nobody can remember all the properties and what they do off the top of their head!

CodePen A place to start creating your own codes! It has live updates, so you can see what you’re creating as you make it. And you can use it to create a nice little portfolio for yourself! You can also “fork” other users’ codes to play with them, figure out how they work, and learn how to implement those practices into your own work. (side note: if you see my profile on CodePen, no you didn’t, it’s a mess)

[cs-med-world-insights]

How to get into Coding!

Coding is very important now and in the future. Technology relies on coding and in the future you will need to know how to code to get a high-paying job. Many people consider having Computer Science field-related jobs, especially in AI. What if you are interested it in general or as a hobby? What if you don't know what you want to do yet for college?

Pick a language you want to learn: Personally, I started out with HTML and CSS. I recommend if you want to do web design HTML and CSS are good languages to start with. Otherwise, start with JavaScript or Python.

2. Find Resources: Basically you want to look at videos on YouTube, and take classes that have coding like AP CSP, AP CS A (harder class), Digital Information Technology, etc. You can also attend classes outside in the summer like CodeNinjas and use websites like code.org, freeCodeCamp, and Codecademy. Also, ask your friends for help too! You can find communities on Reddit and Discord as well.

3. Start Practicing: Practice slowly by doing small projects like making games for websites and apps. You can work with friends if you are still a beginner or need help. There's also open-source coding you can do!

4. Continue coding: If you don't continue, you will lose your skills. Be sure to always look up news on coding and different coding languages.

5. Certifications: If you are advanced in coding or want to learn more about technology, you can do certifications. This can cost a lot of money depending on what certification you are doing. Some school districts pay for your certification test. But if you take the test and pass, you can put it on your resume, and job recruiters/interviewers will be impressed! This can help with college applications and show initiative if you want a computer science degree. This shows you are a "master" of the language.

[vexacarnivorous]

Do you know where to starts with programming? I want to learn but there’s so many types of codes and systems that I don’t know where to start.

Ultimately, it depends entirely on what you want to do with programming. Do you want to make websites? HTML, CSS & Javascript (in that order). Do you want to make games? C++, Java or Lua. I myself am learning Python (as well as HTML and CSS), which is a general-purpose language that's good for data science, machine learning and web development and is often recommended for beginners. You can learn more about different programming languages here, since it seems like you're overwhelmed because there's so many options (understandable).

HTML and Python is often said to be the easiest to learn, so if you're really stuck, you can start there. If you want to learn Python, I answered an ask recently about where you can learn it.

For any websites that I recommend you use, try The Odin Project (primarily for web development learning) - I've tried it out and I recommend it, and they focus on trying to teach you practically. Another good website is freecodecamp, which has more varied options! I also suggest you search up "coding exercises" on your search engine of choice to practice your coding knowledge, since just learning programming on Codecademy or whatever won't really hammer it in. There's heaps of sites for exercises like Exercism, Project Euler, LeetCode, etc.

If you're still not satisfied, I've also heard someone recommend this course before, but I've never tried it. I hope this helped!

[divinector]

Text To Speech Converter JavaScript Check out Divinector YouTube Channel for more  

[mountmortar]

do you happen to know any site building tutorials to follow and learn from? been having a hard time finding a place to start with my own neocity but the free reign and customization of them interests me a lot :0c

ABSOLUTELY! I do want to stress one thing if HTML/CSS is something you're not familiar with: It's okay if your website doesn't look like the most creative, eye-popping thing in the world! I've seen sooooooo many people get so discouraged because their beginner websites don't look like the flashier websites you see on Neocities' front page (by people who've been coding for a Long Time, mind you!) and like!!! That's fine!!! The code of my own site was quite possibly the worst thing you've ever seen thrown together into one big CSS soup before I Literally Just Rewrote It Today, After A Year Of Having A Neocities. And so, with that being said:

As anyone on the internet might do, w3schools is the absolute first place I'd recommend to beginners! There are videos, it's mostly a text-based learning site with lots of exercises to test your knowledge. If you'd prefer videos:

My personal favorite guy on Youtube to learn coding things from is Giraffe Academy: Here's his full course on HTML! The video itself is about two hours—I skimmed through it and everything seems to be perfectly oriented towards beginners (I haven't watched it in its entirety, but I have seen his videos on C# and Python [programming languages, don't worry about it] and they did a lot to help explain certain things to me that I didn't know previously!).

BroCode's HTML in 1 hour and CSS in 1 hour are pretty good! His videos do include a little bit on how to implement some JavaScript here and there, but nothing major or terrifying.

Here's a playlist of HTML/CSS tutorials in bite-sized videos, too! Think about 10-25 minutes per video.

I will say that searching for YouTube videos on HTML/CSS will always sort of gear more towards what people in the professional sphere are looking for rather than what you'd see on Neocities.

As for Neocities-specific things (which may be the actual point of your ask! Might've misinterpreted the hell out of it oops):

sadgrl.online is perhaps the most known website on Neocities, largely because the website itself not only has a layout maker you're free to use if you want to make a website now but the thought of writing HTML/CSS from scratch terrifies you, but also HTML/CSS guides themselves! There's also a bunch of links you can use to help fluff up your site a bit, generate HTML code for you, or just fluff up your site in general.

The Melonland Project is also dedicated to providing website development tools and tutorials for beginners: here is its guide to making a website on Neocities! It also provides a link to learnlayout.com, which I'll link here as well—a website for helping you learn CSS layouts!

And, once you've got the hang of how CSS works but are still feeling unable to code it yourself (no ideas? just not feeling up to it? FUCK MAN DO I UNDERSTAND THAT) Eggramen has free CSS pages you can use, and all you have to do is write the HTML for it!

But I would always focus more on learning HTML first before any CSS—and then learning how to integrate CSS into HTML via inline styling (which those video tutorials do!) before worrying about any external stylesheets or whatever. HTML is the actual building block—CSS just makes it look pretty.

[codingflicks]

Analog Clock Design

[astridvalencia]

How to Learn Programming?

Learning to code can be a rewarding and empowering journey. Here are some steps to help you get started:

Define Your Purpose:

Understand why you want to learn to code. Whether it's for a career change, personal projects, or just for fun, having a clear goal will guide your learning path.

Choose a Programming Language:

Select a language based on your goals. For beginners, languages like Python, JavaScript, or Ruby are often recommended due to their readability and versatility.

Start with the Basics:

Familiarize yourself with fundamental concepts such as variables, data types, loops, and conditional statements. Online platforms like Codecademy, Khan Academy, or freeCodeCamp offer interactive lessons.

Practice Regularly:

Coding is a skill that improves with practice. Set aside dedicated time each day or week to code and reinforce what you've learned.

Build Simple Projects:

Apply your knowledge by working on small projects. This helps you gain hands-on experience and keeps you motivated.

Read Code:

Study existing code, whether it's open-source projects or examples in documentation. This helps you understand different coding styles and best practices.

Ask for Help:

Don't hesitate to ask questions on forums like Stack Overflow or Reddit when you encounter difficulties. Learning from others and getting feedback is crucial.

Join Coding Communities:

Engage with the coding community to stay motivated and learn from others. Platforms like GitHub, Stack Overflow, and coding forums provide opportunities to connect with fellow learners and experienced developers.

Explore Specializations:

As you gain more experience, explore different areas like web development, data science, machine learning, or mobile app development. Specializing can open up more opportunities and align with your interests.

Read Documentation:

Learn to navigate documentation for programming languages and libraries. It's a crucial skill for developers, as it helps you understand how to use different tools and resources effectively.

Stay Updated:

The tech industry evolves rapidly. Follow coding blogs, subscribe to newsletters, and stay informed about new developments and best practices.

Build a Portfolio:

Showcase your projects on platforms like GitHub to create a portfolio. It demonstrates your skills to potential employers or collaborators.

Remember, learning to code is a continuous process, and it's okay to face challenges along the way. Stay persistent, break down complex problems, and celebrate small victories.

[vorenado-m]

ok that post has 7 reblogs which is kind of exciting but also very embarrassing cuz the game doesnt do anything yet.

i am an aspiring [front-end] web developer and HTML, CSS, and javascript are foundational parts of that job, so i have a solid basis for making an HTML5 game using javascript.

ive probably got around 2-3 dozen hours of crying over javascript under my belt and ive been doing it semi-regularly for a few months (just kind of building random bullshit-- the first independent project i made was a number guesser, and more recently i made a wordle clone that i based a little more than loosely on this tutorial) so thats a beginner project but i am by no means like. just dipping my toes into javascript.

ive been adapting from this specific youtube tutorial. the main changes ive made are the player moving instead of the map. it requires knowledge of objects, nesting, and object/constructor methods, which is something i didnt have a strong basis in before i started the tutorial, but its really straight-forward and the guy does a great job explaining it.

if youre having trouble with the tutorial cuz your foundational javascript isnt up to par, freecodecamp just updated their javascript algorithms and data structures tutorial and it fucks SOOOOO HARD. the first project is building a simple text-based RPG which is what inspired me to try and build a simple 2d game. i dont recommend making this jump unless youre actually at least semi-comfortable in javascript but it is VERY doable.

i drew the sprites in paint.net which is free and it has a grid tool and allows transparency. no tutorial for that i just like pixel art even if im really bad at it lol.

[information-will-not-harm]

7 extensions of VS-Code to boost productivity.

Boosting your productivity as a beginner programmer is essential. Visual Studio Code (VS Code) offers many extensions to streamline your workflow. Here are some of the best VS Code extensions to help you write cleaner code, debug efficiently, and manage projects effectively.

1. Prettier - Code Formatter

Function: Automatically formats your code to make it clean and consistent.

Usage: Saves time on manual formatting and ensures your code adheres to style guides.

Install: Search for "Prettier - Code formatter" in the extensions marketplace and install it

2. ESLint

Function: Identifies and fixes linting errors in your JavaScript and TypeScript code.

Usage: Helps catch common errors and enforce coding standards.

Install: Search for "ESLint" in the extensions marketplace and install it.

3. GitLens — Git supercharged

Function: Enhances the Git capabilities in VS Code by providing insights into code authorship and history.

Usage: This makes it easier to understand the history and evolution of your codebase.

Install: Search for "GitLens" in the extensions marketplace and install it.

4. Code Spell Checker

Function: Checks your code for spelling errors.

Usage: Helps catch typos and improve code readability.

Install: Search for "Code Spell Checker" in the extensions marketplace and install it.

5. Path Intellisense

Function: Autocompletes file paths in your code.

Usage: Saves time and reduces errors when working with file paths.

Install: Search for "Path Intellisense" in the extensions marketplace and install it.

6. Bracket Pair Colorizer 2

Function: Colorizes matching brackets to make it easier to identify block structures.

Usage: Improves readability of your code, especially for nested blocks.

Install: Search for "Bracket Pair Colorizer 2" in the extensions marketplace and install it.

7. Pets

Function: Adds a fun, interactive pet to your VS Code workspace.

Usage: Provides a cute, engaging way to take short breaks and reduce stress.

Install: Search for "Pets" in the extensions marketplace and install it.