#basic structure of an HTML

[removeload-academy]

HTML Tutorial for Beginners: Understanding the Basic Structure with Examples

This tutorial will guide you through the basic structure of an HTML document, break down its essential elements, and provide examples to help you grasp the fundamentals.

[weepingwitch]

i know this means absolutely nothing to most people but basically all of the little web game things I've made recently (angels in automata, hex plant growing game, d.a.n.m.a.k.u., life music, sudoku land, the metroidvania style map editor, etc etc etc) are all entirely self-contained individual client-side html files that can be downloaded and run offline and have literally no libraries or frameworks or dependencies, because i'm an insane woman who enjoys hand coding my input handling and display code from scratch in vanilla js and having it all live in one single html file with the game logic and the page structure and the page style all just living and loving together side by side in a universal format that can be run by any web browser on any devixe. i'll even include image files as base64 data-uri strings just to keep every single asset inside the one file.

[webtutorsblog]

Unlimited Learning: HTML Tutorial for Beginners - WebTutor

Are you looking to learn HTML? Look no further! At WebTutor.dev, we offer comprehensive HTML tutorials and resources to help you become proficient in HTML, whether you're a beginner or an experienced developer. Our website is designed to provide you with an immersive and engaging learning experience, covering all aspects of HTML, from the basics to advanced concepts.

Why Choose WebTutor for HTML Learning?

Free Online HTML Editor: We understand that practice is key to mastering HTML. That is why we provide a free online HTML editor that allows you to practice your coding skills in a real-time environment. Our editor comes with a range of features and tools to help you write, test, and debug HTML code efficiently.

Best HTML Editor Recommendations: Looking for the best HTML editor for your coding needs? We have got you covered! Our website offers recommendations for the best HTML editors available in the market, based on user reviews, features, and ease of use.

Beginner-Friendly HTML Tutorials: If you are new to HTML, don't worry! Our tutorials are designed with beginners in mind. We start with the basics and gradually progress to more complex concepts, with clear explanations and examples to help you grasp the fundamentals of HTML.

Learn at Your Own Pace: At WebTutor.dev, we believe that learning should be flexible and tailored to your needs. That's why our tutorials are self-paced, allowing you to learn at your own speed and convenience. You can access our tutorials anytime, anywhere, and from any device.

Comprehensive Learning Resources: Our website is a treasure trove of learning resources for HTML. From tutorials and articles to quizzes and practice exercises, we offer a wide range of materials to help you reinforce your learning and solidify your HTML skills.

Best Place to Learn HTML and CSS for Free: If you are looking to learn both HTML and CSS, WebTutor.dev is the best place to do it for free! Our tutorials cover both HTML and CSS, giving you a complete foundation in front-end web development.

Supportive Community: Learning HTML can be challenging, but you don't have to do it alone. At WebTutor.dev, we foster a supportive community where you can connect with fellow learners, share your progress, ask questions, and get help from experienced developers.

HTML Developer Career Opportunities: HTML is a fundamental skill for web development, and mastering it can open a world of career opportunities. With our comprehensive HTML tutorials, you will be well-equipped to pursue a career as an HTML developer and create dynamic and interactive websites.

HTML is Easy to Learn: If you are wondering whether HTML is hard to learn, fear not! HTML is a markup language, not a programming language, and it is considered one of the easiest languages to learn for beginners. With our step-by-step tutorials and interactive learning resources, you will find HTML a breeze to learn and master.

Whether you are a beginner or an experienced developer, our HTML Introduction page has something for everyone. From HTML tutorials for beginners to advanced HTML concepts for professionals, we have got you covered. So why wait? Start learning HTML today!

[codemerything]

A structured way to learn JavaScript.

I came across a post on Twitter that I thought would be helpful to share with those who are struggling to find a structured way to learn Javascript on their own. Personally, I wish I had access to this information when I first started learning in January. However, I am grateful for my learning journey so far, as I have covered most topics, albeit in a less structured manner.

N/B: Not everyone learns in the same way; it's important to find what works for you. This is a guide, not a rulebook.

EASY

What is JavaScript and its role in web development?

Brief history and evolution of JavaScript.

Basic syntax and structure of JavaScript code.

Understanding variables, constants, and their declaration.

Data types: numbers, strings, boolean, and null/undefined.

Arithmetic, assignment, comparison, and logical operators.

Combining operators to create expressions.

Conditional statements (if, else if, else) for decision making.

Loops (for, while) for repetitive tasks. - Switch statements for multiple conditional cases.

MEDIUM

Defining functions, including parameters and return values.

Function scope, closures, and their practical applications.

Creating and manipulating arrays.

Working with objects, properties, and methods.

Iterating through arrays and objects.Understanding the Document Object Model (DOM).

Selecting and modifying HTML elements with JavaScript.Handling events (click, submit, etc.) with event listeners.

Using try-catch blocks to handle exceptions.

Common error types and debugging techniques.

HARD

Callback functions and their limitations.

Dealing with asynchronous operations, such as AJAX requests.

Promises for handling asynchronous operations.

Async/await for cleaner asynchronous code.

Arrow functions for concise function syntax.

Template literals for flexible string interpolation.

Destructuring for unpacking values from arrays and objects.

Spread/rest operators.

Design Patterns.

Writing unit tests with testing frameworks.

Code optimization techniques.

That's it I guess!

[shehimin]

Edgaring time!

Tutorial on how to make your own responsive Edgar :D I will try to explain it in really basic terms, like you’ve never touched a puter (which if you’re making this… I’m sure you’ve touched plenty of computers amirite??? EL APLAUSO SEÑOOOREEES).

If you have some experience I tried to highlight the most important things so you won’t have to read everything, this is literally building a website but easier.

I will only show how to make him move like this:

Disclaimer: I’m a yapper.

Choosing an engine First of all you’ll need something that will allow you to display a responsive background, I used LivelyWallpaper since it’s free and open-source (we love open-source).

Choosing an IDE Next is having any IDE to make some silly code! (Unless you can rawdog code… Which would be honestly impressive and you need to slide in my DMs and we will make out) I use Visual Studio!!!

So now that we have those two things we just need to set up the structure we will use.

Project structure

We will now create our project, which I will call “Edgar”, we will include some things inside as follows:

Edgar

img (folder that will contain images) - thumbnail.png (I literally just have a png of his face :]) - [some svgs…]

face.js (script that will make him interactive)

index.html (script that structures his face!)

LivelyInfo,json (script that LivelyWallpaper uses to display your new wallpaper)

style.css (script we will use to paint him!)

All of those scripts are just literally like a “.txt” file but instead of “.txt” we use “.js”, “.html”, etc… You know? We just write stuff and tell the puter it’s in “.{language}”, nothing fancy.

index.html

Basically the way you build his silly little face! Here’s the code:

<!doctype html> <html>     <head>         <meta charset="utf-8">         <title>Face!</title>         <link rel = "stylesheet" type = "text/css" href = "style.css">     </head>     <body>         <div class="area">             <div class="face">                 <div class="eyes">                     <div class="eyeR"></div>                     <div class="eyeL"></div>                 </div>                 <div class="mouth"></div>             </div>         </div>         <script src="face.js"></script>     </body> </html>

Ok so now some of you will be thinking “Why would you use eyeR and eyeL? Just use eye!“ and you’d be right but I’m a dummy who couldn’t handle making two different instances of the same object and altering it… It’s scary but if you can do it, please please please teach me ;0;!!!

Area comes in handy to the caress function we will implement in the next module (script)! It encapsulates face.

Face just contains the elements inside, trust me it made sense but i can’t remember why…

Eyes contains each different eye, probably here because I wanted to reuse code and it did not work out and when I kept going I was too scared to restructure it.

EyeR/EyeL are the eyes! We will paint them in the “.css”.

Mouth, like the eyeR/eyeL, will be used in the “.css”.

face.js

Here I will only show how to make it so he feels you mouse on top of him! Too ashamed of how I coded the kisses… Believe me, it’s not pretty at all and so sooo repetitive…

// ######################### // ##      CONSTANTS      ## // ######################### const area = document.querySelector('.area'); const face = document.querySelector('.face'); const mouth = document.querySelector('.mouth'); const eyeL = document.querySelector('.eyeL'); const eyeR = document.querySelector('.eyeR'); // ######################### // ##     CARESS HIM      ## // ######################### // When the mouse enters the area the face will follow the mouse area.addEventListener('mousemove', (event) => {     const rect = area.getBoundingClientRect();     const x = event.clientX - rect.left;     const y = event.clientY - rect.top;     face.style.left = `${x}px`;     face.style.top = `${y}px`; }); // When the mouse leaves the area the face will return to the original position area.addEventListener('mouseout', () => {     face.style.left = '50%';     face.style.top = '50%'; });

God bless my past self for explaining it so well, but tbf it’s really simple,,

style.css

body {     padding: 0;     margin: 0;     background: #c9c368;     overflow: hidden; } .area {     width: 55vh;     height: 55vh;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%);     background: transparent;     display: flex; } .face {     width: 55vh;     height: 55vh;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%);     background: transparent;     display: flex;     justify-content: center;     align-items: center;     transition: 0.5s ease-out; } .mouth {     width: 75vh;     height: 70vh;     position: absolute;     bottom: 5vh;     background: transparent;     border-radius: 100%;     border: 1vh solid #000;     border-color: transparent transparent black transparent;     pointer-events: none;     animation: mouth-sad 3s 420s  forwards step-end; } .face:hover .mouth {     animation: mouth-happy 0.5s forwards; } .eyes {     position: relative;     bottom: 27%;     display: flex;   } .eyes .eyeR {     position: relative;     width: 13vh;     height: 13vh;     display: block;     background: black;     margin-right: 11vh;     border-radius: 50%;     transition: 1s ease } .face:hover .eyeR {     transform: translateY(10vh);      border-radius: 20px 100% 20px 100%; } .eyes .eyeL {     position: relative;     width: 13vh;     height: 13vh;     display: block;     background: black;     margin-left: 11vh;     border-radius: 50%;     transition: 1s ease; } .face:hover .eyeL {     transform: translateY(10vh);     border-radius: 100% 20px 100% 20px; } @keyframes mouth-happy {     0% {         background-color: transparent;         height: 70vh;         width: 75vh;     }     100% {         border-radius: 0 0 25% 25%;         transform: translateY(-10vh);     } } @keyframes mouth-sad {     12.5%{         height: 35vh;         width: 67vh;     }     25% {         height: 10vh;         width: 60vh;     }     37.5% {         width: 53vh;         border-radius: 0%;         border-bottom-color: black;     }     50% {         width: 60vh;         height: 10vh;         transform: translateY(11vh);         border-radius: 100%;         border-color: black transparent transparent transparent;     }     62.5% {         width: 64vh;         height: 20vh;         transform: translateY(21vh);     }     75% {         width: 69vh;         height: 40vh;         transform: translateY(41vh);     }     87.5% {         width: 75vh;         height: 70vh;         transform: translateY(71vh);     }     100% {         width: 77vh;         height: 90vh;         border-color: black transparent transparent transparent;         transform: translateY(91vh);     } }

I didn’t show it but this also makes it so if you don’t pay attention to him he will get sad (mouth-sad, tried to make it as accurate to the movie as possible, that’s why it’s choppy!)

The .hover is what makes him go like a creature when you hover over him, if you want to change it just… Change it! If you’d rather him always have the same expression, delete it!

Anyway, lots of easy stuff, lots of code that I didn’t reuse and I probably should’ve (the eyes!!! Can someone please tell me a way I can just… Mirror the other or something…? There must be a way!!!) So now this is when we do a thinking exercise in which you think about me as like someone who is kind of dumb and take some pity on me.

LivelyInfo.json

{   "AppVersion": "1.0.0.0",   "Title": "Edgar",   "Thumbnail": "img/thumbnail.png",   "Preview": "thumbnail.png",   "Desc": "It's me!.",   "Author": "Champagne?",   "License": "",   "Type": 1,   "FileName": "index.html" }

Easy stuff!!! 

Conclusion

This could've been a project on git but i'm not ready and we're already finished. I'm curious about how this will be seen on mobile and PC,,, i'm not one to post here.

Sorry if I rambled too much or if i didn't explain something good enough! If you have any doubts please don't hesitate to ask.

And if you add any functionality to my code or see improvements please please please tell me, or make your own post!

[mybeingthere]

A BOLI is an abstract figure kept in a shrine belonging to a secret Bamana men's association. It is believed to be the embodiment of the spiritual powers of the society. These powers underlie the ability of the association to maintain social control. Today, the Kono society has lost its influence in most Bamana communities due to the conversion of Bamana to Islam.

The basic form of this boli resembles a highly simplified cow. It is composed of a wooden core over-modeled with materials such as mud, eggs, chewed kola nuts, sacrificial blood, urine, honey, beer, vegetable fiber, and cow dung. The use of blood, excrement, and urine reflects the belief that these organic substances possess extremely potent spiritual powers.

Sotheby's catalogue note: "Catalogue Note

Upon first inspection this power object, known as a boli (plural boliw) impresses with its seemingly ‘elementary’ form, a shape achieved by the gradual accumulation of material around a wood core. In 1933 an image of a ‘boli du kono’ [the Kònò secret society, which was custodian of the boli] appeared in the Surrealist magazine Minotaure; it was described by the author and ethnographer Michel Leiris as "one of those bizarre shapes […] in the form of a pig, always in nougat brown." The form of the boli and its dense, cracked surface, suggestive of some primordial landscape, resonated with the Surrealist love of ‘fetishes’ and objects which were generally considered grotesque or bizarre, and the boli published in Minotaure soon became "the centre of an enthusiasm for Primitivism" (Colleyn, ‘ Images, signes, fétiches. À propos de l'art bamana (Mali)’, Cahiers d’études africaines, No. 195, 2009, p. 22).

If one engages with the boli beyond its seemingly ‘primitive’ appearance an object which possesses an immensely complicated cosmological significance is revealed. The boli is both a symbol of the universe and a receptacle for the forces that animate the universe, and it serves as an intermediary which permits communication with the ancestor or supernatural power whose force permeates it. As a repository of enormous spiritual power, or nyama, the boli would be viewed with a mixture of awe and fear. As the most essential instrument of communication between earthly mortals and the supernatural powers that control nyama, boliw were "an important part of the Bamana judicial structure, inanimate objects to which the Bamana community entrusts its decision making."

https://www.sothebys.com/.../literati.../lot.2919.html

[zoeythebee]

This is THE single largest milestone in my entire 7 year game programming career.

I don't think I've ever gone over my history with moving platforms before, but basically. Back in my sophomore year of highschool I had a programming class! I hadn't chosen to take it, but the class I wanted got cut so I got this instead. And I already knew how to program, and the teacher was chill so I was like "can I like just work on whatever?" and she said sure. The rest of the class was doing an online html+css class.

Anyway I was like "yo I have an entire class period to program! I am gonna make a game!" That game was the first version of ThreeEye, and it's scope was very small. My plan was some like 8 levels, and the only mechanics were movement, spikes, and moving platforms. Spikes were extremely easy.

But there are no words for the difficulties I faced trying to impliment moving platforms.

I spent... Every. Single. Class period.

For. A. Semester.

Trying get them working.

I tried making the game in Gamemaker and Godot.

In Gamemaker I had a strange issue with the player sorta hovering above the platform, instead of cleanly moving on top of it. And also sinking a pixel inside of the platform when moving up. I never fixed it.

I then tried Godot, and I continued to struggle.

Oh I struggled, I struggled and struggled and struggled.

And was it worth it? No.

I found the bug, and it was caused by my refusal to actually read documentation and instead follow tutorials. The tutorial I was reading had the arguments for a 'move_and_slide_with_snap` function out of order.

So I fixed the bug.

And immediately found another bug that was even more dramatic and hard to debug.

And I quit.

I quit game dev for 2 years, and never looked back. At that point almost all I had done was watch tutorials and ineffectively debug. And I was so hyper focused on fixing this ONE issue that I never grew. I burnt out and I declared that programming wasn't for me.

2 years later I discovered a video of someone making a game without a game engine, but in C. And I thought it looked fun. So I decided that I would try programming again, but I wouldn't focus on trying to FINISH something. I would program as a hobby, and try to enjoy the act itself.

And I got that spark back, and now, 2 and a half years later. I solved moving platforms with the following 2 lines of code.

And it's not these lines specifically, my skills as a programmer and EVERYTHING surrounding these two lines is what brought me here. My code structure was good enough, such that actually implementing the moving platforms took 5 minutes. I copy and pasted some code, cut some stuff out, and added the above lines.

I know I am technically a better programmer than when I first faced this challenge, but after having actually beat it. I feel like I have made it further than I ever had before.

Also that means this game is also further along in progress then anything else I've made before.

Yippie!

[xemo-wc-08x]

I really wish I can finish the website before the year ends because I'm so hyped to show you all qwq

I'm working very hard for it to look as 2000 and edgy as I can >:D

Though I have to say, before starting the website I had no idea about html, css or javascript, so there might be mistakes... Ue_e)

Luckily I have a "beta tester" TT w TT

I'm also trying to add details and some hidden stuff too. The page itself is supposed to be a gallery archive in case anything happens to this account or just to have a better organized gallery. But I've made it a little bit interactive to make it more fun~

I don't want to spoil much so I won't post much about it yet, but I try to work on it as soon as I can.

I'd say right now it's at least 50% completed. All the basic structure is done, I'm now adding complementary pages and then I'll go for the details and decoration.

[ursiday]

Hi! I’m absolutely in love with the look of your carrd and was wondering how you customized it :) I’m new to the site and how to use it and stuff

Thank you! If you're not familiar at all with the site and want a really introductory crash course this post explains the basics of building elements on a site better than I could

Honestly I have not done anything fancy I really just slapped some elements on there and played around with the appearance settings until I liked it, even the grid background is something you can add within carrd. This page is just a text element (the header), buttons element, and some containers broken into columns so I could add the text and images next to each other. the only slightly weird thing is the "about" title with the little icons is actually an embedded HTML element which is only available with the pro plan features and I used it to add the font awesome icons (font awesome my beloved). There are lots of settings for adding borders, drop shadows, etc to different elements and stuff. My gallery page is just a gallery element I added a bunch of pics to as well. I would like to try doing more interesting stuff with carrd at some point but if you're fine with the structural elements being relatively basic I think there's a good amount of aesthetic customization you can do that's built in

[kafus]

not sure who needs to hear this but the HTML/CSS required to make a run of the mill neocities site is more like learning a specific type of grammar/structure to organize information and less like coding. it only really becomes what feels like "coding" when you start adding scripting like javascript, which you really don't have to do. if the idea of "coding" sounds overwhelming but you like making spreadsheets, lists, graphs, or other ways of organizing information about the things you like (or even if you haven't done that before, if it sounds appealing at least), i highly recommend looking into basic HTML and CSS anyways and giving it a shot, because i think the process of writing HTML/CSS is much closer to that than scripting

[astraerystarr]

Fanfiction help, tips, prompts and ideas

I know how frustrating it is to come here looking for actual advice and the only things you find are inspirational posts that just repeat the same "you can do it" message over and over. So I compiled all the wonderful tips and advice I've seen so far. These posts here have saved me a million times already.

Dialogue Prompts

Dialogue Prompts, tips, ideas, everything ->

Angst, Fluff, Smut, Bittersweet:

https://heartofwritiing.tumblr.com/post/703589142626484224

dumplingsjinson's dialogue prompts (They're great and with so many different dynamics):

https://listography.com/dumplingsjinson?m=0580652416

Help with Sentence Structure

I know that feeling when you see your writing and notice how bleak and repetitive it is, these posts can help you <3

A few special rules for dialogue punctuation, paragraphing, and grammar

(Rules you can and should break after learning the basics. Play with those rules to find your style)

https://www.reddit.com/r/FanFiction/comments/15zni42/a_few_special_rules_for_dialogue_punctuation/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

How to make your writing more eloquent

https://pens-swords-stuff.tumblr.com/post/181631690061/how-can-i-make-my-writing-sound-more-eloquent-and

How to know if you're telling too much and what to do

https://www.tumblr.com/iselsis/655030320745332736/writing-tip?source=share

Sentence Structure (LOVE this, it's really useful if you're struggling with making more varied sentences)

https://how-to-fanfic.livejournal.com/4861.html

One Look Thesaurus

If you're having that horrible brain fog moment and can't remember that one word, this can help you!! This saved my hair from being ripped off a lot of times

Tips of all types: pacing/formatting, etc

Read this, it's worth it, I promise

Filter words, words that distance the reader from the writing:

https://www.tumblr.com/daily-writing-tips/174033348563/are-these-filter-words-weakening-your-story?source=share

When nothing is happening in your story or things are going too slow:

https://www.tumblr.com/daily-writing-tips/178617903283/ive-been-writing-a-book-and-the-feedback-ive?source=share

A great discussion about epithets:

https://www.tumblr.com/daily-writing-tips/639487272174141440/undertailsoulsex-cimness?source=share

Abandoning your outline or letting it grow:

https://www.tumblr.com/daily-writing-tips/186443325965/first-of-all-i-love-your-writing-so-much-and-i?source=share

Describing emotions internally and externally:

https://lets-get-fictional.tumblr.com/post/171248036936/resources-for-describing-emotion

General writing tips for structure, formatting etc:

https://www.tumblr.com/kindredcandy/691030138594426880/writing-tips-for-fanfic-writers-a-post-by-someone?source=share

Dialogue tags, sentence structure, adverbs, etc

(these tips are great for those writing their own books and for those writing fics too)

https://www.tumblr.com/dynamicsymmetry/178394340566/good-stuff-guys-i-edit-professionally-this-list?source=share

Tips on writing characters without faces:

Masterlists/Masterposts

agirlnamedjana's master dialogues/scenes/dynamics prompt list:

https://creativepromptsforwriting.tumblr.com/post/642950535717224448/master-prompt-list

And also her masterpost on how to write/motivation/tips:

https://creativepromptsforwriting.tumblr.com/post/633943514155253760/masterpost-how-to-write-a-story

+ Writing Resource masterlist:

https://lets-get-fictional.tumblr.com/post/146261106991/writing-resources-masterlist

Body Language

The Emotion Thesaurus (and all the other ones covering bad traits, settings and more)

Not everyone has the money to buy the book, so I'm going to link down here the place where you can buy it, but if you can't, just look up 'Emotion Thesaurus PDF download' on Google and you can download it for free. I recommend searching for it on VK, it comes with all the other Thesaurus(ses?) too. It's really helpful, especially the examples at the beginning and the notes after each section!

https://www.amazon.com.br/Emotion-Thesaurus-Writers-Character-Expression/dp/1475004958

Words to describe voices

https://www.tumblr.com/saraswritingtipps/731091220088127488/some-tips-for-using-a-few-words-to-describe?source=share

Writing descriptions (voice tone, facial expressions)

https://www.tumblr.com/thewatcher727/751571479667326976/writing-description-notes?source=share

How to show emotions instead of telling them

https://www.tumblr.com/creativepromptsforwriting/689038358087860224/how-to-show?source=share

Body language basics (smiles, eyebrows, head positions)

https://lets-get-fictional.tumblr.com/post/146030452463/writing-tip-june-6th

List of body language phrases (positions, reactions, movements like "he arched his back") divided by body parts:

https://lets-get-fictional.tumblr.com/post/153224282966/writing-tip-june-4th

Body Language sheet

Body Language Master List - Google Sheets

Said — use it, don't use it, alternatives and tips

These alternatives can also help you come up with new ideas for the feelings/reactions of your character ->

Words to replace "said" and some tips

Caitlin McDonald - Words to replace said, except this actually helps (tumblr.com)

Alternatives to "whisper" (except with actual useful tips under those alternatives)

the dextrous, the sinister. — Word List: Alternatives to "Whisper" (tumblr.com)

Words to use instead of “said” organized by emotion/intention part 1&2

https://www.tumblr.com/damselwrites/136952662989/words-to-use-instead-of-said-organized-by?source=share

https://www.tumblr.com/damselwrites/173814509709/words-to-use-instead-of-said-organized-by?source=share

When to include physical gestures, actions, and facial expressions & how often to say he/she said/yelled/whined, etc

https://tmblr.co/ZEsmmh2Ht2qO7

Fights and Battles

Vocabulary list for fight scenes with actions, reactions, effects and more:

https://www.tumblr.com/writers-potion/743977530213679104/vocabulary-list-for-fight-scenes?source=share

Words and phrases to describe characters in pain

https://www.tumblr.com/maccreadysbaby/721518428167536640/some-of-my-favorite-words-and-phrases-to-describe?source=share

Little Tips

Things that may be causing your writer's block and what to do

https://www.tumblr.com/burntoutdaydreamer/733191894679650304/things-that-may-be-causing-your-writers-block?source=share

Writing tips for authors with ADHD

https://www.reddit.com/r/FanFiction/comments/u3mzd0/writing_tips_for_authors_with_adhd/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

NSK96's Writing Help, divided by sections and covering all parts of writing:

https://www.tumblr.com/nsk96/703138245307924480/writing-help?source=share

Show Don't Tell. Or do a little telling too, it's alright

Writing better descriptions:

Showing what the character is feeling:

Consider checking more of Lyralit's posts, there are more like this one

Writing tips by Mod Joana: Don't like it — change it. The first words. Show don't tell:

https://lets-get-fictional.tumblr.com/post/175250059716/what-are-the-best-3-tips-for-writing-in-your

Writing relationships:

Writing Smut

https://www.tumblr.com/cillmequick/734816830305255424/maam-please-bestow-upon-me-your-amazing-smut?source=share

Writing a relationship your readers will ship

https://www.tumblr.com/daily-writing-tips/174033327753/writing-a-relationship-your-readers-will-ship?source=share

Advice for writing relationships (Big compilation with lots of tips and different types of relationships)

https://www.tumblr.com/creativepromptsforwriting/726838146095087616/advice-for-writing-relationships?source=share

Writing romantic love

https://www.tumblr.com/novlr/713058246667223040/how-to-write-romantic-love?source=share

I'll update when I find more! I hope this helps you <3

[izicodes]

Basics of HTML5: Let's build a webpage!

I'm a huge advocate for learning HTML5 as your first coding language (remember, it's not a programming language)! HTML5 is a great and easy coding language to get you into the feel of coding, especially for complete complete beginners!

I see a lot of people on Tumblr wanting to get into just creating their own websites but don't know how to start - coding is a new thing to them! So, I'm here to help with the language I know like it's the back of my hand!

And I am also an advocate of building projects in order to learn anything in coding/programming! Thus, what better way to learn the basics of HTML5 than to actually build a simple webpage? Let's get started~!

What is HTML5?

HTML, which stands for Hypertext Markup Language, is a special coding language that is used to create webpages. With HTML, you can tell a web browser, like Google Chrome or Safari, what to display on a webpage, such as text, images, and videos. And 'HTML5' is just the latest version of HTML!

HTML tags are special words or symbols that you use to create webpages. You use these tags to tell the web browser what content to display on a webpage, like headings, paragraphs, images, links, and more. Tags come in pairs (most of the time) so you'll have an opening tag and a closing tag. An example of the syntax:

The Simple Webpage

As I mentioned, we will be making a simple webpage for a person called David - see, he needs a portfolio webpage to start off with, and we're going to help me (as well as learning HTML5, of course).

Here is the code we will be using:

Pretty code, I know but also a bit confusing - let's get into understanding the code by grouping them into chunks! But just a heads up, the code includes these tags:

!DOCTYPE html (mmh it's more of a declaration really)

html, head, body

title

h1, h2, h3

p, a

li, ul, ol

These are some of the common tags used in all webpages on the internet! Okay, let's look at the code finally~!

The basic structure of every HTML page

Every HTML file looks like this - it has to have all of these tags!

The first line, !DOCTYPE html tag, tells the web browser which version of HTML is being used.

The code is contained within html tags, which enclose the entire webpage.

The head tags contain information about the webpage, such as the title and links to other resources.

The body tags contain the main and visible content of the webpage, such as text, images, and videos.

Together, this code provides the basic structure for an HTML webpage, with the head tags containing metadata and the body tags containing the actual content.

In the head tags

The title tags enclose the title of the webpage. In this example, the title is "My Programming Blog".

The title appears in the title bar of the web browser and is often used by search engines and social media sites to display the name of the webpage.

In the body tags - Headings and paragraphs

The h1 tags create a main and biggest heading, which in this case is "Welcome to My Programming Blog!" - you can only have one h1 tag on a webpage.

The h2 tags create subheadings, which in this case include "Latest Post", "About Me", and "My Projects" - you can have multiple h2 to h6 tags on a page.

The h3 tags create a sub-subheading under h2 tags, which in this case is "How I Improved My Coding Skills".

The p tags create paragraphs of text that provide more detail about the blog's content and purpose, including a summary of the latest blog post and information about the author and their projects.

In the body tags - lists and links

To start any list, you need to either start with ul tags or ol (ordered (numbered)) tags

The ul tags create an unordered list of items.

The li tags create list items within the unordered list.

Each list item includes a hyperlink created using the 'a' tags, with the text of the link being the name of a programming project.

The href attribute within each 'a' tag specifies the URL where the project code can be found on GitHub.

Attributes go inside the opening tags' arrows '<' and '>'.

The End Result

Boom - she's gorgeous, I know! A basic, simple webpage! We did it! You can see the page live + the code used here: [LINK]. Play around with the code, change things, experiment, break things, fix them - do what you need to learn further!

And that includes some online resources to help!

LINK 1 | LINK 2 | LINK 3

And some resources/posts I have shared about HTML

LINK 1 | LINK 2 | LINK 3

What next?

Learn CSS3! The page looks basic and looks like what pages were like when the internet was invented! You need colour, fancy fonts and layouts! CSS helps with that, as it is a styling sheet! Be sure to do some research but I also share resources on my blog under my #resources tag!

Thank you for reading and best of luck learning coding/programming! Remember, this isn't the only way to get into coding! People even recommend languages like Python to be beginners' first language, but I say that HTML5 should be the first coding language and then Python is your first programming language - don't know the difference? I made a post about it here!!

But definitely for people going into Web Development, HTML5 all the way! I don't think you can avoid learning HTML5 with Web Development (not 100% sure though...)!

Anyhoo, have a nice day/night! 👋🏾💻💕

[codingquill]

Day 1 - 100 Days CSS Challenge

Welcome to day 1 of the 100 Days CSS Challenge! In this challenge, we'll bring a design to life using only CSS. Our goal is to recreate the image we're provided with on the challenge page using HTML and CSS.

On the challenge page, we see:

A small preview of the design we need to replicate.

A starter HTML template.

A submission form to showcase our work alongside others who have taken on the same challenge.

Let's dive into the process step by step.

Step 1: Screenshot the Image

The first thing I always do is take a screenshot of the target design. Even if the design includes animation, having a static reference helps me focus on the basic structure and colors. Here’s the screenshot of the design we’re aiming for:

Step 2: Extract the Color Palette

Next, I identify the color palette that we'll need. This helps ensure that we maintain consistency with the original design. Here’s the color palette I’ve created:

Step 3: Identify and Create the Image Elements in HTML

Now that we know the colors, I break down the elements in the image:

Background: This is a linear gradient.

The 100 number: This is the main challenge, and it will require some work.

Text: “days css challenge,” which we’ll place to the left of the number.

Here’s the HTML structure for these elements:

<div class="frame"> <div class="center"> <div class="number"> <div class="one-one"></div> <div class="one-two"></div> <div class="zero-one"></div> <div class="zero-two"></div> </div> <p class="sentence1">days</p> <p class="sentence2">css challenge</p> </div> </div>

Now that the elements are in place, CSS will bring them to life.

Step 4: Bringing the Elements to Life with CSS

Linear Gradient

To create the background, we’ll use a linear gradient. Here’s a basic syntax:

background: linear-gradient(to <direction>, <color-stop1>, <color-stop2>, ...);

Parameter 1: Direction/Angle

This defines the starting point of the gradient. You can either specify a direction (e.g., to top, to bottom) or an angle (e.g., 90deg, 180deg).

Direction options:

to top

to bottom

to left

to right

If you want more precision, you can specify angles:

0deg: Gradient starts from the top.

90deg: From the right.

180deg: From the bottom.

270deg: From the left.

You can also combine two directions, specifying both horizontal and vertical movements, like to left top or to right bottom. This means:

The first keyword (left or right) controls the horizontal movement.

The second keyword (top or bottom) controls the vertical movement.

For example:

background: linear-gradient(to left top, red, blue);

This gradient starts at the bottom-right corner and transitions toward the top-left.

Parameter 2: Color Stops

Color stops define how the gradient transitions between colors. Each color stop specifies a point where a color starts or ends. Here's an example:

background: linear-gradient(to right, red 10%, blue 90%);

This means:

The element starts at 0% fully red.

By 10%, the transition from red begins.

Between 10% and 90%, there is a smooth blend from red to blue.

At 90%, the transition to blue is complete, and the remaining part is fully blue.

Once we understand the concept, we can apply the background we need. In our case, the gradient flows from the bottom left to the top right, so the code will look like this:

background: linear-gradient(to right top, #443DA1, #4EC3C9);

Bonus: Stacking Multiple Linear Gradients

You can also apply multiple gradients on top of each other:

background: linear-gradient(180deg, #f00, #0f0), linear-gradient(90deg, #ff0, #f0f);

Step 5: Making the "100" Number

Creating the Zeros

We start with the zeros. These are simply circles created using CSS. To make a full circle, we use border-radius set to 50%.

The white border gives it the appearance of the number zero.

.zero-one, .zero-two { position: absolute; height: 100px; width: 100px; border-radius: 50%; border: 24px solid #fff; box-shadow: 0 0 13px 0 rgba(0,0,0,0.2); }

This gives us a nice circular zero. We adjust their positions using properties like left and top, and manage the z-index to make sure the zeros stack correctly.

.zero-one { z-index: 8; left: 17px; } .zero-two { z-index: 6; left: 100px; }

Now both zeros are positioned, and they overlap in the way we want.

Creating the "1" Number

The number "1" is made of two div elements:

One-One: This part represents the slanted part of the "1".

One-Two: This is the straight vertical part of the "1".

What make the one-one element slightly slanted is

transform: rotate(50deg);)

the one-two is created simply with a little height and width nothing too particular then it is placed directly on top of the slanted part, giving us the full "1". Its z-index tho has to have a higher value than the slanted part of our 1 to ensure it stays above the slanted one.

Step 6: Adding the Text

For the two sentences “days” and “css challenge,” the styling is basic CSS. You can achieve the look with just a few font changes, some padding, and adjustments to font size. It’s as simple as:

.sentence1,.sentence2{ text-transform: uppercase; margin:0; padding:0; } .sentence1{ font-size:82px; font-weight:700; } .sentence2{ font-size:25px; font-weight:700; margin-top:-20px; }

And just like that, we’ve completed day 1 of the 100 Days CSS Challenge! Each part of the design is carefully crafted using CSS, giving us the final result.

Happy coding, and see you tomorrow for Day 2!

[webtutorsblog]

HTML is an abbreviation for HyperText Markup Language. It is used to create web pages with the help of a markup language. Are you looking to learn HTML? Look no further! At WebTutor.dev, we offer comprehensive HTML tutorials and resources to help you become proficient in HTML, whether you're a beginner or an experienced developer. Our website is designed to provide you with an immersive and engaging learning experience, covering all aspects of HTML, from the basics to advanced concepts.

[cadmusfly]

Analysing the Quality of Napoleon's Marshals With Silly Data Science

Let's talk numbers and laugh at funny graphs with missing data!

Other people in this fandom do really lovely detailed information posts, I do weird fanfic, dragon shitposting, body pillow design shitposting and run a stupid Lannes ask rp blog. But! I'm also a programmer with an interest in Numbers, and today we're going to Analyse These Dead Frenchmen with a bunch of screenshots of graphs.

Ethan Arsht published a really interesting article called Napoleon was the Best General Ever, and the Math Proves it., where using data scraped off Wikipedia articles, he creates a statistical model drawing from multiple variables per battle to calculate How Good A General Is At Winning.

Give the article a read, it's great stuff, but if you don't feel like it, he basically applies WAR - "Wins Above Replacement" - which is a value from baseball that measures how many wins a player is worth when compared to a replacement.

So the general's WAR would be how well they compare to a completely average general who replaced them. Yes, as Arsht says, "in other words, I would find the generals’ WAR, in war."

But as he says, this is not a stringent historical analysis and is more of a fun thought experiment. Wikipedia is probably the most comprehensive dataset on this topic that he had access to, but it is Wikipedia the crowdsourced online encyclopedia, so it is going to have holes and inaccuracies. And this was written seven years ago, and the data was collected then, so any updates to these articles since then wouldn't be reflected.

And it's not a perfect model that takes into account everything - it's an approximation, a whole bunch of number crunching. I haven't looked too deeply into how the numbers work exactly, even though I could.

I think that 0 would be "completely and utterly average"? A positive WAR is good, a negative WAR is not. Napoleon is the best general ever at 16.679 WAR, the next highest is Caesar at 7.445 WAR.

(Link, you can hover over each battle and look at each datapoint!)

But I'm interested in Napoleon's marshals. The 26 men he raised up to military nobility! The dramatic assholes who kept arguing with each other. I'll post links for all of them at the end of this, but I won't be screenshotting each of their WAR graphs, just a few.

I'm not entirely sure how the scraper collected the information about what battles a commander is considered in "charge" of - I tried looking at the provided code repository but I am reminded that data science people bless them are not really good at structuring or publishing code and why are all the html pages just straight up saved in the root folder why are the jupyter notebook outputs just uncleared aaaaaaaaaaaaaaa

Oh yeah this was scraped from seven years ago so current wikipedia pages won't be reflective of what's on the graphs - so we can assume that this is just grabbing stuff from the "Commanders and leaders" part from each individual battle page and collating them into numbers

Anyway let's look at the iron man himself, Davout, considered to be the best of Napoleon's marshals.

(Link)

Heh, here we see the first hole in the dataset - Jena-Auerstedt is considered to be one battle, and Napoleon would like you to think that's the case.

Anyway, pretty good! Let's look at Jean Lannes, the lively Gascon

(Link)

Oooooh, even better than Davout! Helps he didn't go to Russia. Wait, why is Aspern-Essling dated to before Ratisbon, especially when Lannes died in the former?

Let's look at André Masséna, also known as being pretty cool:

(Link)

Damn, neat, though I think there's a lot of omissions here.

Here's Murat:

(Link)

Lol Tolentino, I do like how Murat Peaked there a little bit

But we're forgetting a certain redhead, aren't we?

(Link)

Ouch. But also Waterloo not appearing there, hmmm.

Anyway let's finish off the screenshots with Napoleon's greatest strategist, Jean-de-Dieu Soult, the man that Wellington called a master of the defensive!

(Link)

honestly this is the entire reason why i wanted to write this post

in soult's defense - as a soult defender - he had a pretty shitty army full of conscripts, was isolated, was occasionally pretty bad at adapting tactically to new surprises and had to deal with the english being stubborn fuckers, but he was brilliant in setting things up strategically and forcing the english to catch up through a fighting retreat with a demoralised army, stopping them from closing in on france too

but also the way this graph bullies soult so hard makes me laugh a lot

Anyway, yeah, these graphs are definitely inaccurate and I'm also posting these to see the Napoleonic community on tumblr's reaction to them, but they are a fun way to engage with history!

Just don't take them seriously, and feel free to argue in the tags/comments/reblogs

I could theoretically use this guy's code to rerun this just for the Marshals now - I know my way around some data science code - but I do have a lot on my plate, but it would be a fun experiment!

Marshal WAR Graph Links

Note: So these are under the Wikipedia article names at the time that the web scraper was run seven years ago so some of these names turned out to be different from what they are now and I had to do a bit of digging to fix some

you can definitely tell that the information is incomplete on a lot of these, again i repeat the information was scraped off wikipedia seven years ago

Louis-Nicolas Davout

Jean Lannes

Joachim Murat

Michel Ney

André Masséna

Jean-de-Dieu Soult

Bon-Adrien Jeannot de Moncey (one battle lol)

Jean-Baptiste Jourdan

Charles-Pierre Augereau

Jean-Baptiste Bernadotte aka Charles XIV John of Sweden (Two battles and only Swedish ones I think)

Guillaume Brune

Édouard Mortier (two battles)

Jean-Baptiste Bessières (two battles)

François Christophe de Kellermann (one battle, Valmy)

François Joseph Lefebvre (two battles)

Charles-Victor Perrin (ouch)

Étienne Macdonald

Nicolas Oudinot (lol)

Auguste de Marmont (loll)

Laurent de Gouvion Saint-Cyr

Józef Poniatowski (three battles but hmm. pretty bad but feel like there's too much missing info here)

Emmanuel de Grouchy (two battles, can't make a Where's Grouchy joke)

Marshals Without Graphs Not because they didn't command anything but I couldn't find their graphs on the website or in the code repo

Catherine-Dominique de Pérignon

Jean-Mathieu-Philibert Sérurier

Louis-Gabriel Suchet (wtf? maybe seven years ago the documentation on him was sad)

EDIT: wait i was looking at the notebook (the uh place where the code was being run, to see if i could run the code myself)

soult is one of the lowest ranked generals overall on this initial list pfftHAHAHhahahahahahahaha

[crazysodomite]

I got some coding done on my website today. This is actually the second time I'm remaking it from scratch but this time I'm determined.

Im done with the plain html and the basic css structure now im gonna think about how to make it look good.....