just started learning web dev and i made a small project with html and css. I'm trying to figure things out on my own without tutorials that walk me through the whole thing. only looking up stuff when i get stuck. Any tips from people who remember their first project would be awesome

I recently finished a ~6 month course on web development. JavaScript, TypeScript, CSS, Maven and other modern horrors influenced me to rebel again today's often bloated approach of developing websites and aplications.

"Developer" became a dirty word for me. The thinking (or should I say lack if thinking?) that everywhere is fast internet and infinite amount of computing resources tickles my mind in a uncomfortable way.

Sure, computers are fast, packets travel across the underwater optic cables nearly at the speed of light but it looks to me that a lot of web and software development is allowing bad practices and sloppy code because "just throw more resources at it".

I don't want to be a developer, I wish to become a programmer.

Thus, I made 100% pure HTML website to document my journey into the embedded systems and low level programming (and maybe a few more things along those lines).

It's may not be perfect, it may not follow the best of the best practices but I will get there as I go.

EDIT:
Took note on the comments and updated the site. Not all is implemented that was suggested. The suitable color scheme for Darth Vader still awaits among many other ideas. Instead, I played around with tables, not sure if this is the way to go.
But we'll see. This is an experiment, a fucking rebellious and hackish experiment, to see how far can this be pushed and still stay withing the bounds of pure HTML.

Im begginer help

I will do much better very soon.

Also I need help cause I wanted to make the text brown by using the css but the code doesn't work, what am I doing wrong? Or I just cannot see it and it actually worked?

I used this code:

<html>

<head>

<title>this is a test!!!!!!!</title>

<style> body {background: linear-gradient(#FFFCED, #FFEDF2); } .broccoli { color: "#614909"; } .tomato { color: "#614909"; } .potato { color: "#614909"; } body { maxwidth: 600 px margin: 2 auto } </style>

</head>

<body bgcolor=#FFFFFF color=#614909>

<p id="broccoli "><font face=serif>this is a <strong>test</strong>, this uses the <strong>p, strong, and the font</strong> tags.</font></p>

<p id="tomato">COLORED text!</p>

<ol><li>This</li><li>Is</li><li>An</li><li>Organized</li><li>List!</li></ol>

<ul><li>This</li><li>Is</li><li>An</li><li>Unorganized</li><li>List!</li></ul>

<hr color=#FFDBEC size=20>

<p id="potato"> this is a <em>line break.</em> Also this uses the em and the p tag.</p>

<img src="file:///storage/emulated/0/Download/b80267cb-929d-4955-b1d6-d31ca1afe436.jpeg" alt="heart"

</body>

</html>

also I forgot to color the "colored text" lol

please dont look at it on mobile... it breaks on phones because i am a bum who doesn't do responsive webdev...

https://dreamscape.place

I can't screenshot from PC why. Btw done on notepad

I’ve been teaching HTML & web fundamentals to uni students for a couple of years, and there’s one beginner mistake I see in almost every class:

They use <div> for everything.

Semantic HTML matters more than people think. For anyone starting out, here’s a simple rule that helps:

• Use <header> for the top section

• Use <nav> for menus

• Use <main> for page content

• Use <section> for grouped topics

• Use <article> for standalone posts

• Use <footer> for bottom info

If you start with this structure early, your CSS becomes cleaner, accessibility improves, and debugging becomes 10× easier.

If anyone wants, I can share more beginner mistakes + quick fixes.

I am still learning if there are any mistakes and any improvements that I need to make. Feel free to say.

Sorry couldn't resist.

I just built a little tool to show all of the HTML5 elements and how to use them.. I'd love any feedback: https://allthetags.com

There is a little easter egg in there too. If you give your phone a shake and it will pick a random element for you.

Okay, like i have no experience. So i memorized what i knew thoroughly, and made this:

Oh and if you want to change it or add more to it then here's the entire thing (Can i just put it in the body or have to give a link?): <!DOCTYPE html>

<html>

<head>

<title>Cucumbers</title>

<style>

h1 {

font-family: Arial;

color: gray;

}

body {

font-family: Comic;

background-image: url("https://tse3.mm.bing.net/th/id/OIP.wAHXLVaBSFIcnhm6tmWehQHaEK?r=0&pid=Api&h=220&P=0");

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

}

a {

color: yellowgreen;

}

</style>

</head>

<body>

<h1>Learning about Cucumbers</h1>

<p>Cucumbers are green-darkgreen vegetables that are said to be made up of over <b>95% water. </b><br>They originate in <i>Ancient China </i>& parts of Asia like <i>India, and Nepal</i></p>

<img src="https://tse2.mm.bing.net/th/id/OIP.0hoo0G1rccBCWJ-hDtukRwHaGa?r=0&pid=Api&h=220&P=0">

<p>Cucumbers are of course, an important part of agriculture, they feed millions everyday.<br></p>

<p>Cucumbers are eaten & sold all around the world, they're mainly eaten as light snacks.<br></p>

<p>Cucumbers have a taste as of water but with crunch. Seasoning with salt makes them around 100x better. <i>(Okay i made that 1 up but it's not false...)</i></p>

<a href="https://en.wikipedia.org/wiki/Cucumber">More about Cucumbers Here</a>

</body>

</html>

Everyone knows <b>, <i>, <a>, and <code>. But HTML has a whole second cast of inline elements that most developers go entire careers without typing once — <ins>, <dfn>, <abbr>, <var>, <q>, <mark>. Not because they're broken or deprecated. They're rare because the use cases are genuinely narrow, and when one does come up, the reflex is to reach for a <span class="something"> instead.

I bumped into this building out a prose/content section for a UI system — once you start styling text properly, you notice how many real semantic elements you'd been ignoring. So here's the whole forgotten cast, in a single sentence that legitimately uses eleven of them:

Here's what that actually is:

<p>
  The experiment revealed <mark>a significant energy spike</mark> in
  the reactor core. Previous readings of
  <del>42.7 terawatts</del> were revised to
  <ins>51.3 terawatts</ins> after recalibration. The formula
  <var>E</var> = <var>mc</var><sup>2</sup> governs the conversion,
  where H<sub>2</sub>O serves as the coolant medium.
  <abbr title="Void Energy Reactor Interface">VERI</abbr> logs
  confirm the anomaly. As Dr. Vasquez noted,
  <q>the readings exceed all theoretical models</q>
  (<cite>Void Research Quarterly</cite>). This phenomenon, known as
  <dfn>energy cascade</dfn>, occurs when containment thresholds are
  breached. The <s>original safety protocols</s> have since been
  replaced.
</p>

The cast, and where you'd actually use each

Edits and corrections. <ins> and <del> are added and removed content — they pair up for change tracking, and both accept datetime and cite attributes so the edit is machine-readable. <s> is the one people conflate with <del>: it marks content that's no longer accurate or relevant (a stale price, an outdated claim), which is a different statement than "this was deleted." Two elements exist precisely because those mean different things.

Notation. <sub> and <sup> are for cases where the position carries meaning — chemical formulas (H₂O), exponents (I²R), ordinals, footnote markers — not for "make it small and raised." <var> is a variable in math or code, which is why P, I, and R above are each wrapped in one.

Reference and meaning. <mark> is a relevance highlight — it's literally what search engines use to highlight your query in the results. <abbr title="…"> gives an abbreviation its expansion, surfaced as a tooltip. <dfn> marks the one spot where a term is defined (its introducing instance, not every later mention). <cite> is the title of a work — a book, paper, album — and notably not a person's name, which is the thing nearly everyone gets wrong. And <q> is an inline quotation where the browser inserts the quotation marks for you: correct for the document's language, and correctly nested if you put a quote inside a quote. You never type a " again.

Why bother

Every one of these throws a bit of meaning into the page that a styled <span> silently discards. Screen readers announce them. <q> localizes its punctuation. <abbr> exposes the long form. <ins>/<del> are a real, parseable changelog. A <span class="highlight"> looks the same and means nothing.

The only honest reason to avoid them is that the browser defaults are inconsistent and, frankly, ugly — <mark> is highlighter-yellow, <q>'s marks are whatever, half of them are unstyled. But that's a few lines of CSS, not a law of physics. Give <mark> a brand-tinted background, <ins> a green underline, <abbr> a dotted one, <q> colored quote marks, <dfn> an italic weight — and suddenly an entire sentence of semantic richness reads as clean, deliberate typography.

Most of these you'll reach for maybe once a year. But once a year correctly — with the meaning intact and the styling handled — beats a <span> that's lying about what it is.

any suggestions?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    
  </head>
  <body>
    <fieldset>
      <legend><h1>Registration Form</h1></legend>


      <form action="">
        <label for="Name">Name:</label>
        <input
          type="text"
          id="Name"
          name="Name"
          placeholder="Enter your name"
          required
        />
        <br />
        <br />
        <label for="Age">Age:</label>
        <input
          type="number"
          id="Age"
          name="Age"
          placeholder="Enter your age:"
          required
        />
        <br />
        <br />
        <label for="Email">Email:</label>
        <input
          type="email"
          id="Email"
          name="Email"
          placeholder="Enter your email."
          required
        />
        <br />
        <br />
        <label for="Password">Password:</label>
        <input
          type="password"
          id="Password"
          name="Password"
          placeholder="Enter your password"
          required
        />
        <br />
        <br />
        <label>Gender:</label>


        <input type="radio" id="male" name="gender" value="male" />
        <label for="male">Male</label>


        <input type="radio" id="female" name="gender" value="female" />
        <label for="female">Female</label>
        <br />
        <br />
        <label for="number">Phone Number:</label>
        <input
          type="tel"
          id="number"
          name="number"
          placeholder="Enter your phone number"
          required
        />
        <br />
        <br />
        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob" required />
        <br /><br />
        <label for="interests">Interests:</label>
        <input type="checkbox" id="sports" name="interests[]" value="sports" />
        <label for="sports">Sports</label>
        <input type="checkbox" id="music" name="interests[]" value="music" />
        <label for="music">Music</label>
        <input type="checkbox" id="travel" name="interests[]" value="travel" />
        <label for="travel">Travel</label>
        <input
          type="checkbox"
          id="Esports"
          name="interests[]"
          value="Esports"
        />
        <label for="Esports">Esports</label>
        <br />
        <br />
        <label for="State">State:</label>
        <select name="State" id="State">
          <option value="">Select</option>
          <option value="Maharashtra">Maharashtra</option>
          <option value="Delhi">Delhi</option>
          <option value="Gujrat">Gujrat</option>
          <option value="Karnataka">Karnataka</option>
        </select>
        <br />
        <br />
        <label for="city">City:</label>
        <select name="city" id="city">
          <option value="">Select</option>
          <option value="Mumbai">Mumbai</option>
          <option value="Delhi">Delhi</option>
          <option value="Gujrat">Gujrat</option>
          <option value="Bangalore">Bangalore</option>
        </select>
        <br />
        <br />
        <label for="Address">Address:</label>
        <input
          type="text"
          id="Address"
          name="Address"
          placeholder="Enter your address"
          required
        />
        <br />
        <br />
        <label for="Pincode">Pincode:</label>
        <input
          type="number"
          id="Pincode"
          name="Pincode"
          placeholder="Enter your pincode"
          required
        />
        <br />
        <br />
        <label for="file">Upload Resume:</label>
        <input type="file" id="file" name="file" />
        <br />
        <br />
        <label for="feedback">feedback:</label>
        <textarea
          id="feedback"
          name="feedback"
          placeholder="Enter your feedback"
          required
        ></textarea>
        <br />
        <br />
        <input type="submit" value="Submit" />
        <input type="reset" value="Reset" />
      </form>
    </fieldset>
  </body>
</html>

I finished writing this a little while ago, it’s called THE WINDMILL, and it’s a horror adventure type game, entirely written in html.

Each screen is individually drawn from a text template inside <pre> tags, and functions using page timers, a random number generator, and is otherwise a click puzzle like myst. You can pick up items, each item is a separate folder containing the entire game, modified to take into account you having that item.

The game design is about 2500 separate html files, copied over to each item folder lol.

I think links are allowed here? Game can be played at https://zebeth.co.uk/playplanet/thewindmill/index.html

Over 700 hours or coding, WOOH!

</2017><2018>

Hello from Japan.

I'm a person who studies and builds websites. When looking for design and layout inspiration, I visit many different websites.

However, I've noticed that a surprisingly large number of sites still don't follow semantic HTML practices and have poor accessibility support. This includes sites from small businesses as well as larger companies.

Is it the same where you live? Do you also see many websites that don't properly implement semantic HTML and accessibility standards?

SOLVED. Thanks folks! I am working on a basic level HTML homework assignment. It is required that some of the text should be bold, but not all of it. I don't understand why all text is automatically bold. Or is that the font? I am including what my webpage with code looks like and the code that went into the webpage.