I'm fairly new to HTMl, CSS and Javascript and i was wondering if anyone could help me out on how to create a search bar that searches for individual words on my page. For example if I have 200 essays on the page and I want to search for the name of one so I dont have to scroll to find it. I'm aware most browsers have a built in search function but i want a search bar built into the code.
At the moment the sidebar seems to be above the header, and since they're different colours and I've added a shadow, I'd like the header to be on top of the sidebar.
This is the CSS for the header and the sidebar:
header {
width: 100%;
margin-top: -2%;
margin-bottom: 2%;
background-color: var(--heading-colour);
text-align: center;
font-size: 25px;
box-shadow: 3px 3px 3px;
}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
top: 0;
left: 0;
background-color: var(--theme-colour);
overflow-x: hidden;
padding-top: 100px;
box-shadow: 3px 3px 10px;
}
I'm very new to CSS so please excuse if I've missed something stupid.
Thanks!
Is the back-end code okay?
I recently learned the basics of html and css, but I don't know what to do now, I still don't have the skills to make a wikipedia page, that's for sure I've tried. but what do I do now to learn what's left, I am in position where I don't know what I should do.
pls help me thx
My laptop is currently getting repaired, so I decided not to stop learning and started practicing HTML on my phone instead. 😄
I’ve learned the basics of HTML and made a simple page about my favorite artist, added 2–3 details, and even added some music.
The funny part? I couldn’t figure out how to add the music properly, so I took a little help from AI. 😂
I haven’t started CSS yet, so I’d love some advice:
What should I learn next in HTML?
When should I start CSS?
What resources/projects would help me improve faster?
I’m still a beginner, but I’m enjoying the process!
Any tips for my next step?
I saw a neocities site who's writing page mimics ao3's. Is there's any css to mimic it?
i want to make a search engine like yahoo in its start but idk how, also is there a way to make it wihout javascript cuz im terrified of it T_T
My "Live Preview" doesn't work well with HTML plus CSS.
It doesn't immediately recognize changes on CSS but it works well with just HTML.
I don't understand the problem and it's completely bugging me. It requires me to save the CSS file every time and retype the same part of the CSS that I changed in order for it to show the changes.
I checked my Live preview setting and the right setting is already set. Please help. I am kind of a newbie here
My "Live Preview" doesn't work well with HTML plus CSS.
It doesn't immediately recognize changes on CSS but it works well with just HTML.
I don't understand the problem and it's completely bugging me. It requires me to save the CSS file every time and retype the same part of the CSS that I changed in order for it to show the changes.
I checked my Live preview setting and the right setting is already set. Please help. I am kind of a newbie here
body {
background-image: url('background.jpeg');
background-size: auto;
The image is “background.jpeg”. It has the correct spelling, the image is within the same folder. IT used to work but then it suddenly stopped working and i havent even edited the CSS for it to stop working.
Update: i couldnt figure it out for the life of me and no suggestions worked, but on the good side, instead of putting it on CSS, i put it on HTML, then it worked.
<style>
body {
background-image: url('background.jpeg');
background-size: auto;
}
</style>
I haven't learnt about HTML or CSS and have done some searching to try and learn how to make a website layout but each thing I've seen isn't exactly what I'm looking for.
Question: How can I make a consistent sitewide layout with HTML (For footer and header, with consistent font/colours/etc)?
I'm currently using Nekoweb which is a free HTML/CSS/JS website builder, I'm wanting to make the image attached the layout for my website homepage with the frames either side, HOWEVER I only want the title, banner and buttons up the top as well as the Footer on every webpage with blank areas I can write in.
Essentially I want to make a blog or something alike to Fandom.com's wiki layout or the Backrooms Movie site layout.
What are the proper terms to use to search and learn about this stuff, for HTML coders here how can I do this?
This isn't ragebait, I just really need some help with this please 😅
I am sure like most of people like the kind of animations which we see in the awwards website but do you think we can do them on our own. The animation ? Smooth flow ? Using the three js framework and using the 3d model from the blender and then running those models in website how can we do that ? Or whats the way to achieve those kind of websites ?
Browsers could automatically convert units to the user agent preferred unit. Just like the existing language declaration and browser can suggest auto translation.
<unit value="10" unit-base="m^2" unit-name="mi2" convert="auto">
10 square miles
</unit>
The attributes mean:
The browser knows that mi2 is an area and can display the same quantity as, for example, 25.9 km² if that is the user's preferred unit.
The unit name and base are standardized and language neutral.
The important part is that the HTML stores the original value and unit. The UA only changes the presentation. And it's useful for weather app, cooking recipe website all the way to commercial airliner jet documentation.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body style="font-family: Noto Sans, system-ui, sans-serif; background-image: url('./rain_background.jpg'); background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100vw; margin: 0; padding: 0;overflow: hidden;">
<h1 style="position:absolute; top: 0px; left: 30px; color: #c9ffcf;">Welcome to My OS</h1>
<!-- This is ONLY for the bottom bar -->
<div style="position: absolute; bottom: 0; width: 100%; display: flex; backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, 0.125); color: #e0fce3; justify-content: space-between; gap: 32px; ">
<p style="margin-left: 16px; font-weight: 700; background-color: rgba(255, 255, 255, 0.125); padding: 6px 12px; border-radius: 16px;">
RainOS
</p>
<p style="margin-left: 16px; background-color: rgba(255, 255, 255, 0.25); padding: 6px 12px; border-radius: 16px;">
SLEEP MODE
</p>
<p id="timeElement"
style="margin-right: 16px; background-color: rgba(255, 255, 255, 0.125); padding: 6px 12px; border-radius: 16px;">
</p>
</div>
<script>
setInterval(function () {
document.querySelector("#timeElement").innerHTML = new Date().toLocaleString();
}, 1000);
</script>
<div id="welcome" style="top:50px; left:50px; border: solid; padding: 16px; border-radius: 16px; position: absolute; background: #fff;">
<img src="./rain_background.jpg"
style="width: 64px; height: 64px; border-radius: 32px; object-fit: cover;" />
<h1 id="welcomeheader"style="margin: 4px;">RainOS</h1>
<p style="margin: 0px;">
<dfn>RainOS</dfn> is a feature-limited <abbr title="Operating System">OS</abbr>
question of <code>"who is Thomas?"</code>
</p>
</div>
<script src="script.js"></script>
</body>
</html>
Hello, for starters I'm coding in the GitHub codespace. I've been trying to add a background to my website for weeks and I can't figure it out, I have tried the image url in both the codespace as shown(download.jpg) and also in the github repository, neither works. Also I'm trying to make a window draggable in this website (website operating system) that doesn't work either. I know that this isn't the place for java script but if there's something wrong with the way I linked it I would like to know please, thanks
Anything helps, I want to give up
// Make the DIV element draggable:
dragElement(document.getElementById("welcome"));
// Step 1: Define a function called `dragElement` that makes an HTML element draggable.
function dragElement(element) {
// Step 2: Set up variables to keep track of the element's position.
var initialX = 0;
var initialY = 0;
var currentX = 0;
var currentY = 0;
// Step 3: Check if there is a special header element associated with the draggable element.
if (document.getElementById(element.id + "header")) {
// Step 4: If present, assign the `dragMouseDown` function to the header's `onmousedown` event.
// This allows you to drag the window around by its header.
document.getElementById(element.id + "header").onmousedown = startDragging;
} else {
// Step 5: If not present, assign the function directly to the draggable element's `onmousedown` event.
// This allows you to drag the window by holding down anywhere on the window.
element.onmousedown = startDragging;
}
// Step 6: Define the `startDragging` function to capture the initial mouse position and set up event listeners.
function startDragging(e) {
e = e || window.event;
e.preventDefault();
// Step 7: Get the mouse cursor position at startup.
initialX = e.clientX;
initialY = e.clientY;
// Step 8: Set up event listeners for mouse movement (`elementDrag`) and mouse button release (`closeDragElement`).
document.onmouseup = stopDragging;
document.onmousemove = dragElement;
}
// Step 9: Define the `elementDrag` function to calculate the new position of the element based on mouse movement.
function dragElement(e) {
e = e || window.event;
e.preventDefault();
// Step 10: Calculate the new cursor position.
currentX = initialX - e.clientX;
currentY = initialY - e.clientY;
initialX = e.clientX;
initialY = e.clientY;
// Step 11: Update the element's new position by modifying its `top` and `left` CSS properties.
element.style.top = (element.offsetTop - currentY) + "px";
element.style.left = (element.offsetLeft - currentX) + "px";
}
// Step 12: Define the `stopDragging` function to stop tracking mouse movement by removing the event listeners.
function stopDragging() {
document.onmouseup = null;
document.onmousemove = null;
}
}
Edit: images won't show up in general, including the src file
Was learning html & css easy for you? For me I had a dedicated class for it & the teacher explained it really simply, so I learned the code all really well! Same with css but I missed a couple of things but still, learned it well & I can use it! VS code also helped since it kinda tells you all that you can type in when you write something.
I started learning html as a 17 Y/O Student my school didn't taught anything releted to technology to us because we are in a poor tier 3 city.
I want to learn web developement and earn well like 25-30k inr in starting then i want to learn coding more deeply and make something great for humanity like the guy who found HTML. I know html basics but I am a fresh starter so I want a guide from my seniors :) hope for positive responses
i just launched it, try it out for free at playporpel.org. I look forward to any feedback you guys have!
I've created a micro-kernel architecture which can load apps and each app shall be a custom-element with pure js and css.
and it works perfectly, maintainace is easy and easy to extend, I have a feeling that all these frameworks and fancy tools are kinda overrated, waht do you think?
PS:
- I used AI to spped up my development
I have hosting on Stellar and reserved my domain through namecheap, but their website building tools seem a bit limited;
Can anyone recommend a website builder that can export your files?
I have completed my HTML.
So, I build some projects with only HTML.
Projects:
1: Blog
2: My Portfolio
3: Class Grade table
4: Single tech-gadget page
5: Photo gallery page
6: Feedback form
7: Party invitation page
I have 2 days to build projects by using only HTML.
So, you people can suggest me some other projects that I can build.