#Free Online CSS Tutorial

[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!

[kumakechi]

i need to learn 3d modelling so that more than anything my power to mod persona 4 golden can grow

[thunderlina]

In the wake of the TikTok ban and revival as a mouthpiece for fascist propaganda, as well as the downfall of Twitter and Facebook/Facebook-owned platforms to the same evils, I think now is a better time than ever to say LEARN HTML!!! FREE YOURSELVES FROM THE SHACKLES OF MAJOR SOCIAL MEDIA PLATFORMS AND EMBRACE THE INDIE WEB!!!

You can host a website on Neocities for free as long as it's under 1GB (which is a LOT more than it sounds like let me tell you) but if that's not enough you can get 50GB of space (and a variety of other perks) for only $5 a month.

And if you can't/don't want to pay for the extra space, sites like File Garden and Catbox let you host files for free that you can easily link into NeoCities pages (I do this to host videos on mine!) (It also lets you share files NeoCities wouldn't let you upload for free anyways, this is how I upload the .zip files for my 3DS themes on my site.)

Don't know how to write HTML/CSS? No problem. W3schools is an invaluable resource with free lessons on HTML, CSS, JavaScript, PHP, and a whole slew of other programming languages, both for web development and otherwise.

Want a more traditional social media experience? SpaceHey is a platform that mimics the experience of 2000s MySpace

Struggling to find independent web pages that cater to your interests via major search engines? I've got you covered. Marginalia and Wiby are search engines that specifically prioritize non-commercial content. Marginalia also has filters that let you search for more specific categories of website, like wikis, blogs, academia, forums, and vintage sites.

Maybe you wanna log off the modern internet landscape altogether and step back into the pre-social media web altogether, well, Protoweb lets you do just that. It's a proxy service for older browsers (or really just any browser that supports HTTP, but that's mostly old browsers now anyways) that lets you visit restored snapshots of vintage websites.

Protoweb has a lot of Geocities content archived, but if you're interested in that you can find even more old Geocities sites over on the Geocities Gallery

And really this is just general tip-of-the-iceberg stuff. If you dig a little deeper you can find loads more interesting stuff out there. The internet doesn't have to be a miserable place full of nothing but doomposting and targeted ads. The first step to making it less miserable is for YOU, yes YOU, to quit spending all your time on it looking at the handful of miserable websites big tech wants you to spend all your time on.

[sesamestreetkid]

!!! my tag system is below all of this,,, I moved it under a cut because people reblog this post for the links :P

edit: thx for the love on this post. im going to try and continually update this!

⇩ ⠀sites FULL of web graphics ⇩

blinkie maker : make your own blinkies!

DOLLZ REVIVAL : a revival of pixel dolls where you can create and share your own. very cute!

GlowTxt : create glowing transparent text gifs that say whatever u want

HOARDER'S PILE : contains blinkies, buttons, stamps, and teddies

plasticdino.neocities.org : blinkies

Glitter Graphics : contains gifs, blinkies, dividers, and just sooo many web graphics

Cute Kawaii Resources : contains gifs, blinkies, stamps, favicons, dividers, buttons, fonts, literally everything you need. its an insane resource

Adrian's blinkie collection : collection of blinkies, stamps, and buttons

☆ (supplies.ju.mp) : blinkies, stamps, buttons, & favicons

twigbranch.carrd.co : blinkies

lallys.carrd.co : blinkies, stamps, dividers, and other resources

Bugleeblinkie.carrd.co : blinkies, and 3 very special gifs at the end ;)

unshinesblinkies.carrd.co : blinkies

The 88x31 GIF Collection : buttons. there are 5 parts! huge collection!

Bonnibel's Graphic Collection : blinkies

WELCOME TO GIFCITY : blinkies, dividers, favicons, stamps

cass-tastrophe.carrd.co : blinkies, stamps

kotatsuOS : blinkies

Cute web graphics : blinkies, stamps, dividers, and a LOT of other graphics, all very cute

⇩ some html tools! + tags below cut ⇩

MDN (mozilla.org) : if you're just starting out like me this is super helpful HTML Tutorial (w3schools.com): same here! (offers other programming languages as well!) Accessibility Checker(Free Scan) : a site you can use to check accessibility/ADA compliance when making your website! it will point out what needs to be changed. it is free, but they also offer paid services if you need more help imagecolorpicker.com : hex code picker. i use this one because you can upload an image, paste clipboard, OR type in the website and it'll grab a screenshot for you! something simple that was made really well. cssgradient.io : helps you make css gradients for backgrounds or whatever else you need them for smartgb.com : a free guestbook service FC2 Counter! : free "site visits" and "online now" counters. fully customizable Unclosed Tag Checker by Alicia Ramirez : does as it says, checks for unclosed tags (although I recommend using a program that does this as you write anyways. I use Visual Studio Code. Status Cafe : an updateable and embeddable status that you can stick anywhere on your site! it is mostly customizable with CSS but I have noticed a few small quirks with it

my tagging system :))

#graphics

#blinkies

#stamps

#buttons

#dividers

#html/css

#resources

#code

e10's web (neocities.org) <- shameless site plug. show it some love :P

[geoledgy]

your oc website is SO SO SO SO INCREDIBLY COOL how the hell do you even start learning how to do this ?? if you learned how to do this by yourself online, are there any tutorials or resources you can share with us? was making this website free??

omg THANK YOU SO SOOOOOO MUCH!!! It makes me so happy to hear that folks like my little site. I code my site with Phoenix Code (for the live viewer and number dials) and I host my site on Neocities - it is all free. Phoenix can be used in browser or on desktop, but I like having it on desktop more for big projects in case my files get deleted. I use the browser version when I just want to test something quickly.

The 2 videos I use and can not recommend enough to anyone who asks me are this HTML tutorial and this CSS tutorial. They are simple and easy to understand, but I recommend watching it the first go, and then following along the next few watches until you get the flow of basic parts to a website, how they're organized, and what order they go in. At this point, I've memorized exactly where everything goes, and it is all thanks to these 2 videos.

If I am being honest, I learned how to code by myself, not quite even with online tutorials but just from being stupid and messing around myself (1, because I was a kid, and 2, because I didn't understand English very well to know what tutorials are saying.) I used to do html coding for Neopet pages when I was a kid with too much online time, first by just editing the default petpages and adding info and images, and then just doing trial and error with the html. I'll just try something and then if it doesn't turn out the way I want it, I try to find out why it didn't work and also get inspiration from other similar sites to figure out where things go or how they coded (with this nifty thing called right click > inspect page or right click > view page source). And BOOM, working webpage.

It was rudimentary, white blank background without any boxes or anything, you just scrolled down the page and sections were separated by a horizontal bar. OH and every text was centered! I had no idea how to make scrolling boxes or fancy assets, but damn I still had so much fun working on it every weekend. When you find authentic selfmade sites from the 90s and 2000s, most of them aren't super fancy either unlike what modern nostalgia makes you think. So I hope you don't feel discouraged if you begin making a website and feel it isn't "fancy", you're already doing a first big step which is making a webpage and learned your first set of html code!

It was over a decade later before I coded webpages with html again. I've gotten lazy and started relying on site builders, but nothing was quite as versatile as html. I wanted to try coding my own OC site again, so that was when I started working on OutKrop (the site I posted). Until I started coding again, I had literally no idea what CSS even is (and let me tell you, it's a game changer!)

Personally, I work best when I can do things hands on. I don't read through tutorials, I code first then go back and read through coding help sites like w3schools when I find myself stuck and unable to figure something out. Sometimes I grab existing codes and play around with them to see what changes and what I can do with it, cuz having visual context is what helps me a lot.

I can also share my process:

Once I gather up some ideas, I make a sketch, including what boxes (divs in css) should approximately go. It is very rough, but shows me exactly what I need to know.

Next I load up my coding app (Phoenix Code in my case) and "sketch" the layout. Nothing fancy going on here, just putting things where they need to be, and fixing size of boxes and margins if needed. I give my boxes all a background color so I can easily see how big they are and where they are located.

After some adjustments like moving stuff around and adding assets like backgrounds and images, and changing colors of the boxes, rounding off corners, etc., we get this!

so recap + additional useful sites I use:

Coding app: Phoenix Code

Site hosted on: Neocities

Video tutorials: HTML and CSS

Sites for learning code: w3schools, also lissa explains is a great site that is written for kids to learn html so it's easy to understand. Finally, sadgrl has a lot of great resources for coding as well!

I recommend looking through these sites AFTER you tried taking a spin at coding - it doesn't have to be anything fancy just follow the HTML video tutorial I linked!

Thanks for the ask, and I hope this helps you and many others out there who are interested in building a site with html/css! Don't be afraid to get things "wrong" or have an "un-fancy" site. This is how you learn to code, and it'll become so easy once you get the hang of it.

Anyone is always more than welcome to reach out for coding help and advice :-]

[shepherds-of-haven]

I'm actually curious what the CSS rule is to disallow copy and paste if you can share?

It’s this:

user-select: none;

[featherwurm]

If Tumblr ever actually goes tits up you can always find me at my personal portfolio website, www.featherwurmgraphics.com, where I link my other active social media accounts or wherever else I can be found.

And hey, while I'm here, setting up your own site on the web is always a great idea to have a home base that isn't beholden to advertisers, app stores, or having a successfully funded social-media server. I pay for my site through OneWebHosting but Neocities is free, if more bare-bones in what you can make. Basic HTML and CSS are very simple to use, and there's tons of tutorials out there.

Twenty years ago artists used to consider having their own website portfolio a critical part of their online presence, and while that's given way to a lot of social media posting without a 'home base', with the way advertising and legislation have gone - having your own space online seems still pretty important to me!

[aesopcodes]

Resource: Responsive Web Design

Starter kit basically.. for those working on jcink skins. Viewport plus using media queries, css variables, grid, and flex will ease the process of making responsive skins but I advise keeping them in mind early on.

[html-tryhard]

Html Tutorial Rec Wednesday

Texting, Part 1

Texting is the backbone of all group chat fics. Why not style it with pretty HTML and CSS?

Adding text messages to an AO3 work is very easy, thanks to this simple tutorial by CodenameCarrot and La_Temperanza! (While you're at it, check out La_Temperanza's ao3 work skin tutorial series on AO3.)

"But coding is hard! I see all those <span> things and I get scared!"

What if I told you that there's a code free generator that writes the HTML and CSS for you, to embed into your fics on AO3?

"But how is that any different from using doctored images?" You say? "If I'm not coding it myself and I'm using an online website to make it for me, why not use an image?"

Let me hold you tenderly and tell you why.

Accessibility.

Specifically:

Screen Readers.

Google Translate.

And a secret 3rd option, which is learning how to code if you never did, I guess?

Remember ye olde days of customizing the HTML and CSS of your Tumblr blogs, circa 2014? The cool new place to do that is now your AO3 fics :)))

Have fun writing your wrong number AUs and group chat fics!

[ne0nwithazero]

How did you learn to code your website on neocities? You have one of the most amazing and unique sites I've ever seen, it's such a wonderful personalized corner of the internet!

Thank you :)

W3Schools is an amazing resource for coding and finding HTML, CSS and JS scripts!

You can pretty much just google "How to make a navigation bar" or how to make a dropdown menu or anything you want and there's usually a w3schools link that can help you with it!

Another tip I can offer is to learn how to use your browser's Inspect Tool option (Usually accessed by pressing F12)

Studying how websites are made or trying to see how someone coded a specific thing

It also allows you to test CSS directly if you want to see how something is going to look right away

Overall my biggest tip is to make it fun for yourself! There is a bit of learning curve at the beginning, but once you get past it, it gets really fun!

[crystlfox]

fav color?

Also he wants pets

css Indigo

also:

[highly-nonexistent]

There is something very weird about the relatively short nature of the culture surrounding website creation. As in, like, internet-user-created websites have been around for like 30-31 years at this point, and the culture surrounding them has changed so very much.

People used to create websites left and right for their own needs, their little shops and their little blogs about what they liked. Some websites of course housing horrible content since their dawn, and some being as mundane but as unique as the person behind its code. I have seen older sites, archived, that promoted creating your own site, and that was interesting to see. That culture of creating your own website and of sharing that knowledge on a still-growing facet of communication.

And then at some point social media appeared, and that was interesting, because now everyone was able to quickly present themselves without the need of a website, but that didn't mean people stopped making websites. I mean, hell, Geocities died in 2009, so a lot of people were creating their own websites for free before that time, no need to pay for domain names or hosting. And even without Geocities, there were other website hosting things that yes, while not as customizable, were still a resource for people to work with them. There's still a website floating around that I made when I was a kid using one of these services. Cool stuff.

All this to say that I do feel a weird sense of dread looking back and cross-referencing with the present and seeing things like "website creator powered by AI" and shit like that, because just ?? How did it go plummeting so quickly. There is a weird feeling of having lost a developing culture to corporations making quick access to posting things that, as corporations' nature dictates, are used to sell data or to train models or what have you. Similarly, we get pretty same-y looking pages because of the need to be slick or whatever with designs that just leaves everything looking the same. ALSO, the loss of spaces for kids, or just the gradual lowering of them in favor of cocomelons and whatever else the devil's machine has spawned is like watching an apple decay before having ripened. I do feel like there is this phenomenon in which how to make a site has been lost in the notion of "making a website falls into the realm of evil and scary coding and I could never be a programmer, plus who would look at it, plus we have tools to make them," etc etc etc. Here is a little secret: website creation is not exactly hard to pick up at all. You might say it's very similar to using a rich text editor like Word or a notes app or whatever you use. Similarly, have you used markdown for things like messages or D iscord messages, you know, with the asterisks for bold text and the likes? Markdown is based on html's structures. And truly, you do not have to even learn to code using Javascript if you don't want to, you can just go full html + css and structure your things as you go, adding your little images and your updates. Because guess what !! Html and css are not programming languages, they're a markup language and a stylesheet language respectively, which is a fancy way to say "you make the structure of your page with the first one and make it pretty with the second one". This includes cool stuff like tables, lists, grids, colors, transitions, etc. All of that without any programming. (That being said, if you are interested in programming, Javascript isn't too bad to pick up. The language itself *is* kind of evil, but using it in conjunction with html is not too difficult). I do have to say though, I am glad that there is a push to making your own websites and things, especially with Neocities sprawling a huge community of avid website creators, as well as the huge amount of tutorials and stuff making the push forward with making sites and online spaces and experiences more widely available. Hopefully this becomes a trend that keeps going up, considering the state of seemingly every single social media that has existed since the 2000s- 2010s.

[ink-flavored]

I've got a fun new Neocities site for writing!

Since Tumblr isn't a great platform for long-form writing, and especially since they're so weird about smut, I decided I'd make a whole website just to post my writing! Easier to read! Custom formatting! No risk of being nuked! All the smut with none of the risks!

Right now, I have a few excerpts, a few poems, all 11 of my ShortStorySlam2019 entries, the prompt list for my Kinktober2023 entries, a pseudo-blog for my personal thoughts, and even more planned. Come check it out, sign the guestbook, talk in the chatbox, click around!

And while you're at it, try checking out Neocities for yourself. It's a super great free platform for anything you can think of. Their only content restrictions are that it can't be illegal. If you don't know any HTML, there are dozens of free templates for you to use and hundreds of tutorials. I've managed to cobble together this website with 0 knowledge of HTML or CSS whatsoever, armed with only the resources I found online. I'm happy to share them if anyone wants help getting started!

Anyway - I've got a website. Check it out!

[phrandallanton]

Hellu))

I looked at your neocities thingy, and I just wondered how you did that with the text boxes and the background and stuff. If you are willing to share, if you aren't, then sorry for wasting ur time)

I'm very new to coding (I suck) and "Penelope the cat" doesn't really help much T-T

Hi! Don't worry about asking, I'm always happy to help and give info on anything I know to the best I can! (Though to be completely honest, I too don't know much of HTML so... lol)

I used a <table> tag and the other tags that come with it. I also used boarder, boarder style, and background color, which would be in the CSS part of the code. Makes the boarder that's around it, The style that boarder will be in, and the background color of that table.Here's a website that explains it better then I can and also helps me out A LOT.

I heavily recommend this site, it's a life saver and will explain everything.

Also here is some CSS to help with the boarder and background!

Some other extra tips I'll throw in here:

I recommend using "Visual Studios". It's a free program and you can get a plug-in that allows you to see how your website looks without having to edit, go to the website, refresh, over and over. It also helps with coding as well, overall I'm loving it!

Now, by no means am I saying you should copy somebody else code and steal it. That's wrong. However, if you see something you like and want to know how it works, inspect the page and look at the code! I've learned a lot from doing this and it's help me figure out how things work too. Once again, do not straight up steal lines of somebody else's code. By that point you're not coding, you're copying, pasting, and stealing.

I also think you should learn the basics of HTML, and if you really want to make things then I say take the time to learn HTML. Personally for me, I love the look of broken ugly websites. Just some basic CSS will do for me! But if you're not like me, then yes, I think you should learn more then just the basics.

I'm sure there's some HTML nerds that can explain this way better then what I can so like I always say when it comes to learning stuff, look it up! The internet has unlimited free information, somebody 12 years ago on reddit probably asked the same question you did and the answer will be in the comments of that post. Always search for things!

[dervampireprince]

my olrox webshrine is finished!

was the whole reason for making this that i wanted to apply to yume-ring (a webring for self-shippers) and it requires that you have a shrine to a character you love... yes BUT i had so much fun with this. i always sketch out my page layouts before trying to make them, and i was worried about if it would be possible as i still consider myself a newbie compared to others at html and css coding (i coded a little html on old tumblr themes, but have only consistently been coding in html and css to build my website for about 7 months). the only thing that got me stumped for a little was how to get the boxes to appear over the frames, because if they were underneath the scroll bars wouldn't work, but i figured it out (with the help of w3schools) and it looks exactly how i wanted it to!

it's just a simple page, but it's what i had envisioned for it. i hope it suits olrox. and while i don't expect anyone to care about my rambles describing olrox or why i like him, maybe it can be resourceful for anyone trying to find reference of him to draw as one of the boxes contains all his official art (character sheets, concept art, posters and a lot of screenshots). also some silly stamps and other graphics i made, feel free to use them to decorate your own sites and pages, crediting me for making them isn't necessary but it is appreciated.

you can take a look at the webshrine here.

... i spent too long erasing the background from that heart frame in the middle.

[18+, minors dni. areas of my website do have 18+ art so my website is 18+ only.] [my website is hand-coded using html and css code (and the occasional javascript). i proudly consider myself part of the web 1.0 revival movement which aims to get people making unique websites again to express themselves, encourages web literacy, media preservation, and is against things like constant advertisements, pop-ups, pay-walls that stop you being able to read articles, and more. if you're interesting in making your own website without limitations, coding can seem scary, but i have a page on my website called 'explore the web' that links to many resources. i learnt from neocities own tutorial, looking at other's codes, just trying to code and see what happens, and when in doubt checking web3schools. for more information on web 1.0 revival you can check out 32bit.cafe, they have lots of helpful information and resources about how to make a website, how to get ideas, how to stay safe online and more.]