#visual studio code html

[coderbby]

Working on a new project about redesigning how I would create a virtual menu/book table for Starbucks. Starting the prototype in Figma! 🥐☕✨

[techdirectarchive]

Create a web page to visualize the output of BitLocker Script

In this article, we will create Create a web page to visualize the output of BitLocker Script. This sample web page creation assumes you already have your scripts saved. We will be utilizing the Virtual Studio Code which is a  a powerful and versatile code editor. Please see how to ​​​​​Install HTML Web Client for Microsoft RDS, How to Migrate Azure Web Apps, and “RDS client access licenses: How…

[josegremarquez]

Hojas de Estilo CSS: La Magia Detrás del Diseño Web

¿Qué son las hojas de estilo en cascada (CSS)? CSS es un lenguaje de diseño que se utiliza para dar estilo y formato a las páginas web. Separa la presentación del contenido, lo que facilita la creación de sitios web más consistentes y fáciles de mantener. Historia Breve CSS surgió a mediados de los 90 como una solución para separar el contenido (HTML) de la presentación (CSS). Desde entonces,…

[stephdoesux]

Lake Como Travel HTML, CSS, JS

View File in Browser

[baileylockheart]

does anyone else use vscode for normal writing too? 😭 like I have a little folder of txt documents and I use vscode to write in them :') mine uses a dark mode theme and opendyslexic, so it's generally easier for me to look at for long periods of time, and I have a little bongocat in the bottom, so it's just more fun 😭😭 sometimes I'll also make it an html document PURELY bc it turns the text pink for me 💀

[venturing-into-engineering]

Como cuando tomas nota de todo en el código y te pasan estas cosas de principiante xd.

[sesamestreetkid]

index (I hope to follow this tag system lol)

#blinkies #stamps #gifs #favicons

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

⇩ ⠀websites that are FULL of other web graphics below ⇩ ⇩ (+ some html tools!) ⇩

Graphics: blinkie maker : make your own blinkies! DOLLZ REVIVAL : a revival of pixel dolls where you can create and share your own. very cute! GlowTxt : create glowing transparent text gifs that say whatever u want HOARDER'S PILE : contains blinkies, buttons, stamps, and teddies plasticdino.neocities.org : blinkies Glitter Graphics : contains gifs, blinkies, dividers, and just sooo many web graphics Cute Kawaii Resources : contains gifs, blinkies, stamps, favicons, dividers, buttons, fonts, literally everything you need. its an insane resource Adrian's blinkie collection : collection of blinkies, stamps, and buttons ☆ (supplies.ju.mp) : blinkies, stamps, buttons, & favicons twigbranch.carrd.co : blinkies lallys.carrd.co : blinkies, stamps, dividers, and other resources Bugleeblinkie.carrd.co : blinkies, and 3 very special gifs at the end ;) unshinesblinkies.carrd.co : blinkies The 88x31 GIF Collection : buttons. there are 5 parts! huge collection! Bonnibel's Graphic Collection : blinkies WELCOME TO GIFCITY : blinkies, dividers, favicons, stamps cass-tastrophe.carrd.co : blinkies, stamps kotatsuOS : blinkies Cute web graphics : blinkies, stamps, dividers, and a LOT of other graphics, all very cute

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

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

[codingquill]

Essentials You Need to Become a Web Developer

HTML, CSS, and JavaScript Mastery

Text Editor/Integrated Development Environment (IDE): Popular choices include Visual Studio Code, Sublime Text.

Version Control/Git: Platforms like GitHub, GitLab, and Bitbucket allow you to track changes, collaborate with others, and contribute to open-source projects.

Responsive Web Design Skills: Learn CSS frameworks like Bootstrap or Flexbox and master media queries

Understanding of Web Browsers: Familiarize yourself with browser developer tools for debugging and testing your code.

Front-End Frameworks: for example : React, Angular, or Vue.js are powerful tools for building dynamic and interactive web applications.

Back-End Development Skills: Understanding server-side programming languages (e.g., Node.js, Python, Ruby , php) and databases (e.g., MySQL, MongoDB)

Web Hosting and Deployment Knowledge: Platforms like Heroku, Vercel , Netlify, or AWS can help simplify this process.

Basic DevOps and CI/CD Understanding

Soft Skills and Problem-Solving: Effective communication, teamwork, and problem-solving skills

Confidence in Yourself: Confidence is a powerful asset. Believe in your abilities, and don't be afraid to take on challenging projects. The more you trust yourself, the more you'll be able to tackle complex coding tasks and overcome obstacles with determination.

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

[izicodes]

I've been itching to dive into something totally new and outside of my usual web dev comfort zone! After brainstorming for a while, I finally landed on a brilliant new project idea: building my very own desktop widget~! 

Now, full disclosure—I have zero idea where to even start when it comes to programming a widget, but that’s where the fun comes in, right? I’m all about learning new things (I have an addiction to studying so…)~!

In this post however, I’ll be sharing my initial ideas for the widget and brainstorming what tech stack might bring this amazing idea to life~! 

Prior knowledge on desktop widgets?

All I know is that they stick to the desktop area and some even always in front of the other windows. That’s all I know!

Widget Idea

So, the project idea I’ve chosen is something simple, just so I can get used to making widgets: a notepad. But, it’s not just any plain notepad widget—it’s going to have an aesthetic color scheme! (I know, pretty cool, right?) I really wanted to keep things basic for this first project.

The inspiration actually came from a Pinterest pin that I saved. I think the design is originally from a color palette generator website, but I want to take that concept and turn it into an actual desktop widget. Thus this project was born!

Tech Stack

Alright, I lied—I'm not entirely stepping out of my comfort zone for this one! I'll be using ReactJS, a technology I’m super comfortable with and absolutely love. But to keep things fresh and challenging, I’m diving into something new as well!

After researching (thank you, ChatGPT, Google, and YouTube), I found out there are plenty of ways to build a desktop application, or in this case, a widget. You can go with WinForms, WPF, Tauri (Rust), Qt, and others. But I wanted to stick closer to JavaScript—specifically something I could pair with ReactJS. So, ElectronJS seemed like the best fit.

For this project, my tech stack will be:

ReactJS (JavaScript)

ElectronJS (JavaScript)

SCSS (for those extra styling powers)

HTML (obviously)

Visual Studio Code (with a lovely brown theme 🧸)

Toward the end of the project, I’ll also explore how to package the widget so people can download and install it on their own computers, and how to store the notes locally!

Finally

As I post this I am going to start the project so I will soon post updates! (This is where I fail…!)

[zilodak]

I’m a complete beginner when it comes to any coding and I’m not sure if you are or not, but was it easy to begin making the site using rarebit?

I'm a complete beginner as well! I've only coded a navigation bar back in middle school for an assignment and then never again, so Rarebit was overwhelming when I started.

However, you'll realize that it's pretty straightforward the more you read the code over and over again. I suggest opening up the Rarebit folder in an external terminal that isn't Neocities like Visual Studio Code and download the Live Preview plug-in from Microsoft. This let's you see your website in live time and not have to code blindly like in Neocities.

HTML is extremely straightforward and easy to grasp. It's CSS you have to learn and worry about since it's what makes your website look like your website.

I haven't touched Javascript yet, that's a bit more complex, but nothing a YouTube video or a forum can't help with.

It just takes time and patience like any other skill to learn!

I recently learnt how to use flexbox!

[qrowscant]

hi! sorry if this is a question you get a lot but i looked at your tags and i didn’t quite see the answer - i was wondering what software you use to code link rot? i’ve been trying to figure out what to use for my own project that i want to be multimedia/be able to click links and such and hosted probably on neocities and i just can’t figure out what program - if any - these sorts of projects use. (i would assume it’s html and css at the least, but is js needed too?) like can you still use twine for this kind of thing or rarebit or? if it’s a personal program/code i completely get if you don’t want to share it!! thank you either way :)

i use html, CSS, and javascript/jquery! you can absolutely use twine if you so choose, that's just a different language to learn to accomplish the same thing. most people code in visual studio code (its free!) and upload to their website, but if you're sick in the head (me) you can just code on the website directly

[rna-world]

heyyyyyy guys. remember light on tainted glass? thats still a thing right lol? chapter 12 probably coming out soon with another website overhaul as I move from neocities/notepad++ to visual studio code for my html stuff

[souhaillaghchimdev]

How to Build Software Projects for Beginners

Building software projects is one of the best ways to learn programming and gain practical experience. Whether you want to enhance your resume or simply enjoy coding, starting your own project can be incredibly rewarding. Here’s a step-by-step guide to help you get started.

1. Choose Your Project Idea

Select a project that interests you and is appropriate for your skill level. Here are some ideas:

To-do list application

Personal blog or portfolio website

Weather app using a public API

Simple game (like Tic-Tac-Toe)

2. Define the Scope

Outline what features you want in your project. Start small and focus on the minimum viable product (MVP) — the simplest version of your idea that is still functional. You can always add more features later!

3. Choose the Right Tools and Technologies

Based on your project, choose the appropriate programming languages, frameworks, and tools:

Web Development: HTML, CSS, JavaScript, React, or Django

Mobile Development: Flutter, React Native, or native languages (Java/Kotlin for Android, Swift for iOS)

Game Development: Unity (C#), Godot (GDScript), or Pygame (Python)

4. Set Up Your Development Environment

Install the necessary software and tools:

Code editor (e.g., Visual Studio Code, Atom, or Sublime Text)

Version control (e.g., Git and GitHub for collaboration and backup)

Frameworks and libraries (install via package managers like npm, pip, or gems)

5. Break Down the Project into Tasks

Divide your project into smaller, manageable tasks. Create a to-do list or use project management tools like Trello or Asana to keep track of your progress.

6. Start Coding!

Begin with the core functionality of your project. Don’t worry about perfection at this stage. Focus on getting your code to work, and remember to:

Write clean, readable code

Test your code frequently

Commit your changes regularly using Git

7. Test and Debug

Once you have a working version, thoroughly test it. Look for bugs and fix any issues you encounter. Testing ensures your software functions correctly and provides a better user experience.

8. Seek Feedback

Share your project with friends, family, or online communities. Feedback can provide valuable insights and suggestions for improvement. Consider platforms like GitHub to showcase your work and get input from other developers.

9. Iterate and Improve

Based on feedback, make improvements and add new features. Software development is an iterative process, so don’t hesitate to refine your project continuously.

10. Document Your Work

Write documentation for your project. Include instructions on how to set it up, use it, and contribute. Good documentation helps others understand your project and can attract potential collaborators.

Conclusion

Building software projects is a fantastic way to learn and grow as a developer. Follow these steps, stay persistent, and enjoy the process. Remember, every project is a learning experience that will enhance your skills and confidence!

[simpjaes]

I’ve always been interested in coding but specifically html and user face designing but I can never get ideas out and if I do it just never seems to look right to me. or I can never just do it. it’s been something I do on my downtime but it’s always like that for me. it’s either I design something and it’s nothing like what I had in my mind or it’s just the bones of a website with little to no design. sorry for the rant I don’t really have anyone to talk to about things like that.

but I’m sending this to say that your design mockups are amazing. pretty sure if it was real ( like out on the market for people to buy ) it would probably sell fast. and I hate to say this but as a society we care about looking at things first. the added benefits of the product are just secondary ( ex. skincare ). if it’s not packaged nicely or not pretty to look at people are mostly likely not to buy, even if it could save your life or something. – byeol

HUUUUUUUUUUGE YAP SESSION!

Don't apologize for ranting about things that I have experience in and a passion for! Given, I'm studying visual design more than the html or coding aspect of it. What I will say though is that really, any aspect of design has soooo many fucking rules to it and it's always better to learn them before breaking them. (basics like typography, sight patterns, alignment, etc) I think you should keep playing around though. Sometimes when I'm bored I go to carrd and just play around with it til i either hate it or like it, either way I still delete it and start over. As for your comment on society needing pretty packaging, I can agree to an extent but it's also human nature to search for things that please the eye. Even as a messy ass painter and sculptor who makes very weird and uncanny things, I still follow the rules so even my most horrifying works is pleasing to those who recognize the skills i used. As far as I'm concerned, I have no qualms with people liking pretty things, especially if I get to make those things, yknow? Even the most mundane, boring designs follow the exact same rules. Brand logos, street signs, shower curtains, business cards. [nct albums have bad design a lot of the time, i've learned KMFSDKJHFKJ]

I also do agree that sometimes people prefer the prettier packaging over the boring or even badly designed kind but I don't agree that they won't buy it because of that. Price is usually what drives a purchase, and often times a prettier design costs more. If we are referring to nepo babies and rich ass losers, yeah they probably don't care but i don't believe anything would be considered a "life saver" regarding good or bad design. That's when the price or design doesn't matter and the product is what matters. **i also wanna add, more often than not, you'll find the design package matches or compliments the price, no matter how expensive or cheap. sometimes the price is what drives the design.**

Either way!! I get what your saying, so...ONTO ADVICE: As an artist who primarily did more physical studio art before focusing on design, most if not all of my works turn out differently than what I imagine, but I love them nonetheless because of the work and effort I put into it. You cannot perfect yourself based off of a fantasy in your head, you have to be realistic. If it's possible, get as close to it as you can without breaking your mental state. If it isn't possible, make something else, or utilize the idea and make something inspired off of it. Someone will like your work whether you hate it or not. I've experienced it time and time again. People taking my sketches and work out of trash cans, me doing the same thing to other people. I can't tell you how many trashed art pieces i own and love, and the fact of the matter is, someone hated it enough to crumple it and throw it away, prepared to never look at it again. Digital design can be different from that though because mistakes or unbalanced parts of it can be really obvious, not to mention how pompous some designers are. It's a more critical type of work, i think, and even I'm struggling with it. I see so many mistakes in my mock ups, but i finally threw my hands up and knew I needed to just be done with it. The sub box was supposed to be a tarot card box, but I just couldn't get it right. That's a clear example of my work not panning out to my own mind's image. The point is, everyone feels this way with their work. We look at it for so long that everything looks wrong, and not good. But at the end of the day, especially with design, a lot of people will simply look at it briefly and move on. Remember that!

[irlmaeda]

Hiya! I found your blog through your neocities website! I was wondering if there’s any tips or things you read/watched that help you make your site. (Im heavily considering making one of my own neocities site it just seems fun)

hihi welcome !! i have quite a few pieces of advice, but the tldr is you should come up with an idea for what you want to make beforehand, and look up how to do each piece! your knowledge will start to fill in along the way :]

(this is probably gonna be long as hell so under the cut is all of the fun stuff /silly)

the way i personally started off was by sketching out what i wanted my site to look like! if you know what you want before you begin, you'll know where to look to figure out what you need to do. html+ css are extremely easy languages to read/write once you know what to look for!

^ this was the original sketch for my site, where i planned out everything i wanted to include. it's a bit different from what actually ended up on the site, but that's alright! it's just about having an outline to work from. i think of it like outlining before you write, it feels like such a pain in the ass because u just wanna start working NOW but u will thank yourself later for taking the time to plan.

once you know what you want to make, start looking for tutorials and resources to make it easier! the grid for my homepage and some of my other subpages was made using a css grid generator, since its one of the more confusing bits of css. you can make grids without it, but its a very easy way to make a more asymmetrical design if ur using the generator!

thats linked here, it gives you some css to put in your head or css sheet, and then the html for the different boxes to slap in your main document. it can be easier to understand what itll look like if you give each one a border while you work, even if its just temporary!

when looking for information about css and html, w3schools is your best friend. its a pretty comprehensive database of every little piece of html + css you could ever need, with examples you can play with yourself to understand what each variable does! it's been a lifesaver for me, ive watched basically zero video tutorials because everything on there is explained so well and you can find basically Anything.

they even have code snippets for things that take more than one or two lines of code, which you can use and adapt yourself! (the tooltips on the official art + my art sections on the hinata shrine were adapted from a tutorial on there!)

in general, having a plan and working from there will make ur life so much easier. the pages that ive sketched out beforehand or ive had a very clear vision for have been WAYY easier to code than the ones i tried to come up with on the fly, and ive been much happier with how they've turned out as well. though i do also have some smaller, rapidfire tips as well that ill go thru now!!

— inline css (the style="" tag) seems so so useful but really should only be used when you're resizing images like buttons. when u keep all of your css in the head or in a seperate document, its way easier to debug and read later. i cleaned up my homepage recently by removing all of the inline css and looking at the code stresses me out WAY less because i can actually read it LOLOL ... plus cutting the css out and putting it in its own document made me realize that id accidentally wrote some really weird code in some places

— this is very much 'do as i say, not as i do,' but use an external editor (like visual studio code) instead of editing live on neocities! you can set up a live preview, and generally wont be pushing out 100 updates every single time you change or add something. i tend to code directly on neocities but its a bad habit and i want to break it eventually v_v

— if you really like an effect someone else has on their site, you can peek using inspect element i promise the coding police won't get you !! dont steal code line for line, but you can figure out what theyre doing and put your own spin on it. things like border images can be really cool, and i only figured out about them because i looked at what someone else was doing and figured out how to adapt it for my own site! check linkbooks and credit sections as well, a lot of people will include links to any effect they didnt make themself or got help with. (including me! the credits section of the linkbook has a ton of little things i got from other places, including a really neat little music player, the rss feed for my status cafe, and the wobbly text on the homepage!)

— most stuff in html and css basically just... says what it does in the tag. so looking stuff up for it is extremely easy! if you've used carrd before you honestly probably already know more abt html than u'd think just intuitively. when ur adjusting the margins or padding in carrd, you're adjusting the margin: and padding: properties in the css of the website it's outputting!

this is getting way too long but!! my best advice is to just get started. you'll never be able to learn without trying, and it genuinely is so fun to have something that's truly your own!

(if u have any specific questions im happy to answer anytime as well! i love talking abt neocities, its a super fun hobby and way easier to pick up than u would think!)