#HTML and CSS Projects

[wonhoutboy]

page_03: encounter by wonhoutboy

preview / code

• writing diary page: header, icon, bio, 3 links; • writing updates for each story; • progress bar; • cover space 170x250px; • tumblr controls by magnusthemes; • css icons by css.gg; • can be used as a base code as long as you credit me; • images used in the preview: x x x; • please consider buying me a coffee <3.

!! if you find any bugs/if anything doesn’t go well or if you just struggle with customizing it, please reach out to me via private message or ask and i’ll gladly help!

reading diary page coming next!

[riacte]

🎈 Bogwaters Demo update!! :D

Formatting update, 2 new NPCs, randomisation feature, and quality of life changes

(Previous post)

Bogwaters is a free, text-based, interactive fiction browser game about running an underground shipping Discord server in the 2021 MCYT fandom, hosted on itch.io.

Formatting update:

Added more headers. Also added coloured dividers to section off text:

Home: teal

Tumblr: light blue

Discord: light purplish blue (Discord colour)

Ao3: dark red (Ao3 colour)

Messages: yellow

Check out users/invite: light green

Sleep/new day: gay man flag gradient

Trivia: colours for Tumblr, Messages, and Check out users are eyedropped from the old Tumblr UI

Feedback for these colours are welcome!

2 new NPCs:

Now you won't be locked out of winning the game if someone blocks you! The new NPCs are carbonara-art and hippie-benbog with their own storylines and unlock conditions. 

New features:

Randomised mandatory daily fandom enjoyment decrease ranging from 3 to 7

Chances: -3 (10%), -4 (10%), -5 (60%), -6 (10%), -7 (10%)

When you sleep, there is a randomised potential +1 increase in reblog (20% chance) and post (10%) quota for the following day. Does not carry past that day.

In addition to blogs of the 2 new NPCs, blogs for doehills, ofthebigwaters, and riversymphony are added. These three are not interactable. 

Quality of life changes:

Skippable prologue 

Some scenes that don't have bearing on the gameplay are skippable (for this version, it's the conversation with kindredwaves on June 2)

An individual "check out a user" section now has a link to their respective Tumblr blog and vice versa

Misc:

Minor changes to dash content

Minor changes to text formatting

"Days played" shows up as a stat when you get an ending

"Days left (including today)" shows up in the home menu

Reduced animation 

Reblogs and feedback are appreciated! Thanks for playing! <3

[polypinks]

akiyama mizuki bundlrs inspo!

page at .cc/amia

features: scrollbox, rotating lace, floating mizuki, (hopefully working) custom cursor, and buttons!

reblogs appreciated ♡

[izicodes]

Sugary Scribbles | #8

Saturday 6th January 2024

IT'S BASICALLY WORKING (on larger screens)! My never-ending war on website responsiveness continues! I have a large screen and I stupidly only took into account of MY screen size. What I did do though is created a message for phone-table sizes because it just wouldn't make sense it working on really small devices - in my opinion~! But for now I will put this on hold because I am excited about my other project idea I came up with yesterday oops~!

This is my first project of the year and it's super adorable in my opinion! It paints, it erases, it deletes and it saves your artwork! Ticks all the boxes I made at the beginning of the project! Turned a simple 'Make a HTML painting webpage' into something more cuter and cool! Job well done! 😩🙌🏾💗

You can try it out (if you have a larger screen size), all that happens is the painting will be off the mouse direction a bit, sorry!

link to the Sugary-Scribbles web app! 🍡

Lastly, here is a cool drawing I made as I was testing the site~! I'm a better artist than this I swear, just not good using a mouse...

List of resources I used during the project

Figma - to plan the webpage

Canva: to make the header

Photopea: for further photo editing

RedKetchup: to colour pick quickly

CSS Animations: to add the zoom-in-n-out animation

MDN Canvas: to know what the element does properly

YouTube Tutorial: to get inspiration and extra help

Flaticon: for the icons and cursors

Html2canvas API: to turn the drawing into an image (tutorial)

That's all, have a nice day/night and happy coding! 🖤

[fishareglorious]

Hello my r1999 soldiers. I am looking for people able to help me with the making of a website that'll contain the story logs. Writing them down one by one is going to take me thirteen years if I do that, so may I ask, are any of you willing to help with providing the logs? Including the branching dialogue options? Something along these lines:

If you wanna help, please feel free to dm me here with the info, or message me on discord at friedfishforsale.

Currently am focusing on writing the main story, specifically with the This is Tomorrow (prologue) and In Our Time.

[orcelito]

Working on my javascript for my web page. Turns out I have the perfect kind of setup to accomplish some of the project requirements, specifically with even handlers and user interactions

My website, conceptually, will load a different employee details page depending on what employee name is clicked on. But I need to load it dynamically (instead of hard-coding it) so that the user can add or delete employees & it'll be able to still load the relevant shit.

So! Only one employee details page, but depending on how it's loaded, it'll load a different employee's information. Still working on getting down Exactly how to do it (I'm thinking using URL parameters that'll read a different object depending on what ID is used)

It's entirely doable. In fact, it's probably extremely common to do in web pages. No one wants to hard-code information for every new object. Of course not. And thus the usefulness of dynamic javascript stuff.

I can do this. I can very much do this.

[neospidey]

Skidaddle skidoodle

Wednesday, 11/22/2023 ❄️

I have now blasted your retinas with an ungodly amount of light, you're welcome. Anyways, this is the latest iteration of my portfolio... still haven't gotten around to actually coding it though. I'm thinking I should probably code my website in WordPress to be safe(r). Knowing me I'd probably unintentionally attract at least one person that will attempt an SQL injection or something. Speaking of which, I got sidetracked and now I'm learning about basic cybersecurity over at TryHackMe.

[divinector]

Coming Soon Page Design

[sandycodes]

day 8/100

life is just throwing me for an absolute loop these days, but im starting my adventure into javascript :) i didn't do a ton of coding today, but i learned about the history of javascript as well as 2 ways of running it in the browser, both in html files within the script tag and in an REPL (also one way of declaring a variable cause i think there are others but im not sure) <3

[codenewbies]

CSS Double Exposure

[falselyprofound]

[scrapes advertising dust off] a'ight that's enough of whatever the hell that was. Happy April!

The preview of the Video Nine website will be sticking around. I've got some tremendously silly plans for it, but with my workload the way it is it'll be a while before I can implement 'em.

In the meantime, suggestions are welcomed. ...And there might be a couple of easter eggs in there, if you really search. :)c

[codingflicks]

Scroll to Top Button

[izicodes]

Made a Google clone

Saturday 12th August 2023

I got bored today and made a visual clone of Google - meaning it doesn't actually work, unfortunately. I was browsing online and saw the "Beginner Projects" article and it said you could make a Google clone in under 2 hours, so I was like "Alright, bet." And I did.

1 hour and 42 minutes!! 💗✨💗✨💗

If I were to make my own mini search engine, it would be pink-themed. I have not made it responsive yet because you guys know my hate for actually coding stuff to be responsive~! （´∀`)

Might put this project on my Replit account (an account I haven't used in a long time)ヾ(＾-＾)ノ

[theplayer-io]

So I know how to code websites now, but idk how to upload it to the internet. My plan is to give you all a post that will update with a string of code to sort of visit the website(s?) that I am curating. I will reblog a post that had the original, and include a more patched version as time goes on. I am so sorry in advance.

Because of this.... Lemme show you how html and css works!!

For Project Our Realities, it will all be in html and css since that's what I'm learning so far. JavaScript will be included later.

HTML and CSS basics below!!

HTML, or Hyper-Text Markup Language is the basics of coding a website. It describes how a website will look. It unfortunately doesn't get you too far in terms of digital design, which is why we have languages like Css and javascript.

All HTML files start with <!DOCTYPE html>. This declares to the file that you will be coding in html rather than something like lua.

Each HTML file, after declaring it as an html file, starts with <HTML> and </HTML>. To end a tag, you must close it by adding a forward slash before writing its name (unless it is <br> or <hr>, or similar).

The <head> tag lets you add a title (silly little tab name), a favicon (silly little icon next to the name of the tab) and ways to link your CSS to the HTML.

An HTML file will look like this <!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

In the body, you can write the rest of your page, using headers (<h>/<h1-6>), paragraphs (<p>), and even forms (<form>).

--

CSS, also known as Cascading Style Sheets, is a type of coding language that is often used to create websites. No, it is not C++.

Rather than <>, CSS uses brackets {} to code.

CSS is used to style html websites, so it addresses html tags and lets you style their appearance. There is something known as inline CSS, where you can use the <style> tag to style something in your HTML file. HTML was never meant to have colors in its code, but you can change the color of text with inline css. Let's say you would like to style a header.

In your HTML file, it would say:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="(name of .css file goes here)">

</head>

<body>

<h1> My first header!!! :> </h1>

</body>

</html>

Now that we have our header, let's turn it red.

In your CSS file, it should say...

h1 {

color: red;

}

The H1 addresses that it will select all h1 elements. The code in the brackets shows that all those addressed will be the color red.

CSS has no starting or finishing lines, all elements will by stylized with {}.

--

To create an HTML file, you must end it with .HTML

To create a CSS file, you must end it with .css

Sometimes, when I create a link for the Css, the required name for the file will be in the HTML code already. Make sure that both files are in the same folder, and not one in a different folder within the same parent folder. This will not work.

--

Wanna test this out? Make a new notepad file on Windows, title it as "firsthtml.html", and create another file called "firstcss.css".

Place this in the .HTML file: <!DOCTYPE html>

<html>

<head>

<title> First HTML </title> <link rel="icon" type="image/x-icon" href="https://i.pinimg.com/736x/1a/8d/9d/1a8d9d26cdca15285d217c817f6953ec.jpg">

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

</head>

<body> <h1>Welcome, traveler!!</h1>

<h3><I>Thank you for reading the tutorial!! Follow the blog to keep up with our news.</I><h3>

</body>

</html>

Now, for your .css file, write this down:

h1 {

color: dark blue;

}

h3 {

color: orange;

}

--

Thank you so much for following this tutorial. I mainly learned about this from w3schools and in my school course. Happy coding!!! :>

-ava

[orcelito]

Oh yeah yesterday I went to my C programming professor's office hours to ask about what's being covered in class tomorrow. Since I can't go bc of my PT appointment overlapping with it & I'm apparently the kind of student that cares about attending every single class now.

While I was there, I ended up chatting with him about a few things, including my current standing in the class. He asked what I got on the midterm exam, & I answered it was an 87, and he told me I was one of the top 5 or 6 scores in the Whole Class (this being a like. Maybe 70 or so person class). Top score was a 92 or 93 (idr lol) & the class average was a 72. Apparently there were a few of us in the upper 80s/lower 90s, but most people got 70s or lower. And once he does the curve on the exam, he said I'd probably end up with a 97 or so on the exam. So yay!!!

And then he told me how he's noticed how I come to class every day and am really active with taking notes and answering questions. Bc I also sit up front all the time lmao. Hadn't even realized how much of a damned teacher's pet I've been being, but I've been Trying to be a good student this year. But he said I was the type of student that if I got an 88% or smth in the class, he'd likely bump me up to a 90% so I'd get an A lol. But he also said so long as I keep up with how I have been, I could possibly get a 100% in the class by the end (bc I've been there for all the extra credit questions in class and whatever).

And just. I went there bc I wanted to make sure I didn't miss anything important in class on Wednesday, and I ended up having my ego stroked for Real. Felt good to have my efforts be recognized.