/r/HTMLBattles

Photograph via snooOG

This subreddit is what it sounds like, use the software of your choice to edit (or create) websites in a battle to the... umm... actually never mind.

F.A.Q

  • Want to learn how to edit the text in a website? Then click here.
  • Want to learn how to edit images? Then click here.

Rules

  • Use the NSFW tag generously when posting and commenting.
  • Please do not use image editing software such as Photoshop*.
  • All top level comments must be submissions.
  • All comment submissions must be posted as pictures**
  • All text posts must be marked as META
  • Only use the OC flair for completely original content
  • It is recommended to upload OC content as a *.html file instead of just submitting a screenshot.

Want to learn HTML, Javascript or CSS?

Check out these links

Related Subreddits

/r/mspaintbattles
/r/html
/r/ProgrammingBattles /r/photoshopbattles

*Clarification: You may use Photoshop (or your image editor of choice) to edit images on the website as long it is inserted into the website using HTML/CSS/JS

/r/HTMLBattles

635 Subscribers

1

CSS adjustments to show a missing element

Hello,

I'm trying to create a catalog with a specific template using a custom app integrated with Shopify and the title isn't shown but the issue is fixed when I print the catalog to PDF file.

The problem is with font size and adjusting CSS of text position on this template.

My question is which adjustments to make in the CSS file, so I could show the missed part.

Please, see the capture screen below:

https://preview.redd.it/fgkln1sd2k981.png?width=836&format=png&auto=webp&s=6521cd230db84d68ed0787b94d79e684c23a239a

https://preview.redd.it/z1ncq7hh2k981.png?width=831&format=png&auto=webp&s=e61bf29a11de0081d5de8eb81a2ca92255dfaae9

0 Comments
2022/01/03
23:15 UTC

0

How to use owl-carousel in HTML in Hindi [2022]: Complete Guide - Web Tutorial Hindi

In this article we will know about how to use owl-carousel in HTML in Hindi. If you want to get information about owl-carousel in HTML then this article is for you.

0 Comments
2021/12/29
10:46 UTC

4

HTML is the best thing ever

Color Tile Game

The above link takes you to a color game which I had created ila few years ago, the idea is to select the color that will be formed when three colors RED, GREEN and BLUE are mixed in certain percentage. It was made with basic html, css and js website hosted in GitHub itself.

Recently, I was super bored doing react and angular and due to lockdown I had plenty of time. So I decided to rewrite everything from scratch using HTML and adding a few features like login for my friends so that we can store our past gameplays, also a leaderboard to keep track of who is doing better.

To my surprise, a small project like this is super easy to make without any frameworks and I enjoyed Coding something where I understood everything and there wasn't any magic happening 🤩

It took me almost 4 days(3hr/day) to complete the project. The current implementation is much more better than previous one, the codebase is readable, modular and neat. I have also worked on the UI to make is more user friendly by using flat colors.

If anyone is into front-end development I love to hear your feedback on this app.

Repo link: Github

If you like the repo, do let me know by 🌟 ing it 🤓

Note: you don't have to login, that's for my friends only ✨

0 Comments
2020/04/07
18:57 UTC

2

Sublime vs?

I am new to HTML but have managed to do quite well so far. I have created an HTML signature to use for my company and was getting very frustrated with Mac TextEdit. I downloaded Sublime but now have been prompted to purchase a license.

I have no problem paying for something I use, however, I'm wondering if there are alternatives out there similar to the user friend interface? The only thing it's lacking is a run feature.

4 Comments
2018/01/03
07:01 UTC

1

(HTML question) How do I make Firefox focus the first tab when this HTML is opened. Right now, it will focus the last tab, not the first. (besides browser.tabs.loadDivertedInBackground in firefox config)

<html> <head>
<title>New York Times - Breaking News</title>

<script type="text/javascript">

    var urlMap = [

        // Sunday

        [

            'https://newrepublic.com/'


        ],


        // Monday

        [

            'https://www.nytimes.com',

          ],

        // Tuesday

        [

            'https://www.nytimes.com',

         ],

        // Wednesday

        [

            'https://www.nytimes.com',
       ],

        // Thursday

        [

            'https://www.nytimes.com',

        ],

        // Friday

        [



            'https://dailynous.com/'

        ],

        // Saturday

        [

        

            'https://dailynous.com/'



        ], ];





    var todaysUrls = urlMap[new Date().getDay()];

   Array.prototype.forEach.call(todaysUrls , function(url, i){

        if (i === 0) {

            location.href = url;

        } else {

            window.open(url, '_blank');

        }

    })

</script>
</head> <body> </body> </html>
1 Comment
2017/07/20
12:36 UTC

4

How to make a sidebar menu?

How would I make a sidebar menu? If you dont know what I mean, Look at youtube. To the left, there is the subscriber scroll thing. How do I do that kind i Of thing?

0 Comments
2016/10/04
22:52 UTC

2

Remove Facebook, Twitter, Pinterest, G+, etc... buttons from webpages. Greasemonkey?

Howdy... I'd like to get rid of every 3rd party button to some social site that sits atop every article I read on the web. Is there a greasemonkey script for this? If this isn't the place to ask, where should I post this? Cheers.

1 Comment
2015/01/21
22:04 UTC

7

Official November Battle Thread. (Reddit Gold for the winner)

 

###Welcome to the first official Battle thread! Since this is the first ever one let me thank everyone who has/will contribute(d). Thank you for helping the subreddit grow. The rules for this battle are written below make sure you read them carefully.The winner of this battle will receive 1 month's free Reddit gold courtesy of mod /u/no-goodusernamesleft. The contest will run until the 1st of December when a winner shall be chosen by the mods. Good Luck!.

 



 

 

###**The Battle shall be upon the battlefields of Amazon.com Any local version of the website is fine, .es .uk etc. But all edits must be in English.

 

 



  ###The Rules

  • All text edits must be in English.

  • Submit your entry as a comment to this thread.

  • You must take a screenshot of the edited website since our live html editor isn't ready yet.

All images must be uploaded to imgur. If you absolutely need to upload to another site. Message a mod first.

  • To vote for an entry, just upvote the users comment.

You can vote for as many different entries as you want, but please do not downvote. Downvotes will not be counted when deciding winners.

  • Only accounts older than when the post was created are allowed to post.

  • Contest mode will be enabled.

  • Please be sure to tag NSFW entries appropriately.

 

3 Comments
2013/11/23
12:03 UTC

10

(A **VERY** basic) Guide to Editing Images.

Well you learnt from the previous sticky how to edit text on pages and you want to know how to edit text?. Well sorry you've come to the wrong place...... Just kidding,really i was..honest.

You will need:

  • Chrome (Firefox's inspect element does have anyway to open all nodes)

That is all!

Method.

1.Lets go on to the BBC News Website. This is how it looks at the time of posting. Politics ZZZZ boooring. Lets make this a lot more interesting why don't you say?.

2.Find a image on google. Any image i'm quite partial to cute dinosaurs,sue me and right click on it to get the menu shown on the image. Click on copy url. Now hang on to that.

3.Find the image you want to change and right click on it then click on inspect element to open this this opens chromes inspector. The highlighted line contains the URL that boring image of Westminister. Lets replace it.

4.Can you see where it says <img src=" ? the " " contains the URL, double click on it to edit it. If it opens the image on the resources tab, try clicking on the parenthesis (" ") not the link.

5.Remove the image URL then past the link you copied from google. Press enter or click outside the inspector box and your done.

6.Ive got mild OCD so i'm going to change the title too. Use this power wisely young padawin.

15 Comments
2013/11/08
23:04 UTC

14

(A **VERY** basic) Guide to Editing a website

Let's say that your pissed of at that LeeringMachinist guy because he used the wrong form of your and you proabably want to teach him a lesson. How about editing the front page of Reddit to make it look like everyone hates LeeringMachinist.

You will need:

  • Chrome (Firefox's inspect element does have anyway to open all nodes)

That is all!

Method:

  1. Start out by going to the front page and right clicking on an empty space.
  2. As usual a dropbox will appear; now click on 'Inspect Element'
  3. A module should appear at the bottom of the screen and it should look something like this.
  4. As you can see the top post on my Reddit homepage is 'Dude makes these at the local diner... (x-post from r/stlouis)'. To edit this, copy the title of the top post, click on the Inspect Element module, press CTRL+F and then paste it.
  5. Now that you have found what you want to edit it's as easy as doubling clicking what was there and replacing it with what you want.

Firefox (and maybe Safari) Method

You will need:

  • Firefox
  • Notepad

Method:

  1. Start out by going to the front page and right clicking on an empty space.

  2. As usual a dropbox will appear; now click on 'View Page Source'

  3. A new window or tab will appear and it should look something like this .

  4. Press CTRL+A to select all and copy/paste it to a new notepad file.

  5. As you can see the top post on my Reddit homepage is 'Dude makes these at the local diner... (x-post from r/stlouis)'. To edit this copy the title of the top post, press CTRL+F, paste it and press find next.

  6. Now that you have found what you want to edit it's as easy as deleting what was there and replacing it with what you want. Be careful not to delete the ><

  7. Now you're going to want to hit the save button, delete the .txt extention and type in anything.html

  8. Open it in your web browser to see your result.

Here's how mine turned out
Post your results in the comments

If you want to learn more about HTML I would reccommend visiting Mozzila Dev Network 'Learn to make a website page', and if you ever have any difficultly the good guys over at /r/html will help you out!

5 Comments
2013/11/05
00:48 UTC

Back To Top