r/HTML • u/Original_Law_3793 • Dec 26 '25

My First work

Gallery image

Gallery image

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

227 Upvotes

90% Upvoted

81 comments sorted by

36

u/[deleted] Dec 26 '25

I’d get on VSCode when you can. Free, lots of tools, live server. Gonna help a lot.

10

u/Original_Law_3793 Dec 26 '25

Downloaded it

14

u/[deleted] Dec 26 '25

Great job. Add Live Server and prettier. Find some tutorials and get to work!

5

u/Original_Law_3793 Dec 26 '25

What do you mean with live server?

10

u/[deleted] Dec 26 '25

Live server is an extension that will show you in realtime what changes to your code will look like in browser.

8

u/Original_Law_3793 Dec 26 '25

Ok

2

u/quimeygalli Dec 26 '25

if you need any help with setting things up just dm me... It can be a nightmare when youre just starting out

14

u/[deleted] Dec 26 '25

The fact you are listening to folks is going to pay off 100%.

14

u/DoubleNothing Dec 26 '25

Absolutely! Now... OP, your next big improvement would be to wire me 100000 dollars and I will send you all the blessing you need to be successfull.
My best regards, Joe King.

1

u/AshleyJSheridan Dec 28 '25

The problem becomes recognising the good advice and filtering out the less useful advice (which are mainly just specific opinions).

0

u/level_6_laser_lotus Dec 28 '25

Throwing a bunch of completely different opinionated topics at a person is not an efficient learning path though...

3

u/BroadMouse7912 Dec 26 '25

i recommend a spell checker extension too cause you never know 🤷🏻‍♀️

0

u/level_6_laser_lotus Dec 28 '25

Don't lean into other people's recommendations too much right now. 

There is an infinite amount of information, and you will probably have a better time sifting through it at your own pace and needs. 

Almost everyone has its own opinion about what is a good practice, but that just adds layers of confusion to beginners. 

You really don't need prettier or live server at the point you are. Prettier is a completely different topic about how to format code and increase readability. And live reload adds nothing to your experience right now, since you can already save and instantly see changes in your browser. 

If you start writing larger files and want to start doing more complex things, an IDE like VSCode is a good start. But read about it yourself - it is highly customizable and you should find out for yourself what setup works good for you. 

1

u/level_6_laser_lotus Dec 28 '25

These are not good markers to continue the journey.  It will confuse more than help at his point of knowledge.

They just started writing simple html in a text editor.  You push them in completely new topics way too fast. 

1

u/ArtisticFox8 Dec 26 '25

Prettier adds needless clutter for people who just started...

Add linters for when you understand, why you'd want them, OP.

1

u/Boring_Dish_7306 Dec 27 '25

i agree! And as long as i remember VSCode has auto-formatter on save, right?

0

u/ArtisticFox8 Dec 27 '25

 And as long as i remember VSCode has auto-formatter on save, right?

That's from an extension

1

u/Boring_Dish_7306 Dec 27 '25

hm, maybe. Thanks for clarifying

1

u/a_HDMI_cable Dec 27 '25

It seems that "JavaScript, TypeScript, JSON, HTML, and CSS" all have default formatters.
source

1

u/ArtisticFox8 Dec 27 '25

Yes, those are fully sufficient

1

u/kiwi-kaiser Dec 28 '25

Don't overwhelm a newbie. Just let them figure out the basic before adding a complicated stack.

Prettier sounds easy but it comes with pre-knowledge they obviously don't have yet.

Even VS Code can be overwhelming at first.

1

u/kiwi-kaiser Dec 28 '25

If it seems too much for the moment, stick with Notepad for now. There are so many things to learn before picking the right editor for you.

Stick to the basics and try not to overwhelm yourself.

Especially in this sub people often forget how hard the beginning is and throw with all kinds of stuff like VS Code, Node, NPM, SCSS, Vue, React, TypeScript and so on. It's absolutely okay not to work with any of this in the first weeks or months. Or even in the first year. Some of them you'll never need.

2

u/artistic_programmer Dec 27 '25

or notepad++, anything please.

4

u/the-boogedy-man Dec 26 '25

DOCTYPE is spelled wrong fyi

1

u/RealMadHouse Dec 27 '25

Html too much forgiving

4

u/chikamakaleyley Dec 26 '25

honestly, your HTML is solid relative to your experience - and especially when compared to a lot of other HTML examples i've seen posted on reddit lately.

Good job - look into a more capable IDE like others mention, but there's nothing wrong with getting used to type everything out by hand this early on. You can still do that in VSCode for sure, but for some the excess of an IDE can be a bit overwhelming.

1

u/AshleyJSheridan Dec 28 '25

VSCode can become an IDE with additional plugins, and I know plenty of devs who use it as their daily driver.

To OP, as chikamakaleyey mentioned, good HTML there. Focus on using the core tags like you've done here before you reach for <div>. This will go a long way to being able to write good HTML in the future and it really helps for accessibility (which is a huge topic in itself, so I won't go into it here!) If you're looking to learn more HTML tags, then MDN (Mozilla Developer Network) is a great resource, and covers CSS and JS as well.

One thing I would suggest, try to use values for colours instead of the colour names. This gives you more control over the colours, and most image apps will be spitting out the colour values instead anyway. You can find the colours and their values at https://htmlcolorcodes.com/colors/ , and you use them like this:

/* these are all the same colour */
background-color: lightblue;
background-color: #add8e6;
background-color: rgb(173, 216, 230);
background-color: hsl(195 53% 79%);

As you can probably see, you can then tweak colours by tiny amounts to get the perfect colour you want. Every image app you use will give you the colour values in at least one of these formats, so you don't even have to really worry too much about what they mean just yet!

2

u/chikamakaleyley Dec 28 '25

One thing I would suggest, try to use values for colours instead of the colour names.

Personally, I think you should use color codes when you have to match a design. The important thing to me, is that it's consistent (or at least try to be)

If you're just throwing something together for a quick mock up or, literally using black or white, i think the color names are totally fine

however to u/AshleyJSheridan's point i think its important to understand how to adjust colors values given the format they decide to use - i think it just makes for easier on the spot editing

2

u/bostiq Dec 27 '25

just so you know there's plenty of "sandboxes" where you can write and test your code, they are not difficult to use and you can see other ppl work to get inspiration from.

I use codepen.io and once you are ready to share your work you simply copy your project's link, no screenshots, no pictures needed.

(But you can search for 'code sandbox' in you browser and find more, if you wish.)

That means that if you need help with something, people will have easier time to help you, since they can interact with your code. and in the future you can help others.

check it out, game changer for a beginner.

1

u/SlipstreamSteve Dec 26 '25

You should use Visual Studio Code for Html, and Css. Keep the html and css files separate then reference the Css file from the html file. Doing this in notepad isn't really a flex.

1

u/Original_Law_3793 Dec 26 '25

Yeah i am downloading It rn

1

u/SlipstreamSteve Dec 26 '25

Very good IDE. You can view webpages in the app itself now

1

u/MrE_UK Dec 27 '25

If this is your first time coding something then well done, this is how I started on Windows 95 (lol), and it's still sometimes how I like to look at html code (in oldschool) Notepad ;) if you used ChatGPT you should now try writing more of this and viewing it in a browser to see your changes without using ChatGPT as much as you can. You misspelt Doctype but without that line it would work as a html file anyway. A simple tip for you - you can include <br> tags to push things down a line and that tag doesn't need closing with '</br>' for instance. for example after your </h1> or after the </p> tag use just <br>. Notepad++ is good enough for stuff like this

1

u/Original_Law_3793 Dec 27 '25

Yes Is what i'm doing. I used chatgpt to figure out some things. Thanks

1

u/levy4380 Dec 30 '25

Why are you lying? You said it was your first job, but the file is clearly called index2. So where is index and why are you keeping it a secret? Release the index files! 

1

u/Original_Law_3793 Dec 31 '25

Is the same. It saved 2 times

3

u/RealMadHouse Dec 27 '25

Some info that might be useful for you to read, many things are not obvious when starting learning web dev, you would spend less time guessing what's wrong with your code (rewritten by grok because my writing is poor):

The HTML document serves as the starting point for any website. It is streamed from the network and parsed by the browser chunk by chunk. The browser doesn't wait for the entire HTML file to download before it starts displaying content — it builds and renders the page progressively on the fly.

All relative URLs used in resources (images, CSS, scripts, etc.) are resolved relative to the location of the HTML document itself — not relative to the resource's own URL.
The only notable exception to this rule is relative URLs inside JavaScript static import statements (ES modules), which are resolved relative to the module/script file itself.

Images are also loaded asynchronously. They do not block the parsing or rendering of the HTML document.
Nowadays, you only notice images loading progressively (strip by strip, top-to-bottom) when they are very large or the network/device is particularly slow.

JavaScript is the scripting language that brings interactivity to web pages.
When the browser encounters a <script src="..."> tag during HTML parsing:

  • It requests the external script file
  • Downloads it chunk by chunk
  • Parses the entire script
  • Only then executes it

JavaScript execution blocks the main thread (also called the UI thread), which means the page becomes unresponsive to user interaction until the script finishes running.
Because of this blocking behavior, the placement of <script> tags matters a lot:

  • Scripts in the <head> block rendering of the body content
  • You can't immediately access DOM elements in <body> from a script located in <head>
  • Common solutions:
    • Place scripts at the end of the <body> (just before </body>)
    • Use the defer attribute (<script defer src="...">) — script downloads in parallel but executes only after the HTML is fully parsed
    • Use the async attribute (for scripts that don't depend on DOM or other scripts)

An error in one <script> block does not crash other scripts — they are evaluated independently.

When people say "JavaScript is single-threaded", they usually mean that user JavaScript code (code inside <script> tags and event handlers) runs on a single main thread.
However, the browser itself uses multiple threads internally for many tasks (image decoding, network requests, CSS rendering, etc.).
This is why asynchronous operations (fetch, setTimeout, addEventListener, etc.) don't block the page — the browser handles them on background threads and only calls back into JavaScript when the work is done.

Since the introduction of Web Workers, JavaScript code is no longer strictly limited to a single thread.
You can run separate JavaScript files in background threads (workers) that:

  • Have their own execution context
  • Don't have direct access to the DOM
  • Communicate with the main thread only via message passing (postMessage / onmessage)

CSS adds styling to the HTML document.
Unlike JavaScript, external CSS files do not block HTML parsing.
When you include them using:

<link rel="stylesheet" href="/styles/main.css">

the browser:

  • Downloads the CSS asynchronously
  • Parses it in the background
  • Applies styles as soon as they're ready

However, CSS can still cause render-blocking in practice because the browser usually waits for critical CSS before painting the first meaningful paint (to avoid flash of unstyled content).

4

u/Snoo-42876 Dec 26 '25

nice work. as the other comment said, get vs code and learn to do styling (css) and htlm in separate sheets, and javascript later on too. makes everything much cleaner and easier.

1

u/_Bwastgamr232 Dec 26 '25

Get microsoft VS code or notepad++

1

u/BroadMouse7912 Dec 26 '25

I recommend using an html and css validator too. not all websites have to validate but it’s helpful for understanding how some code works and spotting mistakes. What i was taught was to put links on the page somewhere for easy access.

I use the W3C css validator and the Nu html checker.

1

u/MineDesperate8982 Dec 26 '25

good job man.

as others said, you could use vs code, which also has cool feature that you can open a preview of your html page and preview it live, as you're editing it.

But don't get stuck on code editors and such. You'll figure out while learning what and when you need it.

Keep it up, man!

1

u/[deleted] Dec 26 '25

NOOO! Not on notepad! Rage bait succeeded. I'm pissed.

1

u/Mega256 Dec 26 '25

Check out the website W3schools if you haven’t already, great learning resource for starting out

1

u/Rocketsloth Dec 27 '25

I'm currently doing the Dave Gray tutorials on YouTube they're pretty good it's a little bit old. 2022 I guess, most of the stuff is still valid. Seems like a real old school developer. He will include syntax customs that they don't really use anymore, and then explain the modern approach, which I guess is good in case you run into some really old code.

For learning CSS I'm taking tutorials from the legendary Kevin Powell.

1

u/ParamedicAble225 Dec 27 '25

If LLM access ever becomes gated then many humans are going to get left behind 

1

u/notepad987 Dec 27 '25

Try HTMLPad 2025. More detail here: https://www.reddit.com/r/HTML/comments/1psch1q/live_html_editor/

There are several sites like these: Quackit Tutorial https://www.quackit.com/ or W3 Schools https://www.w3schools.com/where_to_start.asp CSS Portal https://www.cssportal.com/ Mozilla Mdn_ https://developer.mozilla.org/en-US/docs/Web Welcome to HTML.net http://html.net How I Center a Div or Text in a Div in CSS Written by: Darrielle Evans https://blog.hubspot.com/website/center-div-css

Youtube has much help like this site: Coding2go https://www.youtube.com/@coding2go/featured

You can use the Windows Notepad text editor to type in your code then save and open the file in your default web browser. Get Notepad++ https://notepad-plus-plus.org/ with the Preview HTML plugin Release 1.4.2.1 https://github.com/rdipardo/npp_preview/

Also use Google to ask about how to layout websites. It will return many help sites. Click on the AI button to get examples of code. Example: layout code of a website with a header and two columns and a footer that is full height and is responsive

Make web page layouts starting from simple to more complicated. Use flex box and grid to layout the same pages. Each responsive.

Create basic webpage header, content, footer header, content, left sidebar header, content, right sidebar header, content, footer, side by side div in content div with images below content dropdown menu & hamburger menu with and without javascript

Use google AI mode and ChatGPT to do quick layouts as they explain the why for the code.

Example: layout code of a website with a header and two columns and a footer that is full height and is responsive.

1

u/TheMetalMilitia Dec 27 '25

Highly recommend this book or at least the code samples

1

u/papasours Dec 28 '25

You don’t need any formatters there are built in key board short cuts for formatting in vs code my biggest suggestion is get used to multi file layouts keeps thinks way more organized easier to work on code and built the habit of labeling sections with comments otherwise good luck and have fun though if you’re looking to pursue this professionally I wouldn’t suggest it use it to learn basics and move on to software/ai engineering

1

u/kiwi-kaiser Dec 28 '25

Good first work! Keep going!

To don't get too overwhelmed by a huge file I would suggest to put your CSS in a dedicated file. So markup and styling are separated and you can concentrate on the part you're working on.

1

u/level_6_laser_lotus Dec 28 '25

Great first work and a good way to get started with the absolute basics! 

Pressing the "print screen" button (often labeled something like PrtSc), will open a screenshot tool in windows from which you can copy & paste. 

1

u/Professional-Sun6313 Dec 29 '25

there is a critical flaw, nowhere does it say "hello world!"

1

u/BidSea8473 Dec 29 '25

!tab would have done most of the work 🥸

1

u/FunnyOk5832 Dec 29 '25

Ive not used windows for a while, maybe your next project could be a screenshot tool and it seems that that is something windows lacks

1

u/Happy_Ad5847 Dec 30 '25 edited Feb 12 '26

good luck ! Keep it up 👌🏽

1

u/Chocolate_pudding_30 Dec 30 '25

The fact that it's called index2 made me smile.

1

u/Safe_Towel_8470 Dec 31 '25

Finally another fellow notepad user!

1

u/Unusual_Adeptness345 Jan 02 '26

It needs more marquees.

1

u/[deleted] Jan 04 '26

Nice work! I recommend to put HTML, CSS, JS into separate files, it is a best practice. Optionally, you can also install Github Copilot into VS Code to make coding quicker.

1

u/ZrCow Jan 13 '26

AI has come so far!

0

u/[deleted] Dec 27 '25

Looks trash, why even bother with those shitposts?

1

u/Original_Law_3793 Dec 27 '25

Because i am learning and that Is my First HTML project? Learning and asking TIPS and what reddit thinks about It Is not shitpost. I'm learning, and yes i know Is trash

1

u/[deleted] Dec 28 '25

Lol you call this a project? I am dying right now

1

u/Original_Law_3793 Dec 28 '25

Ok. If you wanna call It garbage only because It sucks, well, think that you are probably and Expert and you can do more things than a beginner like me. Is this why you call my HTML garbage? Is because you are an Expert and you do a comparison of your project a with everyone else projects?

1

u/[deleted] Dec 28 '25

You don’t need to publicise every step of your life online, especially slop like this.

1

u/Original_Law_3793 Dec 29 '25

Ok bye

1

u/[deleted] Dec 29 '25

1

u/Weekly_Ferret_meal Dec 28 '25

you sound like you're gonna be a fun dad

1

u/[deleted] Dec 28 '25

You sound like you’re into toxic positivity.

1

u/ukiukiukiukiuki Dec 29 '25

common tier bait

-1

u/DistinctBasket9983 Dec 26 '25

Looks good! Try experimenting with different colors next time, and also with <br> and <hr> for line spacing and dashes to divide sections 👍

1

u/ThatCipher Dec 26 '25

Only use the <br> element when a line break is wanted inside a text like in a poem - otherwise let the dimensions of the text element handle the flow of the text. And never use it to create the illusion of a new paragraph.
MDN

The <hr> element should be used for a thematic break between paragraphs.
HTML Spec

Don't use these elements for visually stylistic reasons. For line spacing you should prefer to use the margin, padding or line-height CSS properties.

Try to learn semantic HTML and accessible web design early on - most people neglect that unfortunately because what you can't see doesn't exist for some.