this is a resource carrd with a focus on coding and web design. it's not perfect on mobile but everything should be readable. some things may sound harsh but i promise it's comedic - not a personal slight against anyone. if i'm wrong on something feel free to correct me i'm not an authority on coding or carrds why so serious im the joker

UPDATE 9/13: hii omg ty for 3k views!! im sorry i haven't updated with anything new yet - college has started for me so not only am i busy but i'm outta the loop on a lot of newer codes/tricks.. do keep checking for when i add smth new tho! also.. this might get revamped soon

latest carrd (9/3):


1. code ≠ good carrd
this sounds rich coming from someone who regularly uses css but you don't need pro plus or even pro standard to make a good carrd. in fact, most good carrds that use code should start out with a mindset of page structure first, css second. i often find im just using code to get around carrd's irritating margins / bounding boxes rather than to add effects.

you can also utilize carrd's own features to use them in creative ways. experiment w/ gradients, highlights etc.

here's some examples of standard carrds w/ my notes (my handwriting is sloppy sorry) 1, 2

2. know carrd's limitations
carrd is a very finnicky website - sometimes shit doesn't work or doesn't work how you'd think. for example, links won't load properly if they're in highlight markdowns. unless you do it =/=like this==

some scripts also won't work in carrd due to it loading the entire carrd as one page. while you're able to mimic the appearance of a website by having "pages", they're sections. code may stop working when you switch sections or if you put them in a section that isn't home due to this.

it's also important to note that when bringing codes from other sources that they weren't intended for carrd. this is why certain scripts don't work together, or might need adjusting. if it doesn't work as a div, try making it a class instead !

4. accesibility
i shouldn't have to tell you to optimize your carrds for multiple platforms, right? if you're on mobile only, disregard this and godspeed to you. if you're on desktop please learn what this is:

(click / tap)

(i know its easy to forget, i forget all the time this is just your reminder)

accesibility redux
#EpicNews there's code you can use to tell #div and .class in your embeds what to do on mobile! this is kinda hard to explain so i'll use an example (pics on the right, first pic in slideshow is desktop, second is mobile)

the marquee i was using in this carrd loaded weirdly on mobile, but because it was in a <style> embed i couldn't just use carrd's tabs to fix how it loads.

that WAS until i found @media. using @media only screen and (max-width: 600px) { (average phone screen dimensions) allows you to tell any element what to do when carrd detects them being loaded on a screen with those dimensions.

you can put any div/class in the @media lines to add code as you want - i was just lazy so i made the marquee not load at all lmao.

code ≠ good carrd cont.
code hardly matters because even if you have scrollbars and bouncing text, it can look fuck ugly. font, color, page structure and balance choices are all things that will come to you regardless of coding experience, and that you can lack in spite of coding experience.

take a look at this carrd i made using a friend's template. the original template worked great, but this is awful. the over-use of the same color and cluster of text and effects makes it unreadable. the font i embedded doesn't fit at all either. if the still wasn't overwhelming enough, i had two marquees (moving text) going in two different directions. compare this to the original which worked way better.

3. google / inspect element
before you ask someone how they did something, get into the habit of googling it first (stackoverflow and w3schools my beloved !) and if all else fails get used to source inspecting and crtl+f-ing to find what you need. " but 17! isn't that stealing? are you promoting stealing people's hard work? " you don't own code you found on 30secondsofcode and edited. unless you've coded something complicated that can't be easily replicated, or you've written an actual script with java, you don't own code. it's been done millions of times before you, by the billions of people that taught themselves html. the very nature of html and web design is to share what you've found and learned with other people.

accesibility cont.
some advanced accessibility tips for you! you can give elements css that will only load on mobile, meaning you can hide elements that won't load properly on mobile (put display: none; in the mobile tab in style) or change how they load entirely !

desktop vs mobile (click / tap)

also, use em instead of px in your font-size code when possible, because em stays consistent across different aspect ratios :)

a lot of accessibility things are a given so just listen to what impaired people say and use your best judgement !

* i haven't experimented with telling certain elements how to load on desktop using this code.


1. header + marker end
dropdowns !


1. windows
use container css (or make one in an embed if you're crazy) to simulate a "window"or 'tab"and use position: relative; + top / right / left codes to move it just over your main container.
more coming soon !

note: this is for carrd tricks, not code. for code see here!

1. background pixels
follow the settings below to make a looping pixel your background (works with anything thats a line/loops cleanly), can also be placed at the top of your carrd!


🤙 = fav :)

no credit needed for any of these! just spread the knowledge :) only listing code i fixed for carrd / haven't seen anywhere else.
🤙 draggable box
gif as text background
double border text
rainbow gradient box style thing (ribbed for her pleasure)
image blur hover everyone pretends not to have
🤙 custom default cursors
🤙 imported font families
element border around text + image
slidable labels/buttons + vertical version (pastebin)

if you see a code you want in any of my carrds, just ask!
or refer to tip 3 😏

🤙 yokai - first resource carrd i used and a great starting point for pixels / helpful websites / bread n' butter code
🤙 resource - great abundance of cool resources and snazzy aes
teaclub - has cool stuff most sites don't list
funhouse - love my buddy kim
🤙 codes - holy grail of useful codes and cute pixels
graphics - what it says on the tin
xyz - all around good resources / lots of good pixels

mf2fm - the answer to 'where did you get X code?' 99% of the time
🤙 w3schools - please fucking use it its so good (also you can share code with TryIt editor and it'll have a preview)
🤙 stackoverflow - not rlly the main page itself but if you see this while googling code questions the answers are usually helpful
gifcities - great place for actual webcore gifs
🤙 y2kaestheticinstitute - y2k backgrounds
y2klostandfound - y2k backgrounds
futurelapis - dbz gif sideblog :) (cell saga mostly)
shishka - webcore-y stuff
backgrounds - does what it says on the tin
🤙 webfinds - neat webcore stuff

my carrd archive - recently updated !
🤙 did / osdd self help - immensely helpful
kriol-inglish dictionary - this one's for me idk learn my language
steamunlocked - shhhhh
🤙 9anime - high quality anime / jp media

thought i'd be cute and add a lil about me page :)


i'm android 17, lapis, zeni etc. she/he 18yrs (9/10)
i'm a system host + fictive, bigender dudebro and afromestizo. im an average enjoyer of carrd (obvi) dragonball, fighting games, dbd and yakuza. i have an art main but i don't engage with any subtwts publically anymore, - sorry! you can frq my main priv if you want but i'm pretty picky.