#head first html and css

[raaorqtpbpdy]

If this coding textbook doesn’t have an enemies to lovers subplot between HTML and CSS I am going to riot.

[webtutorsblog]

HTML headings are an essential part of web development. They provide a way to structure and organize content on a web page, making it easier for users to read and understand. With Webtutor.dev's comprehensive guide, you'll learn about the different levels of HTML headings and how to use them effectively to create well-structured web pages. You'll also learn about best practices for using headings, such as using only one H1 per page and using headings to create a logical hierarchy of content.

[motorclit]

Got some advice for a lot of Gen Z and Gen Alpha: learn your technology.

No. I mean actually LEARN it, not just how to navigate it. Learn how it works, why it works the way it does, learn to code, learn even the laws, what it's like to run a website, servers, etc.

Cuz if you want online alternatives to the same 5 websites or some shit, you're gonna have to be the ones who come together and do it. If you got time to scroll endless hours on Twitter and tiktok, you got time to ban together with like-minded people and learn how to take back the internet. (Fellow Millennials who remember MySpace, take note as well!)

I advise you learn the history of what the internet has been like. Don't just read blog posts, articles, and watch YouTube videos. Talk to us Millennials about it! Many of us learned very basic coding from just wanting a better-looking MySpace profile! YOU CAN STILL CODE YOUR TUMBLR BLOG TO LOOK COOL FOR WEB BROWSERS.

Learn to understand that the internet is more than touchscreens and apps! The internet was NEVER supposed to be what it is today! Several people sounded the alarm about big companies creeping into the internet! What we are living through is why! Because guess what: THE INTERNET USED TO BE FUN!

Please please PLEASE try this for a while! I'm even trying to learn more basic coding myself! This book from 2006 helps break down the basics into something that's understandable:

If the pic doesn't load, the book is called "Head First: HTML with CSS and XHTML", a learner's guide to creating standards-based web pages. The authors listed on the cover are Elisabeth Freeman and Eric Freeman.

Yes, this teaches you how to make a very simple web pages from the mid-00s and it only works on a web browser, but my gods, the sense of satisfaction you get from making this shit work...

YOU ALSO DONT NEED FANCY FUCKING SOFTWARE. EVERY COMPUTER COMES WITH THE PROGRAM TO MAKE WEBPAGES.

AND THAT PROGRAM IS CALLED NOTEPAD.

I AM NOT KIDDING. NOTEPAD IS SPECIFICALLY FOR CODING. YOU DO NOT NEED TO BE CONNECTED TO THE INTERNET TO DO THIS EITHER. YOU CAN MAKE IT AND TWEAK IT TO YOUR HEART'S CONTENT UNTIL IT'S READY TO GO ONTO THE INTERNET!

Be aware: the server thing you can upload your practice website to listed in this book is defunct. The images for examples in this book might be, too. With this in mind, I chose a subject I knew something about for practice, and that was simply the topic of sunflowers. (I didn't upload it to the internet. I liked practicing with it as I learned in this book... and I gotta revise while I get back into it.)

Pick a topic for the sake of practice because you'll wanna learn how to link your custom pages together in order to navigate your own site and such.

I PROMISE YOU that this will feel very satisfactory if you give this a shot!

LET THIS BE YOUR GATEWAY INTO TRULY LEARNING HOW THE TECH YOU GREW UP WITH WORKS SO THAT YOU CAN POTENTIALLY HELP THE INTERNET AS A WHOLE! BECAUSE TECH KNOWLEDGE IS MORE THAN JUST NAVIGATING AN APP!

Please consider this. Help make the internet a less shitty place. Get together with friends (in person or online) and learn together!

We are the internet!

[fingertipsmp3]

Just sent the email withdrawing from my course and now I’m nervous lol

[audiovisualrecall]

Trying to pick a domain name for my art website is such a pain bc I'm indecisive af. Which is partly why I've had 3+ different sites before that I don't use, partly bc I hate the name I chose for the sites, partly bc I was trying different site builders. Now I want to try it without a site builder, because I want to be able to customize it a lot more than they allow. I was going to try WordPress but it was giving me a hard time just choosing the type of website and price (ie free/personal/business), so like whatever I'll go with bluehost and get a domain name and host from them and figure the rest of it out as I go. But I can't decide on the domain name. Bc I'm afraid to have my full name in the page because of growing up with internet rules around not sharing personal info, so it makes me anxious. BUT it is a professional artist Thing to have your name as your portfolio websites name. Like its totally normal and expected. And what else would I name it, otherwise? Dragony, like my etsy? But I've been considering changing that bc it doesn't really feel right/professional/like it fits?? So idefk.

[fangirltothefullest]

I find it fascinating seeing the use of tone indicators circle around so much back to a similar way that my mom used them in early AOL message board days. Tone indicators are useful to us because they help people read how we are talking and the tone we intend so as to not alarm people when talking online. We don't have the ability to tell if anyone is serious by playful manner of facial and physical expression so they're useful to us online even now!

But the fact that they evolve and change is fun to watch even as I watch it circle around.

So here's some examples of American tone indicators and outside influences to them that I've seen since first being online:

My mom's age- AOL users/early message board system used a fabulously straightforward way of indicating tone:

::::begin sarcasm now::::, ::::laughing::::, ::::shaking my head::::

The usage of colons was an easy way to identify a tone indicator was coming. There was a very limited way of creating text and often message boards did not come equipped with rich text formatting so this was a perfect way to show what you meant. They tended to have indicators fully worded with no short/chatspeak.

Then two things happened near each other- cellphones and rich text formatting being more prominent in online spaces.

Starting with cellphones- when they became a more accessible thing, tone indicators changed and abbreviations of the sayings became prominent, originally known as "chat speak" which began to form much more readily in texts and online. These indicators tended to be indecipherable unless told what they meant and the indicators had to be memorized:

Rofl, lol, smh, istg, wtf, ruok,

These tone indicators persist today, but part of their legacy was the limitation on character counts. Most places had a 140 character limit, meaning you had to get your message across fairly quickly. A way to indicate tone was either go the abbreviation route, or use the rich text editing.

Rich text allowed for italics, bonding and underlining so people could use these tools to indicate tone. These also had to be learned, because not everyone read them the same way and sometimes different places online would have different etiquette on what each tone meant. Freeboards would often have one board to specify what each one was for:

Sarcasm was popularly italicized

Anger was often bolded

Underlining was used often for seriousness

CAPSLOCK WAS YELLING!!!!

BOLDED CAPSLOCK WAS REALLY FUCKING ANGRY!!!

ITALICIZED BOLDED CAPSLOCK WAS A CATACLISMIC EVENT EVEN WITH A PERIOD.

If you had the ability to strike through, it was a whisper or afterthought.

Doubling your rich text with different punctuation could change the tone.

But the internet also let people in America see other people's cultures more readily. We are notoriously bad for teaching about other cultures here but the internet did allow us something fun! An exchange of faces if you will.

In the West, we were using emoticons with other things (note that this was dependent on if it would not work if your HTML or CSS confused the brackets and parentheses etc. as coding):

:), :(, :O, >:(, =), =D, D8, D:<, O_O, ( • )( • ), >.>, 8===D~~~, [̲̅$̲̅(̲̅1̲̅0̲̅)̲̅$̲̅], ಠ__ಠ, ʕ •ᴥ•ʔ,

But now we could see that other people were making faces in different ways and the anime crowd caught on very quickly:

OTL, (^_^;), (⁄ ⁄•⁄ω⁄•⁄ ⁄), (/◕ヮ◕)/, \(^o^)/, (✿◠‿◠), ᕕ( ᐛ )ᕗ, ¯\_(ツ)_/¯, (づ￣ ³￣)づ, (OwO), (ノಠ益ಠ)ノ彡┻━┻,

Boy do I LOVE emoticon indicators! A lot of them are still used today as well.

And then things shifted again when cellphones gave us emojis! Now tone indicators were colourful!

🥺🤞🙂😔❤️😝🙄😨😱😣💀🤏👍👎🤞

But they were not accessible as easily to PC users so there becomes a nice little divide between who is and isn't using them. Also there are so many now sometimes it's hard to figure out what the intended emotion is, considering they look different on different devices! But the younger age groups of my students are trained on emojis! So much so that if I ask them to draw happiness, they draw the happy emoji.

I'm sure I'm missing a few but right now we've been back to a combined group of tone indicators! Here on tumblr we are using the slash to indicate tone much like the original AOL message board users used the colon and we are shortening the words AND using abbreviations and some write out the whole thing! Its FASCINATING seeing it come full circle.

/gen, /pos, /jk, /srs, /serious, /genuine, /positive, /happy, /encouraging

I just love how languages evolve! 8D

What are some tone indicator trends YOU noticed in your online spaces?

Edit: FIXED all of the stupid phone spelling errors.

[kaiasky]

Complete-ish Guide To Settings You Might Want to Change

These instructions will be for desktop, because the settings are easier to find there. You can do the same on mobile, but it might be in different places.

Dash settings

Your dashboard is broken down into several feeds, including "Following" and "For You".

"Following" is primarily the posts of people you follow, "For You" is algorithmic.

If you just joined, "For You" is default, if you're a longtime user it's "Following". You can change this in the settings on the right

A lot of longtime users will tell you that the Following feed is where we spend most of our time. But try out all the feeds, and see what you like most.

The settings that are settings:

To start, click the settings gear under the account icon (the abstract person head).

This should take you to the General tab. Key settings:

Community Labels: By default anything NSFW is silently hidden. You can change how each subtype is handled.

Hide Additional Mature Content: If you have an iPhone disable this or it'll hide every post from you on the off-chance it contains porn.

If you're under 18 as determined by the birthdate you entered on signup, you can't change these. (If you want them on, you'll have to make a new account and lie)

Under the "Dashboard" tab, you can enable timestamps, which is mostly just nice information to have. sometimes a post is from 2010 and you can be like wow.

The next four probably have the biggest impact on your tumblr experience, so I'm gonna do a breakdown.

Best Stuff First reorders your "Following" to have popular posts at the top. Disabling it makes your feed chronological. I like it off, but up to you.

Include Stuff In Your Orbit and Based On Your Likes put various content from "For You" into "Following". Personally, I disable them to keep "Following" purely posts by people I follow, and then switch between feeds to get what I want.

Followed Tag Posts will put content from the "Your Tags" feed into your "Following" feed. Since you can go to the separate tags feed, I usually turn this off (it tends to show me a lot of duplicate posts), but up to you.

Under the "Notifications" tab you can tell Tumblr to stop sending you emails.

I'd recommend disabling all the emails--if you get a bunch of replies, Tumblr will happily send you dozens of emails, and you don't need that.

Notifications is the push-notifications in-app/in-website. The mobile app, for some reason, has a much better interface for controlling these, including the option to only get activity-notifications for mutuals. You can leave these on, or turn them off if you find the flood of notifications is distracting.

Tumblr News is a newsletter, it usually just has content from @fandom and the other staff-run recap blogs.

Conversational notifications sends you more emails.

Under the "Tumblr Labs" tab you can enable a bunch of cool beta tests.

I particularly suggest Reblog Graphs, What you Missed tab, & Popular Reblogs tab, but they're all fun to try out. A lot of these are honestly better than the For You dashboard.

For each blog you have, you can customize it's Blog Settings. Beyond things like setting an avatar or description, there's a few settings that are fun.

Custom Theme gives you your own subdomain at [blogurl].tumblr.com.

This makes your blog easier to search, and a lot of 3rd party tools depend on you enabling it. It also makes it easier to link your posts to people who don't have tumblr accounts.

You can completely customize the CSS/HTML/Javascript. you can go legitimately crazy. It's not a requirement, but if you want unlimited flexibility, go wild.

On the contrary, if you wanna run a more private blog, you can disable this and then hide your blog from search results/non-registered users.

Likes and Following are public by default. I like to turn these off so I don't have to worry about like, "what will people think if they see i'm following [...] or liking [...]". But it's also fair to keep them public if you'd like.

The other Blog Settings are important but pretty self-explanatory I think.

Finally, there's some useful tools I like:

XKit Rewritten - A bunch of scripts (like RES for Reddit). The one I really like is "mutual checker", which shows at a glance which blogs you are in mutuals with. Which is such a good feature it's included in the mobile apps by default i think.

siikr.tumblr.com - Tumblr search is bad, and google's indexing of tumblr blogs is worse. Siikr will find any post you've made on your blog. Because disk space is limited, only use it to search your blog, and if you're tech savvy consider running a local copy from source.

[thatdehydratedmedic]

Recent pursuits of knowledge - Mid June

Recently I've fallen into the typical academic rabbit hole where one thing leads to another and suddenly both your hands are full of more and more things to learn.

By a chance occurrence, a random google search led me to find a Maldivian scientific journal. Since my male audacity (I'm a girl, btw) has long convinced me that I'm in fact capable of anything and everything, I decided I would do a little research and try to publish it in the little time I have before I start medical school. (Which, by the way, is already less than 2 months.)

As it goes, dominoes fell, one by one. First I thought of doing a small study on medicinal herbs of the nation. Something along the lines of testing the effectiveness of 'Dhivehi beys'. However, a little voice in the back of my head would not stop whispering in my ear, begging me to try doing one about dreams. At this point in time, I had no idea what exactly I was looking for. I presented this barely-thought-out plan to my dear friend. She was on board, and she also shared that she also thought dreams were a lot more interesting of a subject than medicinal herbs.

So with a theme in mind, I began looking into past research and well established theories on our subject of study. I learnt quite a few interesting things about Bion's dream theory. Unfortunately, in the midst of preparing our google doc, something else caught my eye. Having shared the google doc containing everything I had found at that point with my friend, I decided to start learning the programming language R. I told myself it would prove to be useful in our study. (For reference, I had begun this adventure at around 10 PM, it was now 2 AM.)

Having learnt all the fundamentals and syntax of the language, I finally went to sleep at 4 AM. Next morning, I slept in. However, as soon as I woke up, I did some more reading on dreams and updates our shared google doc. After begging my friend to please read the damn document, I started working on R again.

For the next few days, I did not do any more reading on dreams. I have since forgotten about the matter if I'm being completely honest. On the other hand, I had found it much more interesting to tinker with R, trying out the different graphical features R had to offer.

You would think I stuck with perfecting R, and would have learnt it to some degree by now, but you could not possibly be more wrong because I am plagued by my interest in way too many things. A jack of all trades, a master of none. I am a museum of abandoned hobbies. R did not escape this cruel fate, because as luck would have it, I soon rediscovered my love for python.

I downloaded python and pygame. It was as if I had reconnected with an old friend.

I am contemplating on whether I should mention my brief encounter with html and css. Some of the very first languages I learnt. I started a simple and goal-less project website as I waited for python to install. It seems useless to mention as this only lasted 5 minutes - or maybe even less.

Today, it's been a week since all of this has occurred. And today, I have no interest in any of these. Which is why I painted today. I am a museum of abandoned hobbies, and sometimes I revisit my old friends.

[fujowebdev]

Help needed: Most Breedable Programming Tool Survey

Our 100% serious mission statement on "making every last web technology breedable" is now one of our most reblogged posts.

In the spirit of giving the public what they demand, it is time for a ✨Fan Survey✨. Help us decide which one of our characters and beyond is the most breedable, then back us on Kickstarter! (or y'know, back us first, we're not picky).

Want to learn more about our project? Our Kickstarter pitch is your friend! Want to learn more about our characters? Head to our Spotlight on Localhost HQ (Git/GitHub/Terminal) and Spotlight on Browslerland (HTML/CSS/ARIA).

And join us tomorrow, Saturday, April 22nd at 2PM PDT to watch our project lead @essential-randomness build the #FujoGuide website LIVE on Twitch! Get the details here.

[kitkatt0430]

Instead of doing a Six Sentence Sunday today, I think I'll do a short tutorial on copying over fanfic from FFnet to Ao3.

So you've got some old fics on FFnet and you'd like to back them up to Ao3, given the instability of FFnet. And for whatever reason you don't have the original files for the fics, or maybe you have edits to the FFnet versions that you don't want to lose that the OG files don't have. Whatever the reason, you're looking to directly copy over your fic from FFnet to Ao3. And you're looking for a relatively easy way to do so, but Ao3's import functionality doesn't work with FFnet web pages.

Never fear! It's actually a fairly easy process to get your fic copied over from FFnet.

First, head over to FFnet and open up the fic you want to port over to Ao3. You don't need to log in if you don't want to, just so long as the fic in question is yours and you can access the page, then you're good.

In a separate tab, open Ao3 and login, then choose the option for posting a new work.

Now back on the FFnet tab, you should be able to directly copy over the title, summary, fandom, and what little tagging was available on that site onto the relevant Ao3 fields in the tab you have for a new fic. You'll also want to take note of the published date on FFnet and back date the new work in the Ao3 tab.

FFnet may not have a lot of useful tag data, but it's pretty easy to replicate and build off that in Ao3.

Now for the hard part. Which is still pretty easy. Getting the fic body, plus any notes in the fic itself, copied over to FFnet.

While getting around FFnet's lockdown on the text of the fics they host is fairly simple - I'm pretty sure it's entirely css based - you don't really need to do that in order to get the body of your fic copied. And, honestly, even if you do have a work around in place to allow copying of the fic's text... you will probably find the following method a lot easier still.

In the body of the fic, right click the first line of the fic, which should bring up a menu with a bunch of options. On Firefox or Chrome you want the inspect option.

This'll bring up the dev tools with the html inspection tab open and, if you give it a few seconds to load, the specific line you right clicked to inspect should become the visibly selected section of the html.

The selected section of the html should be a paragraph (or <p>) element. You're going to want to right click the div (<div>) element that encapsulates that paragraph and the rest of the paragraphs in the fic body. This'll bring up another browser menu with the option to copy, which will bring up a flyout menu when you select it. From that flyout menu, you want the select the option for Inner HTML.

You have officially copied the html for the fic body. And you can dump that entirely in html format straight into Ao3's html work text editor. Then switch it to rich text for easier editing if you want to fix any spelling, grammar, formatting, or aesthetic issues. I typically try to fix at least the line breaks since it took a long while before FFnet adopted real line breaks and so there are a lot of fics where I have various combinations of dashes, em-dashes, equals signs, and other characters as line breaks. I figure, if I'm bringing the fic to Ao3 then I can try to make it more screen reader friendly in the process.

You can also move fic notes around in order to move pre/post fic notes out of the fic body or basically whatever you want to the fic. Maybe re-read it to determine any additional tagging you want to add now that your fic has access to Ao3's much more robust tagging system.

But that's it. You can hit post and have your fic with all it's original notes, and a back dated post date to reflect when it was actually written, all available on Ao3 now.

It's a pretty quick process, all told, and the only real bottleneck you might encounter is any time spent in re-editing the fic between migrating and posting. Even chaptered fics are fairly easy to migrate with this process, since the bulk of the work in publishing a new chapter is just copying the inner html and then moving any notes to the appropriate location before hitting post.

Anyway, for my fellow fic writers looking to move your old FFnet fics to a more stable archive, I hope this process helps a lot.

[izicodes]

Hii ! I’m in a bit of a problem rn and I’m wondering if you could help ( sorry for bothering you )

So school just finished and I’m on vacation for like 3 months so I really want to learn how to code ( I mainly want to make cool websites and stuff ). So I started to learn html and css but it just seems so overwhelming especially seeing all the ressources and tutorials online, could you please help me know what to learn first ? 💖

Hiya! 💗

Yeah, I can help! It can be overwhelming at first, but it's best to break it down into chunks and tackle them bit by bit.

For now, as a complete beginner, use these 3 resources:

HTML and CSS course video - LINK

W3School (for extra help) - HTML LINK | CSS LINK

MDN (for even extra help) - HTML LINK | CSS LINK

After that, work on projects to test your knowledge:

List of 11 projects to tackle - LINK

Here is the list of things you want to cover in HTML:

Basic structure

Tags and elements

Attributes

Forms

Semantic markup

Tables

The same but for CSS:

Selectors

Box model (margin, padding, border)

Typography (fonts, text properties)

Colours and backgrounds

Layout and positioning (floats, flexbox, grid)

Responsive design (media queries)

Transitions and animations

Now that you have a list of what you need to cover, tackle them one by one, making sure you understand the topic before you head over to the next. The video tutorial covers all of this and more. If you don't understand a bit in the video, stop and look on W3School and MDN for further understanding and then continue on with the video. Also, tackle the video slowing. Don't rush, don't do it, it'll just make the learning process even longer if you getting not understand things.

The resources I listed are my complete go-to. After that, as you've noticed, there are hundreds more. Go through the ones you need for the specific project you're working on or the topic you're studying only.

Hope this helps and good luck! 💻💗

[fiveredlights]

Maybe you've answered if before but I love how you wrote candle wax and Polaroids, both the fics itself and the format. Can you please give me tips on how to do the format? Because I already struggle with just putting cursive into the ao3 text

thank you for the ask anon and everything is under the cut because i have a terrible tendency to ramble!

okay for the formatting you will need to be somewhat familiar with html formatting within ao3. it can be quite difficult to understand in the beginning but i promise it'll get better.

the most helpful guide i have to formatting can be found here and it is a goldmine! anything and everything from basic html formatting to more complex things can be found here. another helpful one is here.

for glitter on the floor the only two basic html formatting things i used were font colour and font style (i also did a whole email thing but that's a whole other post about work skins i'm happy to ramble about)

firstly to do anything, you'll need to create a new work skin which you can find to do here. otherwise it's dashboard -> skins -> my work skins -> create work skin. you'll need to title it uniquely.

i would follow the first guide on how to do the things i'm about to show you because it's a bit difficult to show on tumblr but using your example, if you were wanting to do cursive font in your work, heading to your newly created work skin you will first need to put the CSS into it. in the CSS box you would put:

#workskin .font { font-family: 'cursive', cursive; }

save that, and in your actual work in the html box you would put:

which should hopefully show this:

a very common issue i used to get was that for CSS and HTML it is much easier copying and pasting rather than typing it out yourself because the quotation marks are different than the ones on the keyboard. so i would pull the css and html from the guide and modify then.

for font colour it is a similar thing, choose whatever colour and pull the hex code. in your CSS box you would have:

in your html box you would put:

and you should get this:

anon if you can, deffo shoot me a message if you need more help because it's a bit difficult explaining when i don't know how far along you are in the html journey but hopefully i steered you a good direction.

[webtutorsblog]

CSS tutorials for beginners: Learn CSS step-by-step with WebTutor.dev

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS allows web developers to separate the presentation of a web page from its content, making it easier to maintain and update. CSS works by using selectors to target specific elements on a web page and applying styles to them. Styles can be applied to individual elements or to groups of elements, and can include properties such as font size, color, background color, padding, margin, and more.

CSS provides a powerful and flexible way to style web pages, allowing developers to create beautiful and responsive designs that work across different devices and screen sizes. By mastering CSS, you can take your web development skills to the next level and create stunning websites that stand out from the crowd. To get started with CSS, you will need to learn the basics of CSS, including selectors, properties, and values. You can then start experimenting with different styles and layouts to create unique designs for your web pages. There are many online resources available for learning CSS, including tutorials, videos, and courses, like Google CSS, WebTutor so you can choose the method that works best for you.

3 Methods to Add CSS to Your Web Page

To add CSS to a web page, you can use one of the following three methods:

Inline CSS: Inline CSS is added directly to the HTML element using the "style" attribute. For example, to set the text color of a paragraph to red, you can use the following code:

<p style="color: red;">This text is red.</p>

Internal CSS: Internal CSS is added to the head section of the HTML document using the "style" tag. For example:

<head>   <style>

    p { color: red;  }

  </style> </head> <body>

  <p>This text is red.</p>

</body>

External CSS: External CSS is added to a separate CSS file with a ".css" extension. The CSS file is then linked to the HTML document using the "link" tag in the head section of the HTML document. For example:

<head>

  <link rel="stylesheet" href="styles.css">

</head> <body>

  <p class="red">This text is red.</p> </body>

Understanding the Basics of CSS Syntax and CSS Selectors

CSS syntax consists of a selector followed by one or more declarations enclosed in curly braces. A declaration consists of a property, followed by a colon, and a value, separated by a semicolon.

CSS selectors, on the other hand, are used to target specific elements on a web page and apply styles to them. Selectors can target elements based on their element type, class, ID, attribute values, and more.

For example, consider the following CSS code:

In this example, h1 is an element type selector that targets all h1 elements on the web page, #header is an ID selector that targets the element with the ID of "header," and. intro is a class selector that targets all elements with the class of "intro."

By mastering both CSS syntax and selectors, developers can create effective and efficient stylesheets that apply styles to their web pages in a targeted and precise manner. There are many online resources available for learning CSS, including tutorials, and courses, making it easy to get started with CSS and advance your skills.

By mastering the syntax of CSS, developers can create effective and efficient stylesheets that apply styles to their web pages in a targeted and precise manner.

Additional information about CSS comments

CSS comment syntax used to add notes or reminders to the stylesheet for developers to reference later. They are ignored by the web browser and do not affect the rendering of the web page.

In CSS, comments can be added using two forward slashes (//) or by enclosing the comment in /* and */.

Example

/* This is a CSS comment that spans multiple lines.

You can add any notes or reminders here that can help you or other developers understand the code. */

h1 {

  color: blue; /* This sets the color of all h1 elements to blue */

}

In this example, the first line is a CSS comment that spans multiple lines and is enclosed in /* and */. The comment is used to provide additional information about the code that follows.

The second comment is a single-line comment that starts with //. It is used to provide information about the line of code that follows it.

By using comments in CSS, developers can make the code more readable, maintainable, and easier to understand.

Overview of CSS colors

Colors are an important aspect of CSS and are used to style HTML elements with various shades, tints, and hues. In CSS colors can be defined using keywords, RGB values, HEX values, HSL values, and more.

Keywords: CSS provides a set of predefined color keywords, such as red, blue, green, black, and white, among others.

RGB values: RGB stands for Red, Green, Blue and is a color model used to represent colors in digital devices. RGB values range from 0 to 255 for each color, where 0 represents no intensity and 255 represents full intensity. RGB values can be defined using the rgb() function, like so: rgb(255, 0, 0).

HEX values: HEX values are another way to represent RGB colors in hexadecimal format. HEX values start with a # symbol and are followed by a combination of six letters and numbers that represent the intensity of the red, green, and blue components. For example, #FF0000 represents the color red.

HSL values: HSL stands for Hue, Saturation, Lightness and is another way to define colors in CSS. HSL values can be defined using the hsl() function, where the hue is represented by a value between 0 and 360 degrees, the saturation and lightness values range from 0% to 100%. For example, hsl(0, 100%, 50%) represents the color red. By using any of these color formats, developers can add a wide range of colors to their web pages and style their HTML elements in different ways.

[theneighborhoodwatch]

Hi! Gonna start off and say that I love the work you're doing with the Welcome Home neocities website! It's perfectly stylized for the project/puppet show and I can see the work you're putting into it.

I'd love to learn how to make my own neocities website (for fun? For a personal project??), so I was wondering if you could provide some tips and/or pointers for a first-timer.

Thank you!

HAHA well first of all i'm flattered that someone would think i'm skilled enough to be giving pointers in the first place. i still consider myself a novice when it comes to web design (for example, if you're wondering why every page on welcome to welcome home has its own CSS, it's because CSS is Way harder for me to wrap my head around than HTML) so i can't give any Super advanced tips, but i can at least write about what's helped me so far:

GUIDES. neocities has its own tutorial and list of HTML/CSS resources, but user-made guides are your best friend when it comes to figuring out where to go from there. a.n. lucas and pauli kohberger both have really good guides for beginners, but for the more advanced stuff, i found myself referencing the resources on solaria's webspace and sadgrl.online the most. w3schools is also very helpful when it comes to answering more specific questions like "how do i use two different fonts on the same page?" (and probably more.) if all else fails, then usually just googling "how to (x) in HTML" or "how to (x) in CSS" will yield at least one useful result. for making your website more accessible, there's the accessible net directory and this masterpost by foxpunk on tumblr.

it sounds obvious, but it helps to have a solid idea of what kind of site you want to build before you actually dive in, and then snoop around on neocities to get an idea of how other users approach the same topic. for example, i got the idea to start a welcome home wiki on neocities after being reminded of the 8:11 wiki on the same site, and then i spent a couple days just looking up stuff like "wiki" or "fansite" on neocities and then clicking on any page that caught my attention to study it.

layouts! there's no shame in using a premade one, and you can even learn more about HTML/CSS in real time just by messing around with the base code before implementing any intentional changes. sadgrl.online's layout builder is a VERY popular choice, since you can already do a lot with the basic options it offers and it's easy to further customize once you have it set up on your page; it's what i used to make welcome to welcome home. sadgrl.online's webmaster links also feature a bunch of other options under the "layouts" tag, and if none of those work for you, then you can even find something just by looking up template/templates/layout/layouts/HTML/CSS on neocities itself.

side note: if you're reading this and you want to make a wiki then you can also use this wikitable code. it came out after i had already established the Look of welcome to welcome home, so i probably won't implement it any time soon, but i TOTALLY WOULD HAVE if it was around when i first set the site up.

you can scale images up or down using percentage, with 100% being the image's default size. i don't know how helpful or acceptable that is, but i use it a lot.

don't feel pressured to get everything done at once, even if you expect people to be visiting your site frequently. usually if you just slap on an "under construction" gif or even just write "hey this site is still under construction" then people will understand. i don't think i've ever seen anyone get super huffy about slow updates on neocities, anyway.

EDIT: OH. GRAPHICS. i mention all of these on welcome to welcome home's front page but i Also wanted to note them here: betty's graphics and websets by lynn both have HUGE collections of background tiles and other graphics that work especially well if you're going for that old web charm. i also like to use this mirror of patterncooler for backgrounds bc of the customization options. you can also make your own background tile and then use a seamless tile maker like this if all else fails.

EDIT 2: ALSO. obviously. do not be like me and use discord or any other chat client as a filehost, no matter how promising it looks, because one day you WILL get a very nasty surprise when the request signature on those urls expire and the images are no longer accessible on other sites. there are a myriad of other filehosts out there, but personally i recommend file garden (and also donating to file garden if you can, even if only for a couple months. i know i said that just yesterday, but if it gets more folks to subscribe then i'm gonna keep saying it.)

[quietmarie]

Anyone can program (yes, even you)

"Programming is easy"

I saw some variations of this statement shared around the site recently, always in good intentions of course, but it got me thinking.

Is that really true?

Well it certainly isn't hard in the way some developers would want to make you believe. A great skill bestowed only upon the greatest of minds, they're the ones making the world work. You better be thankful.

That is just elitist gibberish. If anyone ever tells you that programmers are "special people" in that way, or tries to sell you on the idea of "real" programmers that are somehow better than the rest, you can safely walk in the other direction. They have nothing of value to tell you.

But I think the answer is more complicated than a simple "Yes, programming is easy" too. In all honesty, I don't think it's an easy thing to "just pick up" at all. It can be very unintuitive at first to wrap your head around just how to tell a computer to solve certain problems.

One person in the codeblr Discord server likened it to cooking. That's a skill that can be very hard, but it's also something that everyone can learn. Anyone can cook. And anyone can program.

I really mean that. No need to be good at maths, to know what a bit is or whatever it is people told you you need. You're not too old to learn it either, or too young for that matter. If you want to start programming (and you can read this post), you already have everything you need. You can write your first little programs today!

One of the cool things about programming is that you can just fuck around and try lots of stuff, and it's fine. Realistically, the worst thing that can happen is that it doesn't work the way you imagined. But you'll never accidentally trigger the fire alarm or burn your house down, so feel free to just try a bunch of stuff.

"Okay I want to learn programming now, what do I do?"

That's awesome, I love the enthusiasm! As much as I'd love to just give you a resource and tell you to build a thing, you still have to make a choice what you want to learn first. The options I'd recommend are:

Scratch: A visual education tool. The main advantage is that you don't have to worry about the exact words you need to write down, you can just think about the structure of your program. The way it works is that you drag and drop program elements to be executed when they should be. You can relatively quickly learn to make cute little games in it. The downside is that this isn't really a "professional" programming language, so, while learning from Scratch will give you the basics that apply to most languages and will make switching to another language easier, you're still gonna have to switch sooner or later. Start here: https://scratch.mit.edu/

Python: The classic choice. Python is a very widely used, flexible programming language that is suited for beginners. It is what I would recommend if you want to skip right to or move on from Scratch to a more flexible language. https://automatetheboringstuff.com/ is your starting point, but there's also a longer list of resources here if you want to check that out at some point.

HTML/CSS/JavaScript: The web path. HTML and CSS are for creating the look of websites, and JavaScript is for the interactive elements. For example, if you ever played a game in your browser, that was probably written in JS. Since HTML and CSS are just for defining how the website should look, they're different from traditional programming languages, and you won't be able to write programs in them, that's what JS is for. You have to know HTML before you learn CSS, but otherwise the order in which you learn these is up to you. Your JavaScript resource is https://javascript.info/, and for HTML and CSS you can check out https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web.

I put some starting out resources here, but they're really just that - they're for starting out. You don't have to stick to them. If you find another path that suits you better, or if you want to get sidetracked with another resource or project, go for it! Your path doesn't have to be linear at all, and there's no "correct" way to learn things.

One of the most important things you'll want to do is talk to developers when you struggle. The journey is going to be frustrating at times, so search out beginner-friendly coding communities on Discord or wherever you're comfortable. The codeblr community certainly tends to be beginner-friendly and kind. My DMs and asks are also open on here.

[drawnfromthedead]

Update on the learning to code thing: at first I was using Mimo, for nearly the past 2 months actually, and I decided to get a second app yesterday, Sololearn, and have been working with W3schools as well (I have also been considering Codédex, just because it looks fun, and the Odin project when I get more confidence because it looks intense) So I can "study from different angles" so to speak, in my head if I study one thing multiple ways it stays for longer. And anyways, I found out that Mimo wasn't teaching a shit tone of stuff!!! With html alone there where so manny gaps between what it was teaching me and the questions it would ask me (for example it didn't tech me what a div was (I googled it) but it asked me a question about styling a div in the css section, and it didn’t show me haw to make a table or lists either, it did teach me lists but not until I was already aslo learning Java (if I remember correctly)).

I still think Mimo is good, I did some further digging on places like Reddit and several of those sites where they rate different educational apps, and Mimo still does pretty good! Unfortunately, I like knowing all the stuff about what I'm learning and implied learning (where it teaches you a thing by asking you questions about the thing) isn't for me. I need information first, then repetition to really let it sink in (and again, I need to see things in multiple ways). It's why with Duolingo, I've been moving at a snails pace, learning pretty much anything. Duo does better with its format than Mimo (in my opinion) because with it's "implied" learning your allowed to tap/click on what you don't know and read what it is (or if it's a word that has multiple meanings you can read through those and get good idea). Duo also has these little section notes things that you can read through before you start a single lesson in the section, giving you the info before it asks you questions on the things. I don't think I can continue with Mimo personally, but I still think I'll recommend it for a start at the very least! I also think imma start recommending learning python early on as well, just because what little I know of it was so simple and easy to learn I think it makes a good jumping point and it's good for a lot of stuff!!!

On another note (related), ever since learning that I need the info before I'm questioned on it (I get too frustrated if I don't and it makes it hard for me too keep learning because I feel discouraged), I've figured out how to make learning a bit easier for me and I've been moving so much faster in my various studies (I say say pretentiously). I've also managed to order some textbooks for myself, both for coding and for my SATs! I'm very excited and I'm hoping I can keep this up, learning anything is hard and can get exhausting buy I'm hoping I can get better at all of this, I like this and wanna keep going!