#learn CSS properly

[gagande]

PureCode company | Neglecting to learn CSS properly

Overall, neglecting to learn CSS properly can hinder your ability to create visually appealing, functional, and accessible websites, ultimately impacting the success of your projects and career prospects in web development.

[tsubasaclones]

We’re doing html in this class for a short period and it made me think of my own personal html nightmare site and I realized it’s only the home page that looks awful on my phone. Everything else seems to resize itself. How did I manage that

[bonestrouslingbones]

so far the html classes have been a mixed bag in that they have almost entirely taught things i already know pretty well by now (today i walked for 20 minutes in >20° weather to learn the wisdom of how to use <p> and <b>) but then i learn something very very basic that i absolutely should have already known that i already immediately edited into ebony's blog because i realized how stupid the original method i was using was (<br> works much better for the sticky notes than copying/pasting an invisible unicode character 10 times until the line breaks by itself)

[manonamora-if]

The 100% Good Twine SugarCube Guide!

The 100% Good Twine SugarCube Guide is a coding guide for the SugarCube format of Twine. It is meant as an alternative to the SugarCube documentation, with further explanations, interactive examples, and organised by difficulty. The goal of this guide is to make the learning curve for new SugarCube user less steep, and provide a comprehensive and wide look over the format.

VIEW / DOWNLOAD THE GUIDE!!!!

The Guide is compartmentalised in (currently) four categories:

THE BASICS or the absolute basics to start with SugarCube. No need for extra knowledge. Just the base needed to make something.

THE BASICS + adding interactivity, and creating a fully rounded IF game May require a bit of CSS knowledge (formatting rules)

INTERMEDIATE MODE adding more customisation and complex code Will probably require some CSS knowledge, and maybe some JavaScript

ADVANCE USE the most complex macros and APIs Will surely require some JavaScript/jQuery knowledge

Note: The Advanced Use includes all the APIs, macros, and methods not covered by the previous categories. This includes code requiring very advance knowledge of JavaScript/jQuery to be used properly.

Each category explains many aspects of the format, tailored to a specific level of the user. More simpler explanations and examples are available in earlier chapters, compared to the later ones.

If something is unclear, you found a mistake, you would like more examples in the guide, or would like a feature covered, let me know!

The Guide currently covers all macros (as of SugarCube v.2.37.3), all functions and methods, and APIs. It touches upon the use of HTML, CSS, JavaScript and jQuery, when relevant. It also discusses aspects of accessibility.

The Guides also provides a list of further resources, for the different coding languages.

The Guide is available in a downloadable form for offline view:

HTML file that can be opened in Twine

.tw file that can be opened in Twine

source code, separating the chapters, .js and .css files

GITHUB REPO | RAISE AN ISSUE | TWINE RESOURCES TWEEGO | TEMPLATES | CSCRIPT 2 SG GUIDE

Twine® is an “an open-source tool for telling interactive, non-linear stories” originally created by Chris Klimas maintained in several different repositories (Twinery.org). Twine is also a registered trademark of the Interactive Fiction Technology Foundation.

SugarCube is a free (gratis and libre) coding format for Twine/Twee created and maintained by TME.

VIEW / DOWNLOAD THE GUIDE!!!!

As of this release (v2.0.0), it is up to date with the version 2.37.3. If you are looking for the guide covering SugarCube 2.36.1, you can find it on my GitHub.

Note: the Guide is now complete. There won't be further substantial updates.

[genericpuff]

All the cool kids use ComicFury 😘

Hey y'all! If you love independent comic sites and have a few extra dollars in your pocket, please consider supporting ComicFury, the owner Kyo has been running it for nearly twenty years and it's one of the only comic hosting platforms left that's entirely independent and reminiscent of the 'old school' days that I know y'all feel nostalgic over.

(kyo's sense of humor is truly unmatched lmao)

Here are some of the other great features it offers:

Message board forums! It's a gift from the mid-2000's era gods!

Entirely free-to-use HTML and CSS editing! You can use the provided templates, or go wild and customize the site entirely to your liking! There's also a built-in site editor for people like me who want more control over their site design but don't have the patience to learn HTML/CSS ;0

In-depth site analytics that allow you to track and moderate comments, monitor your comic's performance per week, and let you see how many visitors you get. You can also set up Google Analytics on your site if you want that extra touch of data, without any bullshit from the platform. Shit, the site doesn't come with ads, but you can run ads on your site. The site owners don't ask questions, they don't take a cut. Pair your site with ComicAd and you'll be as cool as a crocodile alligator !

RSS feeds! They're like Youtube subscriptions for millennials and Gen X'ers!

NSFW comics are allowed, let the "female presenting nipples" run free! (just tag and content rate them properly!)

Tagging. Tagging. Remember that? The basic feature that every comic site has except for the alleged "#1 webcomic site"? The independent comic site that still looks the same as it did 10 years ago has that. Which you'd assume isn't that big a deal, but isn't it weird that Webtoons doesn't?

Blog posts. 'Nuff said.

AI-made comics are strictly prohibited. This also means you don't have to worry about the site owners sneaking in AI comics or installing AI scrapers (cough cough)

Did I mention that the hosting includes actual hosting? Meaning for only the cost of the domain you can change your URL to whatever site name you want. No extra cost for hosting because it's just a URL redirect. No stupid "pro plan" or "gold tier" subscription necessary, every feature of the site is free to use for all. If this were a sponsored Pornhub ad, this is the part where I'd say "no credit card, no bullshit".

Don't believe me? Alright, look at my creator backend (feat stats on my old ass 2014 comic, I ain't got anything to hide LOL)

TRANSCRIPTS! CHAPTER ORGANIZATION! MASS PAGE UPLOADING! MULTIPLE CREATOR SUPPORT! FULL HTML AND CSS SUPPORT! SIMPLIFIED EDITORS! ACTUAL STATISTICS THAT GIVE YOU WEEKLY BREAKDOWNS! THE POWER OF CHOICE!!

So yeah! You have zero reasons to not use and support ComicFury! It being "smaller" than Webtoons shouldn't stop you! Regain your independence, support smaller platforms, and maybe you'll even find that 'tight-knit community' that we all miss from the days of old! They're out there, you just gotta be willing to use them! ( ´ ∀ `)ノ～ ♡

[ataleofcrowns]

Hi so sorry to bother you but I want to learn how to make IFs, so I've been using twine and trying to learn how to use sugarcube but like how 😭😭😭

Babes I am so embarassed I'm literally studying computer science oh my god. Like in theory I know that programming languages are different but this is the first time java vs javascript is really hitting,,,,

Do you have links to any resources you used to learn? Like how you randomized variables (for the 'i'm into both men and women' option's gender setting) and how to do the pronoun thing properly, and stuff like the codex, plus if you can how you customized that sidebar

Thank you and I'm sorry to bother you!!

No worries at all!! Here's a masterlist of Twine resources you can use for the things you mentioned and more. It includes tutorials for beginners, including multiple different ways on how to code pronouns, CSS customization and templates for your game, etc.

For the randomization of variables, the line of code you want is <<set $variable to either("option1", "option2", "option3", ...)>>

But for my purposes specifically, to maintain an even 2 male/2 female LI split, I had to use the code in a little more convoluted way since randomizing all the genders with that code could end up with an "uneven" balance (like 3 out of 4 LIs being randomized as female, or all LIs ending up as male).

If you want to do something similar with having a 2 male/2 female LI randomization, here's how I went about it, though I'm sure there's a much quicker way to do it. Mind you I was a total beginner when I wrote this haha:

Basically what this does is randomize R's gender and randomize X's gender first to either male or female with the first two lines. If R and X are both set as male or female, then A and D will both be set as the opposite. If R and X are set as different genders, however, then A's gender will be randomized next. Then, based on whether A is male or female, D's gender will be selected to complete the 2/2 split.

Hope this helps!!

[izicodes]

I learnt the 'vw' unit in CSS~!

% and rem/em units weren't working properly for the responsiveness so I search online for other units I could use and I came across vw and now I'm satisfied! Scales semi-smoothly~! 😏

Using vw means the font size is directly proportional to the width of the viewport.

You don't need to worry as much about setting breakpoints for different screen sizes. The font size adjusts automatically based on the viewport.

Hope this helps other people learning CSS and working on making their site responsive! I used the vw unit on the font-size, padding height and width of the elements! Might need to add it to the box-shadow property too? 🤔💭

[shipburner]

Over two years ago, I was inspired by @transhitman's personal Disco Elysium Skill project to make my own Disco Elysium Skills. Today, I am proud to present my own take on the idea, the Internal Family Skills, having finally gotten my brain in gear enough to finish it in a showable capacity. This isn't the final form of the project, but I'd need to learn CSS to make a full fake menu on my Neocities, and a new tablet to make the Skills as painterly as the game's art style (which I might not do, since this style is basically what the inside of my brain looks like).

We're starting off with the Manager (MGR) Attribute: Your capacity to present sufficient normalcy and interact with the people around you. Its six Skills are:

Bureaucracy

Disguise

Distress Tolerance

Hiya

Pakikiramdam

White-Passing

[ Firefighter | Exile | Self ]

Bureaucracy

Understand process and procedure. Pull on the levers available to the public.

COOL FOR: Pencil-Pushers, Concerned Citizens, The Maliciously Compliant

Bureaucracy is what humans use for detailed communication in place of emotional honesty. This is not, in fact, an imposition -- rather, it allows for smooth cooperation and organization at large scale without the superior's scorn or the inferior's resentment getting in the way. Your Bureaucracy skill familiarizes you with paperwork and precedent, assures that the powerful view you as properly compliant, extracts assistance from systems that don't care about you as a person, and teaches you how to work to rule.

At high levels, Bureaucracy lets you navigate hierarchies, provide and access information easily, and fill in gaps in existing procedure where there is none. It'll also make you a fussy, obstinate smartass who refuses to participate with anyone emotionally or act without structure. At low levels, however, you'll be adrift in a paper sea designed to silence, exhaust, and oppress you.

Disguise

Manipulate with masks. Fit yourself into palatable forms.

COOL FOR: Changeling Children, Sociopathic Butterflies, Emotional Laborers

Disguise wants you to know that if you can't be yourself, it's always okay to be someone else. As your handy-dandy superficial charm, Disguise feeds you the lines necessary for a given situation: Need to act mindful and demure at work when you're imagining gutting your manager like a fish? Disguise is already on it. Want to seem like a problem-solving super-genius when you're actually in the middle of cybersex? Disguise is running the social buffer. Trying to avoid telling the truth to your parents or scaring the hoes at the local queer scene? Got. You. Covered.

At high levels, Disguise makes you terrified of failing to live up to your image, to the extent that you'll partition off your life into different personas. You won't be tempted to become any of the masks, but by God will you not take any of them off. At low levels, though, you'll have to take all the lumps that come with never telling anybody what they want to hear.

Distress Tolerance

Endure immediate pain for long-term gain. Stay in the trap to remove the one who set it.

COOL FOR: Forward-thinkers, Sensitive Souls, Cluster Bs

Distress Tolerance is your lexicon of adaptive coping mechanisms. It snaps into action when the world is painful and unfair, identifying pain relief and things you can control. Distress Tolerance reminds you to go for a walk instead of lying in bed, to spend time with people you love instead of fighting online, and to box breathe instead of hiding in a cabinet and sobbing. It also helps you keep your goals in mind: the point of enduring the pain is to avoid hurting people and to have a better life in the future.

At high levels, Distress Tolerance makes you hyper-sane, and thus hypernormal. You'll fall victim to the seductions of personal responsibility, assuming that it's simply your duty to put up with the world's iniquities. Without it, though, you'll be a panicking woman-child ignorant of her own agency, unable to do anything about those iniquities but lash out at the people who love you.

Hiya

Feel shame yourself. Anticipate shame in others.

COOL FOR: Overton Glaziers, Panopticon Inhabitants, Human Dignity Enjoyers

Hiya isn't the cop inside your head, it's the patriarch -- instead of trying to shoot you when you've deviated from the accepted standards of behavior for a given community, it just makes you feel fundamentally unlikable and helpless. This isn't entirely a bad thing, since the accepted standards of behavior frequently involve putting others first so you don't make them feel fundamentally unlikable and helpless. That said, while Hiya teaches you that standards of behavior can change, the only tool it gives you to accomplish that is the cattle prod called "shame".

At high levels, Hiya makes you socially invulnerable -- because you don't do anything objectionable in the first place. Not only will you be self-sacrificingly afraid of being deemed deviant, you'll cringe and withdraw when others embarrass themselves regardless -- and you'll enforce shame yourself to make the cringing stop. Without it, though, you'll literally be walang hiya: a shameless, self-gratifying boob incapable of thinking about others' feelings.

Pakikiramdam

Understand that others’ needs are different. Find out what they are.

COOL FOR: Relationship-Builders, Active Listeners, Safety Tool Users

Pakikiramdam feels out everything that isn't explicitly said. It's a Skill of social moderation formed through trial and error -- knowing what will tickle someone's funny bone, whether acquiescence is hiding upset, and whether they see a given action as common courtesy or a true effort. Pakikiramdam creates models of others' internal states to better foster and maintain kapwa; to this end, it reminds you to check in, slow down, and look at the conversation from outside so you're on the same page about what's going on.

At high levels, Pakikiramdam will make you truly empathetic and understanding -- as long as people can stomach you being a busybody who demands adult communication and introspection about their wants at the drop of a hat. Too low, however, and you'll simply barge through situations assuming you already know what everyone wants, giving you no chance to build empathy in the first place.

White-Passing

Defend yourself and get away with it. Recognize and use what authority you have.

COOL FOR: Egotists, Dissatisfied Customers, Fifth Columnists

You are the phenotypical expression of a multigenerational effort to make you and your desires untouchable in any social situation. White-Passing measures your ability to live up to that standard: Can you talk over people in a meeting to make your point heard? Can you talk to a cop like he's a brave and dignified defender of your security? Can you justify the entire extractive supply chain in order to demand a better customer service experience?

At high levels, White-Passing will get you what you want, and getting what you want will reinforce the rightness of your power. Not only will this make you an entitled little martinet claiming power you lack, it'll chain you to the structures that have given you what power you have. But without it, you won't even be able to get past the cop in your own head, let alone the ones outside it, and you'll make a cult of your own disenfranchisement.

Notes:

Bureaucracy's ear-thingies are a reference to Intergalactic Advocate Bob from Jupiter Ascending.

The mask Disguise is wearing is based on Caves of Qud's gentling mask.

Thanks is due to Jeremiah Reyes' 2015 article "Loób and Kapwa: An Introduction to a Filipino Virtue Ethics", which was instrumental in me figuring out how exactly my lolo's ethics filtered through my dad to me, for good and for ill.

[blimpixels]

My New Year’s resolutions for 2025:

Side quests:

Read at least one actual book and novel

Learn HTML and CSS

Stream more drawing

Exercise more (lift weights, walk, maybe even jog)

Practice anatomy, perspective, color, and line weight

Learn how to write short stories

Take more commissions, complete them efficiently, and update my patreon more consistently

Finish 3 small comics and properly start at least one big one

Give all of my OCs more equal spotlight

Have sex again

Cook more often and eat more vegetables

Get a new windshield

Main quests:

Get a full time job/make a sustainable amount of money

Move out

Get a new computer for work

[ghostwoohoo]

hihi just letting yall know i made a dreamwidth! i'm slowly porting my posts over but it should be up and running properly soon! i'm still learning how to use the site as someone who knows nothing about html/css so bear with me lmao

[thats-cantorintuitive]

08-05-2024

have picked myself back up and am on the mend, I'd say. I've started working on my summer reading project for algebraic geometry! suffice to say that I am pumped!

my plans for the summer include:

2 reading projects - algebraic geometry; social sciences

brush up on my HTML; learn Java, CSS properly. Work on Julia and Python.

revise for upcoming coursework

work on my German or Italian

to be kind to myself and help myself rebuild and grow through the difficult times

here's to a good summer with a lot of learning! :')

[lavendergalactic]

HI i saw u were struggling w builder , i super lowk know how to use builder .. !!! for scrollboxes / others ( NOT ALL WORK !! ) i use hauntedmansion . crd . co , u insert the codes into " edit html " , whats rlly great abt these is that it gives u the code while being aboe to be edited ! for the bg , youll see on the sides theres a page icon , there you edit the css style string , heres the code ! ;

body {

background-image:url(' img url ! i use catbox . moe for codes ');

^ is only needed if you want a bg in your sntry !

background-color: #fff;

I HOPE THIS HELPS ! builder was super hard to learn , n bc theres basically no resources to learn , unlike carrd , im ok w teaching ppl ^_^ you can also steal codes from other builders ( guilty .. ) as long as you arent copying them / give credits properly !

omg ty this is such a big help !!!!!!!!!!!!!!!!!!!!

and ur so right there's like no resources to learn anywhere im just looking at other ppls codes and being like "whar is happening...."

thank you!

[impulsiveprogrammer]

day 2 - css

finally. (usual disclaimer: i don't know what i'm doing)

shadows

i'm completely skipping the basics because css basics are so hard BUT you know what's harder? SHADOWS. i somewhat learned the basics but not well enough to make a post about it SO logically my only option is properly learning the basics later and figuring out shadows right now. so, without further ado:

there's two properties for shadows: box-shadow (which makes box shaped shadows) and text-shadow (which makes shadows specifically for text, so text shaped).

box-shadow needs five values: horizontal offset, vertical offset, blur radius, spread distance, and color.

text-shadow needs four values: horizontal offset, vertical offset, blur radius, and color.

horizontal offset is how much the shadow is going to be dislocated to the right. if the value is negative, the shadow dislocates to the left.

vertical offset is how much the shadow is going to be dislocated downwards. if the value is negative, the shadow dislocates upwards.

blur radius is how defined/sharp the shadow is, with 0 being the sharpest possible (so higher = more blurry/less sharp). this value is optional; if you don't specify it, it's considered as zero.

spread distance is basically how big the shadow is. the higher the number, the bigger the shadow. this value is optional; if you don't specify it, it's considered as zero.

these first four values can be given in pixels (px), and the next one, the color, can be a hex code or similar

color is the color of the shadow (golly gee who would have thunk). it is also optional.

the values for box-shadow should be written in that order 1) horizontal offset, 2) vertical offset, 3) blur radius, 4) spread distance, 5) color

the values for text-shadow are basically the same, but there's no spread distance, so 1) horizontal offset, 2) vertical offset, 3) blur radius, 4) color

example for box-shadow:

box-shadow: 5px -5px 16px 8px #fff;

(text-shadow would look the same except for the spread distance, which is 8px in the example, since text-shadow doesn't have the spread distance value)

ok that's it, sorry the whole post looks like a clown who can't do their make up properly, i just had to color code everything because yes.

[sophia-sol]

the saga of my most recent efforts in maintaining my personal website, over the course of a couple days:

just spent some time updating the custom css for my linkding instance....nobody gets to see the results of that custom css but me, but I was able to fix some irritating aspects of the view that I hadn't done properly last time, and I am pleased!

SOMEDAY I will update my linkding to the most recent version! and then will be able to do some customizing to the css on the guest view!!

looking at the notes I took last time I did a linkding update....not inspiring, lol! last time I tried multiple avenues of attack and had to end up doing it the "stupid way" :P and then I had to reupload my bookmarks from backups, bc the fresh install didn't maintain the bookmarks, but I have so many bookmarks that linkding doesn't like to upload them all in one file, and it's a huge pain!

I should gird my loins and do it before the year is over though. I will be so much happier with the updated linkding!

hot damn I DID IT. I did it!!!! my linkding is now version 1.36.0 (latest) and I am soooo proud

and now, if you go to linkding.aviansoph.com you'll be redirected automatically to the shared bookmarks page! which is set up with some custom css so you can actually see all the details of each bookmark, laid out nice and readably, on a page that should respect your system's preferences for lightmode vs darkmode! my linkding is FUNCTIONAL!!!!! as a place to direct people who want to see all my recs! I'm so happy

aw heckity, I do still need to laboriously upload all my bookmarks from my manual backup. I somehow managed to port over a months-old version into the reinstall, and I did a lot of bookmark editing in the intervening months, so this is insufficient. OH WELL that's doable at least!

ok NOW I am done! my linkding shared bookmarks are a beautiful and useful thing I can show off! https://linkding.aviansoph.com/

oh shit did updating linkding somehow manage to break the javascript on the rest of aviansoph.com????

WELP I restarted my vps to see if that would fix the javascript problem, and a) it didn't, and b) now linkding isn't loading at all. my gloating was premature!

....how does a person go about trying to debug a server. where does one start.

ok so I got my linkding instance back up and running so that's all successful now! but javascript is still broken on the main site, even though it's working in linkding I am currently working my way through trying to figure out how to update my ubuntu, since it's out of date, but the standard commands I'm finding online aren't working and so I am in the weeds of trying to parse the troubleshooting options I'm seeing I think I will not get aviansoph.com's js functional again tonight. an ongoing project.

(the next day)

it's funny how much figuring out tech stuff is just about learning the specialised vocabulary, so as to comprehend what people mean when they explain things

how many different browser tabs does one person need to have open in order to figure out how to make their gd ubuntu actually agree to upgrade

"become a computer nerd" they said. "it'll be fun!" they said. I'm putting on my clown shoes.

wow the version of ubuntu I installed on my vps when I got it last summer reached end of life like a month after I installed it 🙃

I think? I might have successfully gotten my ubuntu upgrade to start????? thank u to this nerd for the info: https://dandraka.com/2020/05/31/how-to-upgrade-ubuntu-from-an-unsupported-version/ anyway now I am in the "wait for a couple hours" step so we shall see how it goes, but I am tentatively hopeful! 🤞

so the upgrade worked and I'm running a recent long-term stable release of ubuntu now. and my linkding is still working! but js is still not functional on the main aviansoph domain and I'm not sure how to approach this one. the temptation is to just rewrite the pages to not need any js anymore lmao but I don't think that's the Right Answer

great news! the js error is one I accidentally introduced several weeks ago, and then just didn't notice it wasn't working till now! it's fixed now, thank u rae, and my website is ALL FUNCTIONAL again HOORAY!

(the next day)

I figured out what a robots.txt file is and what it does, and added one to my website, and WOW my CPU usage has immediately improved dramatically! damn. shoulda done this ages ago!

so as you can see my self-teaching efforts around computing continue to bear fruit! despite the struggles involved in learning things by accidentally breaking things that I then need to fix, I love my website very much. it makes me so happy!

[citadelinfo]

A quick guide to web development

Web development is building websites and web applications, with front-end (HTML, CSS, JavaScript for UI/UX), back-end (server-side logic using PHP, Python, Node.js), or full-stack development (both included ). ) are combined

Key ingredients:

Planning: Define purpose and audience. Design: Create plans and wireframes. Improvement: Build front end and back end. Testing: Make sure everything works properly. Launch: Launch to the site server. Maintenance: Refresh and maintain regularly.

Equipment and trends:

Front end: Response, Vue.js. Background: Node.js, Django. Hosting: AWS, Netlify. Focus on Responsive Design, PWAs, and AI products.

Start learning through FreeCodeCamp and keep learning to improve your skills!

[planetamarte]

its so fucking funny im about to have THREE neocities projects upon me and i still havent properly learned css. its bullshitting my way thru with grabbing bits and pieces from templates or BUST