#html tables tutorial

[divinector]

Animated Responsive Pricing Table Design

[codenewbies]

Responsive Price Plan Design

[bedicoder]

🃏Simple Pricing Card Table in HTML & CSS

[purposecode]

HTML tables. How to make a table in HTML?

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

[phrandallanton]

Hellu))

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

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

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

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

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

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

Some other extra tips I'll throw in here:

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

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

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

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

[manonamora-if]

How do you do the planning to create an interactive fiction game? I have the general idea for an interactive fiction story but I'm a complete mess when it comes to organizing and planning. Where do I even start?

Hi Anon!

I was waiting for this question to appear at some point, lol :P I spent all day on this....

Create your Interactive Fiction Game

Last February, I detailed my process when working on CRWL. You can read that post here. It is not a perfect (or even good) template to use, since it is specific to that project in particular. I also have a list of programs I am using/have used when creating my projects here!

But, yes, organisation and planning is VERY important when you want to tell a story, no matter if it is in a game or novel. But unlike a novel-like story, you need to add coding on top of it. I would say these are the two big components of IF.

Disclaimer: I am not the Voice of Knowledge when it comes to creating IF, takes this information with a grain of salt and do some research too! :)

Long post, so breaking the post. Here's a Table of Content

1- Gameplay/Visual (aka Choosing your Coding Program) 2- Planning your Story (or Why it is better to start small at first) ~ ~ A- Game Pattern ~ ~ B- From Pattern to Outline ~ ~ C- From Outline to Writing ~ ~ D- Writing Tips 3- Coding the whole thing ~ ~ A- You are stuck ~ ~ B- Test everything ~ ~ C- UI Customisation 4- Publishing and Marketing ~ ~ A- Publishing your game ~ ~ B- Regarding marketing ~ ~ C- Scheduling Updates and expectations

1- Gameplay/Visual (aka Choosing your Coding Program)

Though the story is very important (obviously), it is important to know what kind of gameplay and visual you want for your game because it will dictate what kind of program you should use:

Do you want to make a Visual Novel? Then you might want to look into programs like Ren'Py.

Are you gravitating towards parsers (player entering words/sentences to advance the story)? Inform might be what you need.

Do you just want to give players choices? Twine formats and ChoiceScript seem to be the most popular ones on Tumblr.

Note: There are waaaayyyy more programs that those four, and you may be able push the possibility of what a program can/is supposed to do with enough coding knowledge.

Even in each category, some programs will be more complicated to learn than others. For the Choice-base games for example, ChoiceScript is considered one of the easiest to code in terms of logic and formatting of code. In the same vein, the availability of tutorials/community* to help will make a huge difference in learning the program. And finally, some programs may require some knowledge of other languages (ex: HTML/CSS) for further use/customisation.

Note: While most may be in English, there may be even tutorials/communities in your language! (if you are ESL)

And finally, you may want to think about the visual aspect. Some programs/formats will allow you more customisation than other, whether it be text formatting to complete customisation of the base UI (how the page looks). For example, in Twine (SugarCube/Snowman especially) , you are only limited by your knowledge of HTML, CSS and JavaScript.

P.S.: Some programs, like ChoiceScript, are not open-source.

A good way to know what kind of program you want to use is to look at tutorials online and test it yourself too.

2- Planning your Story (or Why it is better to Start small at first)

Now that you've settled on a coding program, it is time to work on a story.

If it is your first time, the best advice I can give you is to start with a small and contained stories. The learning curve can be daunting when starting, more so if the project is complicate and long. Starting short and easy won't feel too overwhelming, you will learn what works best (or doesn't work) for your creating process AND it makes it easier to learn coding in your chosen program. Starting with a full-blown RPG with extensive Combat Mechanics and hundreds of long-ass quests is not a good idea if you've just begun with the program.

You can even take advantage of Jams to test your skills/ideas or request feedback on IF Discords Communities or in the IF Forum.

But whether your story is large or small, the planning part should be very similar.

A- Game Pattern

So you have an idea for your IF, great! Now let's think about patterns, or how will the story be told. Do you have a linear story in mind leading to one important finally choice? or do you want a lot of branching with many endings? Or even a lot of choices culminating in one final event?

Knowing about pattern will help you plan the story and define important events to happen. It will also make you think of variations to take into account and what kind of action you'd need to reach a certain part of the story. Obviously, you don't have to stick to one pattern (as you work more on the story), but it helps.

I really like this blog post detailing the different patterns of CYOA games. [I used it when creating MtP]

B- From Pattern to Outline

With that general idea of how the story should pan out, we can start fleshing it out a bit more. I often use the "Funnel Technique" when I create my stories (big picture to small details), but it may work more for linear stories rather than very branching ones. It goes something like this:

Start with your general idea: genre, theme, world, time period, etc... But stay general. You don't need to go into too much details at first.

List your big events and make a timeline: what is the conflict to push the story forward? why does it happen? what does character should learn from it? what can they do to resolve it? etc...

Do the same with other smaller plots (if you have them!): every plot needs a reason for it to happen.

Combine the timelines: not only some beats will need to happen before others (especially if they are the catalyst of the next one), this will help you to know when to introduce a certain character/lore/etc...

Delimit your chapters: with your timeline, you can now break it off into smaller chapters (you can include what important action/information each chapter should have).

And here is your outline!

During this process, it is a good idea to keep note of everything you can think of: characters background/personality, important lore of your world, etc...

It is also then where you may want to think of aspects to track (relationship, choices, etc...) and give it a name.

While you don't have to research things at this stage, it may help you if you are working with a topic/setting you are not familiar with.

C- From Outline to Writing

Now that you have your outline and your timeline, you are closer to writing :D You could decide to write away, or you could plan your chapter a bit further.

I usually do the later, as it helps me think of possible places to include choices or variation for the player. [This is also where the graph comes into place] I even go a bit further and plan each passage (text screen), making notes of what the player will see (dialog, action, description...) and if there is variation to include. This last part is very much detailing work, and helps me with writing.

After all this, it's time to write!

D- Writing Tips

Here are some stuff that I do to help me not get overwhelmed when I write and help me to be organised when I code:

The "one page per screen" technique, where you add breaks between each screen/passage, can be helpful to demarcate each part of the chapter/scene you are writing. Headers or links with a table of content can also be helpful !

While it matters little at the beginning, tracking choices and consequences of those choices and important variables will help with continuity and variation. For example, if you give the player the choice to set their height, you should take this into account if the MC goes into tight spaces. Similarly, if the player chooses to confront someone, the next page should probably not have a romantic tone.

Use colour code, comments or formatting when writing to separate choices (link list or cycling options, etc...) or variation for a tracked variable (ex: tone of voice, physical change, etc...) from the rest of the text. This will help when coding.

While writing, if you get ideas to include further into the story (ex: new choice, mechanic, sub plot, etc...), write it down on a separate page and only come back to it when you are do writing the part/passage/scene/chapter. A sudden idea might seem fitting but may push you towards a dead-end.

Edit Edit Edit! 1st drafts are awesome, but it can always be improved [Cough cough, not calling myself out at all, Cough cough]. Using Grammar Checks is immensely helpful (more than one, since none will focus on the same aspect of writing). And Beta/Sensitivity readers are godsent!

3- Coding the whole thing

When your story is ready (or part of it you are ready to release), you will need to code it.

The best advice I have for this is to code your story first and make sure it works. It can be tempting to deep dive into the formatting of the page (especially if the program you chose enables you to customise it extensively). An IF can look amazing, but if it breaks everywhere, it is not going to be fun to play.

A- You are stuck

And don't worry, it happens to every one! Coding can be a difficult puzzle to solve, even with the solution right under your nose.

The most important advice I can give is to always refer to the official documentation or look for tutorials online (other may have come across the same issue before you).

If nothing helps, there are often coding communities (that focuses on the format/program you are using) where you can ask for help (Discord/Forum, etc...). Do not be afraid to ask for help!

B- Test Everything

And when you are done, test again. Testing/Playing (whether by yourself or with Beta Readers) is the only way to catch errors.

Similarly, if you want to add some custom code to your project or use a built-in functionality, but don't know if it works, the best way to find out it to try it out! Read the documentation, play with the code and test it.

C- UI Customisation

This part will be highly dependent on which program/format you are using. While CSS/HTML is the same anywhere, it's implementation can differ greatly. Be sure to check the official documentation about the matter.

If the program allows you for customisation, this can be loads to fun to edit your UI to make it look however you want. Like the previous point, this can need a lot of testing too.

If you are just starting, having the basic UI is just fine :) You can always change it down the road. But if you want to zhuzh it up, here are some elements you can consider when editing:

Colour palette fitting your story. Steer away from bright colours if your story is dark, and vice versa.

Image in the background can make text hard to read. Having a block of colour between the text and the image will make reading much easier.

Colour contrast is IMPORTANT. Readability is easy to mess with when having multiple colours, use this website.

Simple is usually better. A complicated or busy page will be distracting. Stick to simple.

Use a template. This is more of a SugarCube comment, but if a template is available (and you like the vibe), use it. It will make editing your UI easier (tag or link to the creator in your game page/post).

If you can: remember to make your project as accessible as you can (with your knowledge). Colour contrast (maybe dark/light mode), Font change (font, size, etc...), limit or toggle animated text/images, etc...

4- Publishing and Marketing

A- Publishing your game

There are many places on the internet where you can publish your IF projects. Different formats will congregate towards different websites. For example: Dashingdon hosts only ChoiceScript, Itch has anything and everything, Steam will require a fee to publish there. You can also host your projects on other platforms or your personal website (ex: Neocities allows it), though you might want to stick to places where there is an established readership. In any case, follow the selected website's instructions for publication.

If you have a working and published demo (or finished game), I'm nudging you to create a page for it on the IFDB. There, people can leave long reviews and rate your games! You can also Archive your project to preserve it. [SAY NO TO LOST HISTORY]

B - Regarding marketing,

If you are lucky, the algorithm god will pick up your game and show it to everyone. You'll get thousands of readers and hundreds of ratings. You'll always be on everyone's top page and you will go viral.

But if you are not (like most of us), you can start building a readership on social media. Tumblr had a substantial community for IF, Twitter has quite a lot of game developer, Mastodon is a thing I think?, and there are a handful of Discords and Forums dedicated to Interactive Fiction. Having a presence and be reachable is unfortunately important.

Some random points:

Announce your project before you publish it, but be close to be ready to put it online when you do so!

Do not "sell" your project on something you are not sure you can achieve (ex: game mechanic, complicated romance, etc...), just to set expectation.

Have an introductory post with a synopsis and links to the game/demo (if available) and important known aspects (genre/theme/TW). Depending on the genre, you may want to include short intro of some characters.

Make pretty pictures for your posts/game page (Canva is free-ish)

For ChoiceScript: having a CoG Forum page seem to be important for reader interaction and getting feedback.

On Tumblr: submit your project to directories like @interact-if, follow and interact with other IF authors, answer asks, do Tumblr stuff...

On Itch, consider introducing your published project in the Community section, write devlog for updates or discussion, answer comments, review other IF games...

Discord: some IF/Coding discord allows you to promote your projects there, take advantage of that.

Be upfront about your boundaries and keep them! (less marketing, more of a social media interaction thing)

C- Scheduling Updates and expectations

Unfortunately (and I say this as someone who is really bad at it), having a regular update schedule may be the best thing you can have for your project, especially if it is a long WIP. This can help keep your readers engaged with your content. If you have longer breaks between updates, writing prompts can be a nice substitute.

If regular is not possible (which is totes super fine! don't burnout on something fun), have clear communication about the state of the project. Set specific upload dates (ex: 12-Oct-22) when you are close to release it, have vague ones (ex: end of the year) when you are in the early stages. This will help with expectations and disappointment.

Do not promise more than you can do. That's pretty self-explanatory. And fix bugs you receive as soon as you can.

AND! And I can't stress this enough. IRL should always come before updating your WIP/publishing content. You should never force/push yourself to do so if you are not enjoying it. Do not be like me and hurt yourself. No amount of notes/readers is worth the hurt!

TLDR: Do not be like me, be better.

Right. I think that's it.

[gordonramsei]

˚. ⋆ ̥ 𖤐  GLASS  TABLE  GIRLS  :  a  tumblr  theme  .

SURPRISE  !  as  a  token  of  my  love  for  ur  support  ,  this  theme  is  available  to  both  the  coding  &  theme  tier  !  enjoy  ! 

╲ ˚. ⋆  𓊌  ABOUT  .

a  multi  -  muse  indie  blog  w/  a  muse  page  !

please  like  and  reblog  this  theme  if  u  intend  on  using  or  wish  to  support  my  work  .

╲ ˚. ⋆  𓊌  THEME  SPECS  .

extremely  customizable  !

optional  post  toggle  (  click  to  view  posts  )  .

optional  post  opacity  .

optional  difference  filtering  on  title  and  sidebar  .

optional  background  image  for  large  container  .

different  description  style  for  post  toggle  and  no  post  toggle  .

navigation  tab  with  6  custom  links  .

muse  tab  that's  easily  accessible  through  the  html  +  styling  tutorial  and  guide  .

optional  alert  boxes  for  nav  and  muse  tab  .

animated  pinned  post  icon  and  inbox  notif  .

full  list  of  credits  ,  design  inspo  ,  and  fonts  listed  within  the  code  .

𓊌  𓊌  ˚. ⋆  click  the  source  to  be  directed  to  a  live  preview  .  click  here  to  be  directed  to  the  code  on  patreon  . 

*  this  theme  is  a  patreon  exclusive  .

EDIT  :  the  theme  has  been  updated  with  a  better  functioning  script  for  the  post  visibility  button !  

[enigmalea]

Why I Contributed to FujoGuide

If you follow me here or mastodon you may have noticed that I've been reblogging/boosting a lot of posts for something called The Fujoshi Guide to Web Development (@fujowebdev). There's a good chance you followed me or know me from the Dragon Age fandom where I run communities, events, and zines and write fanfic, and you might be wondering why the sudden and drastic departure from my normal content. Why would a writer contribute to something related to webdev? Why have you stopped seeing thirst for Dragon Age characters and started seeing… whatever a FujoGuide is?

The answers to those questions (and more!) are below the cut.

My Coding Journey

I wrote my first lines of code in 1996 (yes, I'm old AF). It was the early days of the internet and tutorials for how to make your own websites were literally everywhere. You couldn't go more than two clicks without finding a how-to written in plain language. But it was painstaking and tedious. CSS didn't exist yet (literally, I started coding about six months before it was released) and even when it appeared it wasn't widely adopted or supported.

It was the "glory days" of Geocities, Myspace themes, Neopets, and Livejournal. If there was a cool site, you could use HTML and/or CSS to customize it. I honed my skills by coding so many tables character profiles for RPs, creating themes, painstakingly laying out user info pages, and building my own site.

Gradually, things changed. Web 2.0 showed up with locked down profiles and feeds you couldn't customize, free website hosts became more difficult to find, and point and click page builders became the way of the web. Shortly after, I took a long break from fandom; frustrated and disappointed with site closures, lost communities, and general fandom wank… it felt like it just wasn't worth it anymore.

I eventually came back, and when I did it meant customizing themes, figuring out how to create tools for my communities, coding tumblr pages (and learning they're not really supported on mobile), and looking at automations for my common tasks. One day, I woke up and thought, "I'm going to make a Discord bot… it can't be that hard."

So, I did it.

An Unexpected Friendship

About a month after I launched my bot to the public, I received a random Discord message from @essential-randomness. A friend had told her about my bot, and she was working on BobaBoard which needed volunteers. I was shocked. First, people were talking about my bot. Second, I wasn't a real coder. I didn't know anything! I just googled a bunch of stuff and got something working. I had no idea what I was doing.

She assured me it was okay. She was willing to teach me what I didn't know - and most of all, that she wanted my help. I took a day or two to think it over, and fatefully filled out the volunteer form. I didn't know if I could be useful or how I could be useful, but I wanted to try.

Programming Is Awful

In the years months that followed, I spent a lot of time in @essential-randomness' DMs complaining about programming… at least once I realized she wouldn't judge me. I was still very much doing things the hard way, taking hours to update a site to add a single link on all the pages. I knew there were easier methods, but I either couldn't find them or once I found them, they were filled with dense jargon which was terrifying.

"An all-in-one zero-javascript frontend architecture framework!" Is that even English? "A headless open-source CMS." Cool. Sounds good. "A full-stack SSG based on Jamstack extending React and integrating Rust-based JS." Those sure are words. With meanings. That someone knows. Not me, though.

I spent so much time looking at what sites claimed was documentation and losing my mind because I had no idea where to even start most of the time. With @essential-randomness' encouragement, I kept at it, experimenting with new things, and jumping in headfirst even when I had no idea what I was doing. And I was so glad. Where I used to struggle keeping one website updated, last year I managed to deploy and update 7 websites. Yeah, you read that right. It was amazing.

The new stuff made it all much, much easier.

An Idea Is Born

Meanwhile, we spent hours discussing why it was difficult to get fandom to try coding. Part of the barrier was the belief you must be some sort of genius or know math or that creative/humanities people can't do it. It is also partially coding communities being unfriendly to newbies and hobbyists; a culture which often thrives on debasing people's choices, deriding them for not understanding, and shouting rtfm (read the fucking manual) and lmgtfy (let me google that for you)- all of which are unhelpful at best and humiliating and abusive at worst. The tech dudebro culture can be unforgiving and mean.

The number of coding-based Discords I've left far outnumbers the ones I've stayed in.

We determined what fandom needed was a place for coders of all skill levels to come together to help and support one another; where they could learn to code and how to join open-source projects they love, and where they could make friends and connections and show off their projects whether they were new or experienced programmers.

And thus… Fandom Coders was born.

What About FujoGuide?

Of course, running a coding group and working on BobaBoard together means we spent a lot of time talking about the state of the web. We both lamented over poor documentation, jargon-rich tutorials, and guides which assume a baseline of knowledge most people don't have. What we needed to do was provide tutorials which start at the beginning… from the ground up (what is a terminal and how do I open it?) without skipping steps. What we needed to do was make those tutorials fun and appealing.

I don't remember exactly the journey it took to get us here if I'm honest. I have no clue who said it first. But I do remember I first started thinking about anthropomorphizing programming languages when we attempted to cast the languages as the Ouran High School boys… and again when I suggested we do a [TOP SECRET IN CASE WE DO IT] group project in Fandom Coders to help people learn about programming.

What I do know is that as last year ended, @essential-randomness became laser-focused on creating our gijinka and moving forward with FujoGuide… and I couldn't say no.

Okay, But… Why Contribute?

To be honest, it's not just that I was around for the birth of the idea. It's ALL of the things in this post - the culmination of three years of frustration trying to figure out what I'm doing with coding, of wading through dense documentation, of wanting to give up before I even start. It's three years of dipping my toes into toxic techbro culture before running away. All added to decades of watching the web become corporate-sanitized, frustratingly difficult to customize, increasingly less fun, and overtly hostile to fans who dare enjoy sexual content.

To sum all of this up, it's the firm belief that we desperately need a resource like this. Something that's for us, by us. Something that builds fans up, instead of tears them down; that empowers them to create for themselves and their communities what no one is creating for them. It is a project I'm deeply passionate about.

And I can't wait until we can bring it to life for you all.

[divinector]

Animated Pricing Plan

[rossresources]

Eu sofro procurando aprender BBCode. Você pode me dizer como conseguiu aprender todos os códigos secretos? Eu não encontro em lugar nenhum.

Olá! BBCode usa os mesmos códigos CSS que os templates normais para personalizar, mas em vez das tags normais de HTML, usa tabelas de BBCode ( [table] para a tabela, [tr] para as linhas, e [td] para as colunas). Então, a estrutura é toda feita com tabelas, por isso é preciso saber como funcionam também as tabelas (se precisar de aprender aconselho a ver um tutorial, tipo esse: https://www.homehost.com.br/blog/criar-sites/tabela-html/).

Para fazer os códigos bonitos, esses BBCodes podem ser personalizados com CSS, por exemplo, se quiser criar uma tabela com largura de 500px ficaria [table style="width: 500px;"]

Espero ter ajudado!

[purposecode]

CSS margin and padding: What are they and how do we use them?

If you’re new to CSS or have used it for a little while you might have heard the words margin and padding but aren’t quite sure what they mean, or how to use them in your website.

Both properties are used to provide extra space or a gap. But what is the difference between them if they both provide space?

This tutorial will explain how these elements are used and how do they help in your website design.

1)- Margin property

margin is a CSS property that adds space between the elements.

If you have many elements on your website, and would like to add some space between them and position them differently, you use margin property to do that.

Let’s see some examples:

a)- margin-top

Let’s say that we have 2 <div></div> elements with the same width and the same height, one has a background-color of blue and the other a background-color of red.

So in the browser they look like this:

As you can see, they are on the top of each other. There is no space between them.

If we want to add some space between them one of the properties we can use is margin-top.

margin-top is a CSS property that adds some space between the top edge of the element and the bottom edge of the element before it.

in this example, if we add a margin-top to the red <div></div> then it will add space between the top edge of the red <div></div> and the bottom edge of the blue <div></div>.

In other words, it is the red <div></div> that will shift a little bit down because a space will be added to the top.

Let’s add a margin-top of 20 px.

At the end we’ll have:

So now as you can see, a 20px space is added between both elements.

margin-top is a space that is always added between the element and the one before this element.

b)- margin-bottom

margin-bottom property adds some space between the bottom edge of an element and the element after it.

If we add a margin-bottom value to the blue <div></div>, then a space will be added at the bottom of the <div></div> pushing the red <div></div> to go a little bit down.

Let’s add a margin-bottom value of 60px to the blue <div></div>.

So we’ll have at the end:

Both margin-top and margin-bottom add some space between elements, but one adds space between the top edge of an element and the bottom edge of the element before it (margin-top) and the other adds space between the bottom edge of the element and the element after it(margin-bottom).

margin-top and margin-bottom add space vertically between elements.

c)- margin-left

Now let’s take 2 simple pictures, one picture of a cat and one picture of a dog.

let’s display them on the browser and resize them by giving them a width of 20%.

In the browser they look like this:

As you have probably noticed, these pictures are aligned one next to another. There is no space between them.

To add some space we can add the margin-left CSS property.

margin-left adds space on the left of an element. For example here if we add a margin-left to the dog image we will have some space on the left of the dog image, and the dog image will be shifted to the right.

Let’s add a margin-left value of 150px.

So in the browser we’ll have:

And here you are, now there is a space of 150px between both images.

d)- margin-right

To add some space and push the dog picture to the right, we could have also used margin-right property instead of margin-left.

But this time, we would have applied margin-right property to the cat picture, because we want the dog picture to be pushed to the right. So we need space to be added between the 2 pictures for the dog picture to be pushed to the right. And margin-right adds space on the right of an element.

If we apply margin-right to the dog picture, then we will not notice anything, as the space will be added to the right of the picture and next to the dog picture there isn’t any other element to be pushed.

Let’s add a margin-right value of 200px.

So in the browser we’ll have:

Both margin-left and margin-right add space between elements. margin-left adds space on the left of an element and margin-right on the right.

margin-left and margin-right both add space horizontally between elements.

e)- margin shorthand

For an element, if we want to add some space on the left and the right, or at the top and the bottom, or maybe on the left and the right and the top and the bottom at the same time, instead of using margin-left, margin-right, margin-top and margin-bottom individually, we can combine them in one CSS property that is margin.

For example, let’s say that we want to add some space on the left and the top of the dog picture:

First, let’s display them in block to make one picture below another:

So the pictures will be aligned vertically like this:

Now let’s add some space on the left and the top of the dog picture:

We can write the code like this:

But this can be a little bit long and as we are lazy we will use margin property instead. So the code will be:

What does it mean? Simply the first value of the margin 150px represents space added at the top of an element, in other words it represents the margin-top property. The next value 0px represents the space that will be added on the right, in other words margin-right property. The next value 0px represents the space that will be added at the bottom, and by now you know that it represents margin-bottom property. And finally the last value 300px is the space that will be added on the left of an element, or should I say margin-left property.

So in the browser we’ll have:

To read more check the following tutorial: 

https://purpose-code.com/css-margin-and-padding-what-are-they-and-how-do-we-use-them/

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

[phantasyreign]

Tutorial: Creating Table using Flexbox

This tutorial is meant for those who wants to create a table without using <table>. An example can be shown below:

[DEMO]

2 COLUMN TABLE

1. Prepare the HTML. For tutorial sake, I markup as follow:

<div class="table"> <div class="table-row"> <div class="column title column-border"> Some stuff here </div> <div class=" column title"> Some stuff here also </div> </div> <div class="table-row"> <div class="column column-border"> Input </div> <div class=" column"> a grid </div> </div> </div>

Explanation:

By creating this, we'll be having a two-column table with three rows including its title [table header].

class="table" refers to the 'wrapper' that will wrap the cells to make it a table.

class="table-row" refers to the row of the table for all the table cells. This acts as another 'wrapper' for both table cells to be bound together.

column is the class that we will use to design our table cells.

title is the class that we will use to decorate the first row of the table. Think of this as our table header.

column-border is the seperator that seperates between the first column and the second column.

2. Secondly, we can first design the table. You can design however you want but this is what I did:

.table{ width:70%; margin:4rem auto; background:#FEFEFE; border:1px solid #89888D; border-bottom:0; }

TAKE NOTE!:By adding margin:4rem auto, it will cause the table to be moved to center. Please change the value accordingly.

3. Once you click [Update Preview], you'll see that the outline of our table is there but the table cells are still stacking on top of one and another. To ensure that the table cells are in-line at its respective rows, this is when we design our table-row by using flexbox. Here's the code:

.table-row{ width:100%; display:flex; flex-flow:row wrap; border-bottom:1px solid #89888D; }

Remember that our table does not have a border at the bottom of the table? By including a border-bottom inside .table-row, it will create a border at the bottom of the table. The reason why we do not include the border-bottom into our .table is because by doing so, there will be a 'thick' line at the bottom of the table because of the existence of two lines from .table and .table-row.

4. After we positioned the cells according, we can customise them. For tutorial-wise, I coded them as follows:

.column{ width: 50%; padding:.5rem 1rem; text-align:center; }

What this tells us here is that we want each cell to be half of the table.

5. Next, is for our table to have its own seperator. This is when we should utilise our column-border class. You just need to add this code:

.column-border{ border-right:1px solid #89888D; }

6. Our table is almost complete but we then need our table header to seperate between the titles and the inputs. You can code your title class however you want to but this is what I coded:

.title{ background:#F0C5BA; text-transform:uppercase; font-weight:600; }

With that, you're done! If you want to add more rows, you can add this code into your HTML:

<div class="table-row"> <div class="column column-border"> Input </div> <div class=" column"> Another Input </div> </div>

3 COLUMN TABLE

Say that you want to make a three-column table as per the second example of our demo, you need to edit your HTML and CSS. For the HTML, inside the <div class="table-row"></div>, simply add this code:

<div class=" column"> Other Input </div>

Then, at your .column, replace 50% with 33.33%.

At the second column of your HTML, please ensure that you also add column-border inside you class attribute. Meaning to say that it'll will look like this: class="column column-border".

With that, you're done!

MAKING YOUR TABLE RESPONSIVE

There's no easy way of making your table responsive. However, if you want to make your table responsive, here's an approach for it:

@media screen and (max-width:1024px){ .table-row{ flex-flow:column wrap; } .column{ width:100%; } }

By doing so, your table will look like this:

I hope this helpful for those who wants to create a table without utilising <table>.

[spearxwind]

dear world anvil asker:

Hi this is sleep! Alex mentioned me in the tags so I figured I’d give my two cents

I actually have used world anvil in the past to test it out. In my experience it was very thorough, with multiple useful tools and sections, many of which just made it overwhelming for me to fill out all at once, and killed my motivation to update my wiki. google docs is absolutely my main method of keeping lore tidy! been usin’ it for years and breaking it in. I can see how it can be hard to stay on top of though! Especially if you use a vertical format or misplace your sections.

If you would like to take a crack at google docs again, I highly recommend using headers or bookmarks (look up a tutorial) to keep sections organized! You can make a table of contents and link to bookmarked places in your document.

If you want to try other methods: Discord is a pretty decent place to track worldbuilding! You can make a private personal server, and specific channels or categories for each world or story, then use threads and pinned messages to focus further on specific parts! works best for slammin’ down spur of the moment ideas, roleplay bits, descriptions, etc. Discord’s many bots may help as well: things like tubberbox can help you message as, and/or organize characters, if you fanangle it right

You can also try using journals, sketchbooks…physical note taking and sketches are great, but can get disorganized and reordering isn’t exactly easy unless you use a binder of some sort, with tabbed sections. It’s also difficult to access if you’re on the go or otherwise separated from your materials. Nice for breaking for breaking formats and writers block when you can just scribble things down with wild abandon lmao

finally, if you want something similar in function (ish…kind of a stretch) to world anvil, but more customizable and easy to tackle, try Toyhouse! you can make a world on there, make bulletins, submit literatures, characters, images…plus lots of user made html coding allows for some pretty in depth stuff! I personally don’t use it, but maybe it could be right for you -w- Just make sure to get a code if you don’t have access to the site, as its in beta. Look around, see if anyone has codes to offer! Lots of folks have extras they give away freely

good luck! hope this helps 🍀

.

[mmainulhasan]

Prompt Examples for Learning Web Development

Coding is both an art and a science. It’s about creatively solving problems, bringing ideas to life, and constantly learning and adapting.

Because technology advances at such a rapid pace, it is essential to be fluent in a variety of languages, tools, and domains.

Sometimes it’s difficult to pick up the right resources from the ocean of tutorials, demos, and resources.

And on top of that, sometimes we have to learn and apply so fast due to tight deadlines of the projects. In this case, we need a friend who can help us learn and work faster and better. And thanks to AI by this, our learning becomes faster and more fun.

Today, we’ll look at how learning prompts that AI drives can change the way you learn web development.

How you can craft prompt engineering for web development, the difference between a generic prompt and a bit tweaked prompt can eventually change your desired results and make your learning journey more smooth and more enjoyable.

You can also use this knowledge to learn other fields more quickly and interactively.

Table of Contents

Learning Prompts

HTML Prompt Examples

CSS Prompt Examples

Debugging Prompts

Testing Prompts

Crafting Better Prompts

Further Reading and Resources

🎯Learning Prompts

Prompts are at the heart of AI-powered learning. Prompts are questions or commands that guide AI models like GPT-3 or GPT-4 to generate the desired responses. They act as a springboard for the AI to dive into the knowledge it’s been trained on and come up with relevant outputs.

You can use AI’s capabilities in a variety of scenarios in web development, including debugging, code generation, and even learning new web development concepts.

Now, we’ll go through some basic prompts and their outputs, as well as a little tweaking of the prompt commands to see how the output is becoming more result oriented, giving you a sense of how you may build your prompt commands for better results.

Prompt Commands for Learning HTML Basics

Learning the basics of web development involves understanding the structure and syntax of HTML, CSS, and JavaScript. Here are some prompt examples you can use:

Create a simple HTML structure with a header, main content section, and footer.

This prompt returns a simple HTML skeleton. But if you want a more detailed structure, you could modify the prompt to include specific HTML elements. For example:

Create a simple HTML structure with a header containing a navigation bar, a main content section with a paragraph and an image, and a footer with copyright information.

Curious to know more? Visit our blog for the complete post and dive deeper into Learning Web Development with AI Prompts.