#Learn CSS elements

[webtutorsblog]

Advanced CSS Techniques and Best Practices - A Comprehensive Guide by WebTutor.dev

Cascading Style Sheets (CSS) plays a crucial role in web development, allowing developers to bring life and style to their web pages. If you are looking to take your CSS skills to the next level, you're in the right place! In this advanced blog post, we will delve into the world of CSS, focusing on the comprehensive guide provided by Webtutor.dev in their CSS Introduction tutorial. Get ready to enhance your CSS knowledge and discover advanced techniques and best practices.

Optimizing CSS Performance: Techniques and Tools

Efficient CSS code is essential for maintaining fast-loading web pages. We'll explore advanced techniques to optimize CSS performance, such as minimizing file size, reducing render-blocking CSS, and utilizing CSS preprocessors. The Webtutor.dev guide will provide insights into performance optimization strategies and recommend helpful tools.

CSS Layouts: Flexbox and Grid

Modern CSS layout techniques, namely Flexbox and Grid, have revolutionized web design. We'll dive deep into these powerful tools, exploring their features, properties, and best use cases. The Webtutor.dev guide will offer practical examples and tutorials to help you master the art of creating flexible and responsive layouts.

Advanced Selectors and Pseudo-classes

CSS selectors allow you to target specific elements on a web page. We'll go beyond the basics and explore advanced selectors, including attribute selectors, sibling combinators, and pseudo-classes. The blog will highlight real-world scenarios where these selectors shine, enabling you to create targeted and dynamic styles.

CSS Transitions and Animations

Adding subtle animations and transitions can greatly enhance the user experience. We'll delve into CSS transitions and animations, covering advanced techniques such as keyframes, timing functions, and complex animations. The Webtutor.dev guide will provide practical examples and tips for creating smooth and visually appealing animations.

Customizing and Styling Form Elements

Forms are an integral part of web applications, and customizing their appearance can greatly improve usability and aesthetics. We'll explore advanced techniques for styling form elements using CSS, including styling checkboxes, radio buttons, dropdowns, and input fields. The blog will showcase creative examples and provide guidance for cross-browser compatibility.

Responsive Design: Advanced Media Queries and Breakpoints

Responsive design is essential for creating websites that adapt to different screen sizes. We'll dive into advanced media queries and breakpoints, enabling you to design fluid and responsive layouts for a variety of devices. The Webtutor.dev guide will offer tips for managing complex layouts and provide examples of responsive design patterns.

Cross-browser Compatibility and CSS Prefixing

Ensuring consistent rendering across different web browsers can be a challenge. We'll discuss advanced techniques for achieving cross-browser compatibility, including CSS prefixing, vendor-specific properties, and polyfills. The blog will provide insights into browser support tables and strategies to handle browser-specific quirks.

Conclusion

As we conclude our exploration of advanced CSS techniques and best practices with the guidance of Webtutor.dev's CSS Introduction guide, you're now equipped with the knowledge to take your CSS skills to new heights. Remember to experiment, practice, and stay updated with emerging CSS trends and techniques. With the expertise gained from this comprehensive guide, you'll be able to create stunning, performant, and responsive web designs. Happy coding!

[elftwink]

am currently working on a neocities site (which i cannot give you the url for yet because im working on the css still and there's no content also it looks ugly still) and oh man does it take me back to ye olde days of custom theme editing on here. i still use a custom theme obvs but back in like 2014/2015ish when i was really into indie rp custom themes were all the rage and you would spend hours editing some character specific image for your bg and then another several hours trying to make the css line up with your image (never at any point did i attempt to actually like. learn html or css. i just read other people's theme codes and edited the parts i could understand and solved problems as they arose. i distinctly remember one time i was using a base that had two sidebars and i only wanted one and deleting the section broke the theme in disastrous ways [bc i had no idea what i was doing] so i literally just made all the elements in the sidebar transparent and moved them off the screen LMAO. the best i ever got was moving from fully built custom themes that i edited to base themes that i built off of)

anyway while im slightly better now (im even reading tutorials! am i following them? sorry i have to go i think someones calling me) i am using a layout builder to build the homepage so it is even more reminding me of mid-2010s tumblr. much like building off a base theme, and definitely easier to understand than tumblr theme building (this time i at least know what all the different pieces of code are doing, even when im not sure how or why, or how to duplicate the effect under slightly different circumstances. but progress is progress!).

a good but annoying thing about the layout that im using is that i havent actually edited the site wide stylesheet, just used internal css on that one page, so when i go to make literally any other page i'll have to start from scratch. this is good because i am learning a lot and i think without doing it this way i would end up with a bunch of useless stuff in the stylesheet that really should be page-specific that i would have to correct with internal or inline css later. annoying because what do you mean i have to make decisions about the sizing and positions of the content? i literally just did that

also im kind of nervous to touch the general stylesheet because im pretty sure what i'll actually want to do is have a couple of stylesheets for different 'sections' of the website, to maintain cohesion between pages of the 'same' type but still allow a lot of fun customization on a per-page basis, but that requires deciding what 'sections' i want on the website and that is a whole other can of worms. but also you can't start without starting so i should probably just try to build a really simple layout and go from there (after all, if it sucks, it's not like i can't just create a new stylesheet, or do the css for each page independently until i hit a groove that's actually worth moving to the stylesheet). but also first i have to finish this goddamn homepage. which means i gotta find a header image that doesn't look ugly as shit

[gascoignes-homewrecker]

Ublock Origin

Youtube: SponsorBlock (skips ads within videos), DeArrow (replaces clickbait thumbnails & titles), Blocktube (block channels), Enhancer (Quality of Life features), Youtube-Shorts Block

Youtube Mobile: Youtube Vanced/Revanced Manager

Twitter: Minimal Theme extension

Tumblr: xKit/xKit Rewritten, Dashboard Unfucker, Stylus with "Old Tumblr Dashboard" userstyle

Spotify: xManager (desktop & mobile)

Firefox: High chance you'll love it and curse holding out for so long.

Linux: No whiney search box trying to Edge you, no ads in the start menu, no trending searches reminding you about celebrity gossip & politics.

i would move heaven and earth to avoid hearing one single advertisement

[codingflicks]

Animated Moving Element using CSS

[phantomrose96]

Honestly I recommend everyone learn just a littttle bit of CSS because it really is powerful and just makes bits and pieces of your internet experience more convenient.

Right now I'm cataloguing recipes I've really enjoyed, just trying to get them all in one place. Many of these are instagram recipes and, because I don't trust link rot (aka the possibility that the instagram link goes dead one day), I'm including a screenshot of the recipe along with the link.

But instagram on desktop... looks like this

(Link, for credit. It's a good recipe)

I obviously could just copy-paste the recipe out of there. But a screenshot would be cleaner for how I'm cataloguing these.

And as-is, I'd have to scroll the whole height of that small right-side window about 4 times to fit it all.

But actually... I can just resize that div holding that whole right-side content

Basically I

hit f12 to open the dev tools

clicked the element finder

clicked on an element inside the recipe side

followed it up the tree until I found the element holding the whole recipe side (do this by hovering the div in the dev tools panel way on the right, then hovering upward and up until I find the element which is the highest up that still only contains the recipe-side content)

in the element.style part, set "width: 1000px" and "height: 1500px"

(I notice the width seems to still be less than 1000px, even though it got bigger)

likely suggests there's an element above it with a max-width set

go up the tree higher until I find the element with the max-width and uncheck that style

screenshot ready

Maybe that sounded complicated but it took me probably 20-30 seconds

And this isn't just about screenshotting recipes like.

website with an annoying gif? select gif, delete gif

do you want a clean screenshot of a digital receipt for record-keeping without a large company banner or irrelevant information? delete unnecessary elements, adjust widths, screenshot

SOMETIMES, you can bypass paywalls if they're relying on something like overflow: hidden, or an overlay in the way, or some JS that runs (you can disable JS in the dev tools)

lost the jpg/png file you used for your profile picture and size doesn't totally matter? grab it from the img src while logged in. (you might even be able to find it in a bigger size by changing the url query parameters)

color contrast on an article really bad? find and change background color. find and change font color

want to make a funny fake screenshot without learning photoshop? just edit the page content in the dev tools

This isn't about like being good enough to write scripts or browser extensions. Really if you just have some basic HTML/CSS understanding a hat worth of tricks, you can make so many little adjustments in your favor.

[yan-lorkai]

.⁠｡⁠*⁠♡ﾟ A/n: totally not trying to learn html (which technically isn't a programming language, for what I had read), and well, if Idia was teaching me I would learn everything so quickly tbh. Or not. He would start explaining and I would have the sudden urge to kiss him, oh well it happens ig

"Uh... I think I have an error in my code." You break the silence, tone soft as the computer screen lights up your eyes just the right way for Idia to lost himself in the reflex. He love your eyes, your concentrated face, the way you stick out your tongue without realizing.

And he loves the way you timidly look to him, as if he has all the answers to your questions - which, about this subject, he have, by the way.

"Ah~ your closing array is missing a closing slash. Here, Yuu-shi." He pointed your error with a soft tone, blue nail hitting the screen, and a surprised pout grew on your lips.

He wanted to smother you in his arms, to pick you up and hold you till his arms fell off and his corpse rot - that was how bad he yearned for you, your skin, you smell. He breathes really hard to refrain from doing it, though. You wouldn't want that. He was just a mere R card, a lonely gamer, a-

"Thank you, Idia. You're the best." You giggle to yourself, feeling yourself warm under his eyes and lousy smile. Unbeknownst to you, the only things that were going through his head were about you.

Your smile, the way your eyes lightened up, your laughters and giggles, the messages you passed each other in class (when he was there in person), your secret handshake. Idia loved you. He loved your very dearly.

He loved you so much that he could cry.

"Uh... it's no big deal," yet his hair was getting hotter, rosey tone starting to burn brightly. "Don't forget the closing stash, and everything should work properly. This programming language is not that used anymore, but most can learn useful things learning it anyway. I think."

Idia had half of his mind to know that he was rambling again, talking so fast that he could make Eminem cry. But he couldn't stop when you looked at him with such big eyes filled with curiosity and wonder, taking notes of everything he was saying.

He noted then that you had hello kitty stickers on your page. A few drawings that Ortho made of him, Idia and you; that almost killed him right then and there.

"Ah... HTML uses elements, tags, and attributes to organize text, images, links, and other multimedia elements. It can be combined with CSS for styling and JavaScript for interactivity."

[hms-no-fun]

you were on cohost? i guess too late now, how was it for you?

cohost had its fair share of problems and i could often find the community there a bit too tumblr-core fingerwaggy if you know what i mean. but the site's dead now so it's kind of a moot point. what i find myself reflecting on most these days are the positives.

first, no numbers. i think their no numbers policy was probably a bit over-aggressive, but it quelled some of the rat race popularity contest aspect of social media that often makes it so tedious. i liked their tag tracking system, their robust content warning options, and the absence of infinite scroll. what i miss most about cohost is that their text editor supported CSS, which led to people programming elaborate text effects and puzzles and games in-site that harkened back to the days of flash animations. there was something in this combination of elements that drew out a rebellious creativity in users.

cohost came at a time when social media was across the board feeling terrible (and it's only gotten worse hahaha), particularly as someone who makes shit that relies on you clicking links that take you away from the website or app. algorithms hate this and punish it. users also just seem kind of lazy and disinterested in using the internet so much as letting the internet happen to them passively. but when a post of mine went viral on cohost, people engaged with it. it wasn't just likes and shares, it was comments and additions. it felt like a place that (at its best) encouraged actual conversation and the development of new ideas among like-minded peers. when my posts did well and i included a donation link, people gave me money. it felt genuinely like a website that COULD support professional blog work in a way that was more customizable even than substack yet still RSS friendly, and the Following tab which let you easily see posts of specific users was a REVELATION, like a mini RSS reader within the website itself.

but the enterprise was unsustainable for various reasons (not all of them outside the dev crew's control) and the haters got what they wanted. now our big social media alternative is bluesky, a website that dares to ask the question "what if there was another twitter?" the answer is that it fucking sucks. i hate microblogs so much dude, why on EARTH are we still acting like these disambiguited 300-character-limit posts are the most preferable means of social communication online??? why would you set out to make a better twitter and then deliberately choose to replicate literally every aspect of the user experience that encouraged low-information high-drama conflict fabrication? WHY WOULD YOU MAKE A VERSION OF TWITTER WHERE YOU CAN EASILY LOOK UP THE ACCOUNT OF EVERYONE WHO HAS YOU BLOCKED AND IT'S SUPPOSED TO BE A FEATURE NOT A BUG???????? i just don't get it. i don't even get the optimism of the early adopters. i've seen people decry the post-election decay of the platform like "of course the cishets come in to ruin a community that was defined by trans & queer people" i'm sorry HELLO???????? from literally day zero bluesky was aiming to be a hands-off centrist IPO-friendly tech startup, there was never anything structurally embedded within the platform itself to keep this kind of decay from happening, you just happened to be on there when there were dramatically fewer users most of whom were curious tech enthusiasts. seriously, how have we not learned this lesson yet? you can't define a digital culture by the vibes of random user behavior! unless you have LAWS and GUIDELINES whereby you fucking BAN people for being shitheads, unless you enforce an actual code of conduct and punish bigoted speech and design a system that encourages constructive conversation, you are always always ALWAYS going to wind up at unhinged facebook boomer slop!

the death of cohost and the utterly predictable decay of bluesky are a big part of the reason why i've been posting so much more on tumblr. this is like the last bastion of anything even remotely resembling the old web, with its support of longposts and tagging and how easy it is to find random hobbyists doing cool shit you never knew existed before. like, yeah, you have to search that shit out and tailor your feed to not drive you crazy, but that's what i like about it!!! i am an adult with agency who understands that life is complicated and as such i expect to have to put some work into making my experience with a website positive! but in the hellworld of the iphone everything is walled garden apps for aggregating content where the content and its creators are structurally established as infinitely replaceable and uniquely worthless punching bags to be used and cast aside. everyone's given up on moderation and real jobs don't exist anymore especially if you happen to work in the "creative economy" IE are a writer or critic or artist or hobbyist of literally any kind. we've given up on expecting anything from the rich moneyboys who own and profit immensely off of the platforms whose value we literally create!!! especially now with the rise of "AI" grifters, whose work has ratcheted good old fashioned casual sexism and racism and homophobia up to levels not seen in such mainstream spaces since the early 2000s.

i like tumblr because i don't have to use a third party app to get & answer asks at length, and because it is a visual artist friendly platform where i won't be looked at funny for reblogging furry postmodernism or transgender homestuck OCs. it is a site that utterly lacks respectability and that's what makes it even remotely usuable. unfortunately it also sucks! partly it sucks because this place was ground zero for the rise of puritanical feminist-passing conservatism in leftist spaces, so it's like a hyperbolic time chamber for brain-melting life or death discourse about the most inconsequential bullshit you could ever imagine. but it also sucks because it's owned by a profit-motivated moneyboy who has consistently encouraged a culture of virulent transphobia and frequently bans trans women who call this out. so like, yeah, this place is cool compared to everywhere else, but it is exactly like everywhere else in that is also on a ticking clock to its own inevitable demise. the owners of this website will destroy everything that makes it interesting and will EAGERLY delete the nearly twenty years (!!!!!!) of posts it's accumulated the instant it will profit them to do so. this will be immensely unpopular and everyone will agree it's a tragedy and it won't matter. the culture and content of a social media platform is epiphenomenal to its rote economic valuation. i mean, obviously it isn't, zero of these massive tech companies would be what they are if so many people weren't so eager to give their time and labor away for free (and yes, writing a dumb dick joke on tumblr IS a form of labor in the same way that doing a captcha is labor, just because it's a miniscule contribution in an economy of scale doesn't mean you didn't contribute!), but once a tech company reaches a certain threshold its valuation ceases to be tethered to anything that actually exists in reality.

all of which is why i remember cohost with a heavy heart. yeah, it was imperfect. it was also independently owned, made with the explicit goal of creating a form of social media that actually tries not to give you a lifelong anxiety disorder so it can sell you homeopathic anti-anxiety sawdust suppositories. for the brief window of time when it was extant, i was genuinely hopeful for the future of being a creative on the internet. part of why i spend so much time on godfeels, a fucking homestuck fanfiction with no hope of turning a profit or establishing mainstream legitimacy, is that my readers actually ENGAGE with the material. what brought me back to using this website consistently was precisely the glut of godfeels-related questions i got, and the exciting conversations that resulted from my answers. meanwhile i put so many hours into my videos and even when they do well numerically, i barely see any actual engagement with the material. and that is a deliberate design choice on the part of youtube! that is the platform functioning as intended!! it sucks!!!

what the memory of cohost has instilled in me is a neverending distaste for the lazy unambitious also-rans that define the modern internet. i remember the possibility space of the early web and long for the expressiveness that even the most minor of utilities offered. we sacrificed that freedom for a convenience which was always the pretense for eventually charging us rent. i am thinking a lot these days about what a publicly funded government administrated social media utility would look like. what federal open source standards could look in an environment where the kinds of activities a digital ecosystem can encourage are strictly regulated against exploitation, bigotry, scams, and literal gambling. what if there was a unionized federal workforce devoted to the administration of internet moderation, which every website above a certain user threshold must legally take advantage of? i like to imagine a world where youtube isn't just nationalized but balkanized, where you have nested networks of youtubes administrated for different purposes by different agencies and organizations that operate on different paradigms of privacy and algorithmic interaction. imagine that your state, county, and/or city has its own branch of youtube meant to specifically highlight local work, while also remaining connected to a broader national network (oops i just reinvented federation lmao). imagine a world where server capacity is a publicly owned utility apportioned according to need and developed in collaboration with the communities of their construction rather than as a deliberate exploitation of them. our horizons for these kinds of things are just so, so small, our ability to imagine completely captured by capitalist realism, our willingness to demand services from our government simply obliterated by decades of cynical pro-austerity propaganda. i imagine proposing some of this stuff and people reacting like "well that's unrealistic" "that'll never happen" "they'd just use it for evil" and i am just SO! FUCKING! TIRED!!!!

like wow you're soooooo cool for being effectively two steps left of reagan, i bet you think prison abolition and free public housing are an impossible pipedream too huh? and exactly what has that attitude gotten you? what've you gained by being such a down to earth realist whose demands are limited by the scope of what seems immediately possible? has anything gotten better? have any of the things you thought were good stayed good? is your career more stable, your political position more safe, your desire to live and thrive greatly expanded? or do you spend every day in a cascading panopticon of stress and collapse, overwhelmed to the point of paralysis by the sheer magnitude of what it's cost us to abandon the future? you HAVE to dream. you HAVE to make unrealistic demands. the fucking conservatives have been making unrealistic demands forever and look, they're getting everything they want even though EVERYONE hates them for it! please i'm begging you to see and understand that what's feasible, what's reasonable, what's realistic, are literally irrelevant. these things only feel impossible because we choose to believe The Adults (and if you're younger than like 45, trust me, to the ruling class you are a child) whose bank accounts reflect just how profitable it is to convince us that they're impossible. all those billions of dollars these fuckers have didn't come from nowhere, it was stolen from all of us. there is no reason that money can't and shouldn't be seized and recirculated back into the economy, no reason it can't be used to fund a society that is actually social, where technological development is driven not by what's most likely to drive up profits next quarter but by what people need from technology in their daily lives.

uh so yeah basically that's my opinion of cohost lmao

[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 :]

[captdedeyes]

Friendly reminder that Wix.com is an Israeli-based company (& some website builders to look into instead)

I know the BDS movement is not targeting Wix.com specifically (see here for the companies they're currently boycotting) but since Wix originated in Israel as early as 2006, it would be best to drop them as soon as you can.

And while you're at it, you should leave DeviantArt too, since that company is owned by Wix. I deleted my DA account about a year ago not just because of their generative AI debacle but also because of their affiliation with their parent company. And just last month, DA has since shown their SUPPORT for Israel in the middle of Israel actively genociding the Palestinian people 😬

Anyway, I used to use Wix and I stopped using it around the same time that I left DA, but I never closed my Wix account until now. What WAS nice about Wix was how easy it was to build a site with nothing but a drag-and-drop system without any need to code.

So if you're using Wix for your portfolio, your school projects, or for anything else, then where can you go?

Here are some recommendations that you can look into for website builders that you can start for FREE and are NOT tied to a big, corporate entity (below the cut) 👇👇

Carrd.co

This is what I used to build my link hub and my portfolio, so I have the most experience with this platform.

It's highly customizable with a drag-and-drop arrangement system, but it's not as open-ended as Wix. Still though, it's easy to grasp & set up without requiring any coding knowledge. The most "coding" you may ever have to deal with is markdown formatting (carrd provides an on-screen cheatsheet whenever you're editing text!) and section breaks (which is used to define headers, footers, individual pages, sections of a page, etc.) which are EXTREMELY useful.

There's limits to using this site builder for free (max of 2 websites & a max of 100 elements per site), but even then you can get a lot of mileage out of carrd.

mmm.page

This is a VERY funny & charming website builder. The drag-and-drop system is just as open-ended as Wix, but it encourages you to get messy. Hell, you can make it just as messy as the early internet days, except the way you can arrange elements & images allows for more room for creativity.

Straw.page

This is an extremely simple website builder that you can start from scratch, except it's made to be accessible from your phone. As such, the controls are limited and intentionally simple, but I can see this being a decent website builder to start with if all you have is your phone. The other options above are also accessible from your phone, but this one is by far one of the the simplest website builders available.

Hotglue.me

This is also a very simple & rudimentary website builder that allows you to make a webpage from scratch, except it's not as easy to use on a mobile phone.

At a glance, its features are not as robust or easy to pick up like the previous options, but you can still create objects with a simple double click and drag them around, add text, and insert images or embeds.

Mind you, this launched in the 2010s and has likely stayed that way ever since, which means that it may not have support for mobile phone displays, so whether or not you wanna try your hand at building something on there is completely up to you!

Sadgrl's Layout Editor

sadgrl.online is where I gathered most of these no-code site builders! I highly recommend looking through the webmaster links for more website-building info.

This simple site builder is for use on Neocities, which is a website hosting service that you can start using for free. This is the closest thing to building a site that resembles the early internet days, but the sites you can make are also responsive to mobile devices! This can be a good place to start if this kind of thing is your jam and you have little to no coding experience.

Although I will say, even if it sounds daunting at first, learning how to code in HTML and CSS is one of the most liberating experiences that anyone can have, even if you don't come from a website scripting background. It's like cooking a meal for yourself. So if you want to take that route, then I encourage to you at least try it!

Most of these website builders I reviewed were largely done at a glance, so I'm certainly missing out on how deep they can go.

Oh, and of course as always, Free Palestine 🇵🇸

[essektheylyss]

It is very funny learning the absolute basics of various coding languages having approximate knowledge of many things, because I would be the first to tell you I cannot code web pages and my HTML is extremely scattershot, but I had to read a basic tutorial for both HTML and CSS this week and was immediately like, "Ohhhhh. Everything makes sense now." I had a ton of random elements but NO syntax so the moment the basic syntax was explained, I was suddenly like, ah. I can redesign my website now. GREAT.

[riacte]

Anyways I forgot a formula for an excel spreadsheet so naturally I navigated to my OC spreadsheet because I know I had that exact formula there. It’s like how my Wattpad cover making days made me learn how to use Canva and I make annotations on maps in Procreate. (Procreate is seriously not the best but I learned my way around it.) I learned HTML and CSS for writing fic and making a Neocities website for my favourite song. I learned to use inspect element for unreality mock-ups. I learned about overlay and multiply and screen and change hue from my Love Live sprite edit days. All my skills are cobbled together and precariously held like Jenga blocks. Fuck around and find out. This shit has always been so ass

[izicodes]

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

[heatherfranzen]

HELLO

I'M BACK

So much has happened this summer (I finished grad school! I moved halfway across the country!) and I'm trying to get back into a routine that involves having a life again: reading books, watching movies, playing video games, and, of course, drawing and painting again.

I am currently revamping my website. For many years, my website was solely a professional portfolio and shop. White background, simple links, zero personality. Purely a hub to point to my social medias, where all the fun stuff was. I hated going to my own website because it was boring and uninspiring.

Last year, I made a neocities account and learned HTML/CSS for fun. I became obsessed after realizing how much more exciting it is to NOT have a bland, minimalist, corporate-esque website. I love exploring everyone's fun neocities sites, which are nostalgic and truly personalized. It made me hate my old website even more. Then I had a big brain moment: incorporate the fun elements of my neocities site into my website. LOOK AT IT NOW. There is COLOR. Silly fonts. There is a pixelated space background. Tiny gifs sprinkled about!

I will be actually be maintaining my website's blog. That's where the main, long-form content of all my art-making will live. Social media will just get snippets of that content. I do think there is a way to connect Tumblr to my blog so that whatever I post there will be posted here, too, but I haven't tried it yet.

Anyway, Hello Hello Hello Tumblr!

[hiveswap]

I still find it insane that no one in my life is as excited about webdesign as i am. Like it's a good skill!!! any page you look at looks the way it does because of people who know how to do this!! And still goes so underutilised!! There is so much you could do with it, but the internet is dead set on turning everything into sleek minimalist boxes with rounded edges.

.div{Background:white; border-radius: 25px; border: 2px solid grey;} and you're fucking done you've recreated most major websites.

Nowdays you're LUCKY if you find a social media that allows you to change your background colour, (Such as this one) when with css you could have animated elements! Rainbow text! picture of ground paprika that grows the width of your entire site when hovered over!

Yesterday i showed my mom (wrong person i know, but most people i know check out mentally when i mention it) something i made and she was like "i don't get it. This looks like a gif. How did you know what to write?" Like she was so close to getting that i learned a cool new thing but then she just didn't wanna hear about it anymore.

It's a little bit insane how something half the world runs on can be like, kinda niche as well. Just go on neocities or nekoweb. (I have a few webring neighbours who host on nekoweb) and look what people do on there. Look at that old spacejam website, even.

[thecozycat]

🧡 Tuesday Tips #3 🧡

Your website is more than just a collection of pages—it’s your digital home. It should reflect you, your interests, and your personality. But with so many sites out there, how do you make yours stand out?

Here are 25 ways to make your website feel more personal, unique, and personalized to you!

........................................................................................................

🎨 Design & Aesthetics

1. Custom Color Palette – Pick colors that resonate with your personality and aesthetic.

2. Unique Typography Choices – Use a mix of fonts that match your vibe.

3. Handwritten or Doodle Elements – Add personal sketches or notes.

4. Custom Cursor – Let visitors use a fun, themed cursor on your site.

5. Personalized Favicon – A tiny but powerful detail that makes your site feel complete.

6. Themed Layouts for Different Pages – Make each page visually distinct but cohesive.

7. Custom Backgrounds – Textures, gradients, or even a personal photograph.

8. Retro or Experimental CSS Styles – Go wild with unique styles that make your site stand out.

9. Create a Custom Hand-Drawn Logo – Instead of a standard logo, try sketching one yourself for a unique touch.

10. Add Subtle Animations – Small hover effects, background animations, or cursor trails can bring your site to life.

11. Play With Layering Elements – Overlap images, text, and shapes for a more dynamic look.

12. Design a Personalized Loading Screen – A custom loading animation or message adds a fun detail visitors will remember.

13. Add Your Own Handwriting as a Font – Convert your handwriting into a web font for a truly personal touch.

14. Design a Seasonal Theme Switcher – Let visitors toggle between different seasonal or mood-based color palettes.

........................................................................................................

📜 Content & Personality

15. Create a Behind-the-Scenes Page – Show how your website was built, share your thought process, or include fun bloopers.

16. Add a "The Making Of" Section – Share drafts, sketches, or early concepts behind your creative works.

17. Include a Personal Dictionary of Words You Love – A list of favorite words, phrases, or slang you frequently use.

18. Design a "Things That Make Me Happy" Page – A simple, uplifting page filled with personal joys.

19. Show Your Progress on a Learning Goal – Track and share your journey in learning a new skill, language, or hobby.

........................................................................................................

💾 Interactivity & Engagement

20. Add a Clickable Mood Indicator – Let visitors see your current mood with an emoji or phrase that changes over time.

21. Create a Dynamic Banner That Updates Automatically – Display different messages depending on the time of day or special occasions.

22. Add a "What I'm Listening To" Widget – A live-updating display of your current favorite song or playlist.

23. Embed a Poll or Voting Feature – Let visitors vote on fun topics or help you make creative decisions.

24. Introduce a Mini Personality Quiz – Something quirky like “Which of my favorite books/movies are you?”

25. Make an "Ask Me Anything" Page – An interactive page where visitors can submit questions for you to answer.

Closing: Make It Yours!

Your website should be you in digital form—fun, unique, and engaging. Whether you add just one or all 25 ideas, the most important thing is to have fun and make it your own.

If you try any of these ideas, let me know—I’d love to see what you create!

-----------------------------------------------------------------

Want to help the Small Web movement grow?

Join us on other platforms. ♥

FB Page & Group:

facebook.com/thesmallweb

facebook.com/groups/thesmallweb

Twitter/X:

x.com/smallweblove

Tumblr Community:

tumblr.com/communities/thesmallweb

Mastodon:

indieweb.social/@thesmallweb

[swinglatte]

I wanted to learn Twine and CSS so I wrote something simple and drew portraits to go along with it. I never got far into learning either, but I do still have the art, so inspect element mockup it is.

[June 17, 2020]