Basics of making a web code on SoloLearn

Basics of Web Codes

There are many tips and tricks to building web codes on SoloLearn. Please familiarize yourself with the sections below, by tapping on each subject title to view the content related to the title.

Interactive Code

Making your code interactive by using animations, transitions, colour schemes, UI, UX, basic JS skils can help push your code to be more interesting. Drawing something using CSS or SVG may look nice, but do you know what is nicer? Drawing something with CSS or SVG and then ADDING an onclick event to allow your user to interact with the drawing. It may sound small, but people may look at your code a lot more.

For Example: You could add randomisation into your project if it is a game, this will increase the average user's "watch time" on the project.

Avoid Errors

It is a very good idea to avoid errors when publishing your project on SoloLearn. This is because, when an error pops up, it will show in the console log, which looks very messy, especially on mobile. Sometimes, some users may use other browsers that arent compatiable with animations or even HTML Canvas, you will have to find a work around to tell them why they are unable to view / interact with these things. So PLEASE, test your code before you release it.

Presentation / UI

The presentation and UI of your project matters a lot in Web Codes. You will need to at least try to make it viewable in mobile and desktop devices, (always start with mobile first design please). Setting the positions, margins and layout correctly can make the difference between two codes, even if they function in the same way, sometimes the colour schemes, and te layouts make it look more appealing to users.

Advertising

Well this doesnt include coding, but advertising your code / project is a good thing to do to get yourself out there as well. Advertising sensibly on advertisment threads on SoloLearn as well as your other codes may attract other people to view your projects. Also, upvoting and commenting positively on other peoples codes may attract them to see yours too.

Having a unique idea

A unique idea that no one else has thought of can propell your code into the trending section. This could be a mechanism, an amazing animation, an algorithm, or maybe its combined with all 3? It could be anything! Sometimes improving the UI and UX can turn a great code into a legendary code!

Templates

For coding, Templates are king! Especially when you make a lot of web codes! Once you have more than 10 codes you will probably get bored of the whole writing the base html tags like html and head and body constantly. You might as well make a template in your IDE / Editor and then use that as a template to copy and paste from, whenever you make a new code. This saves some time when quickly making new projects.

Standing out (signatures)

Making signatures (For example: "Created by Jay" etc) can help your code stand out and give it more of an authentic view! It is similar to brand recognition, they help the user remember what sort of code they are getting when they see your code with your signature :).

Making changes (refactoring)

Refactoring your code helps a lot, especially whilst making web codes. This can make your code look much more tidier and adhere to best practices. Abstrating your code helps too as well as organising. Doing all of this will help make your code look much better to potential employers and fellow viewers.

Animations / Transitions

Animations and Transitions are good for your viewers. They are usually smooth and do help the Users experience more interactivity. These animations can be done in various ways, the most common way is to use CSS transitions / animations. It is also a good idea to do animations and transitions using CSS as there is less memory load vs using JS.

Splitting Code (structuring)

Splitting your code up does help a lot as it makes it easier for you and others to debug the code if anything is wrong. Other people reading your code on SoloLearn will like to read your code to see how it was done. And this helps for presentation too.

Keep it Simple

If you are new to SoloLearn, and not very experienced in programming, you may have noticed in the trending section that there are awesome web codes in there (and some console codes) that will blow your mind. You may think to yourself: "Maybe I can do that in 2 weeks!" well, probably not, most of those trending codes are done by people with a lot of experience, but over practice and time, YOU WILL be one of those experienced people if you just keep going. How do you do this you may ask? Well... by keeping it simple, have a few small ideas, note them down, try to do those small ideas, maybe even if its as simple as drawing a blue box, there will always be people that like what you make. This will then give you the confidence to make bigger and better projects, and then one day you will be in that trending section :D.

Basics of making Web Codes on SL