Leaderboard

Hi I’m Will from Tasmania. I’ve used W3Schools for a long time but I think this is the first time I have asked a question here. I know what a Web App is broadly speaking. I am trying to create a really simple one that I can use offline - on my iPad. I have a working page that does what I want and I can add it to the iPad homescreen. All it does is present a list of links with images and pass to the shortcuts app a url with the choice made. HTML, CSS and some PNG image files. But I can’t get it to work offline. I know Apple and Google have very different approaches to web apps. I’m only concerned with the Apple way for my purposes. Can anyone point me to information on how to do this? Preferably with examples?

Great! If you already have a language under your belt, learning front end stuff will be easier. I do a lot of PHP coding as well. Sometimes I know how to do something in PHP, but not Javascript. So, I'll ask Perplexity.ai and provide a sample PHP snippet of code and ask: "Is there a way to do this functionality in Javascript?" and it will provide sample code to test. I'm at a point now, where I want to focus on the logic of the code, and not get bogged down doing low-level UI stuff. That's where 3rd party libraries and frameworks like node.js or vue.js come in handy. My next big leap is to learn how to use these tools. I'm also looking into Socket runtime https://socketsupply.co/guides/ for networking my apps. Keep going with your coding! You'll get there.

Hi, You're welcome. I'm glad that the code was helpful. I wrote this code over a period of a few weeks (on and off). I would just work on it a little at a time. I started by studying the To Do List on the W3 Schools example. I liked it a lot. But, I wanted to make some changes. So, I began by downloading their code and then adding my own functions to it to make it do the things I wanted to see. I have also been learning Bootstrap so it was a good chance for me to practice with that too (e.g. layout and modal windows). I'm still around on the forums occasionally, but, I get busy with stuff. If you have any questions you can post them here and I'll try to help when I see it. Other people in the forum might chime in and help answer your questions too. Javascript, like any other skill, is something you learn over time and build on. When you are studying math, you can't jump right into advanced level mathematics and expect to know how to do it. You start with the basics (addition, subtraction, multiplication) and work your way up slowly. Each concept you learn builds on the previous concepts you've learned. Believe it or not, I knew almost nothing about Javascript or front-end UI development 3 years ago. I decided I wanted to learn how to do it and have worked my way through all the HTML / Javascript / CSS lessons on W3 Schools. I think that the trick is to just do it. Start off with some sample code. Then, keep working on that sample code and changing it until you get it to do what you want. Studying text lessons is great for overall knowledge and understanding. But, until you get your hands dirty and dive into the code, it won't make any sense. Once you start writing the code then the things you've read will make sense. "OH! So, that's why I can't do it this way! I get it now!" I am one of those people who is very anti-library and anti-framework. I don't really use Node.js or external 3rd party libraries. I try to do everything in HTML with vanilla Javascript. But, as I have gotten more advanced in my coding, I can see how certain things save time. (Example: Jquery, or Bootstrap, or 3rd party libraries like "Sortable.js"). I started writing the drag-and-drop functionality in my To Do List so that it works on mobile. But, it was very complex and taking a lot of my time. I eventually decided to look and found that Sortable.js already existed and worked well. So, I implemented it into my To Do List rather than writing all the code myself from scratch. But, try some ideas of your own! I would begin with the original example from here: https://www.w3schools.com/howto/howto_js_todolist.asp Make sure you understand how it's working. And what's going on with the code. Then, after you understand that, you can expand your knowledge to focus on things like "reading / writing to local storage", "working with JSON data", etc. I would start with one feature at a time though. Pick something you want the To Do List to do. (Example: "I want to be able to have categories for my To Do items") Then, start with the original HTML / Javascript / CSS and try to add that one feature. If you can do that, then you can add other features. But, just try to break it down to smaller components and focus on one thing at a time. Don't get overwhelmed by looking at everything all at once. There are also great AI tools like https://perplexity.ai out there you can use to help you find resources. I like to use AI tools like this to prototype apps. I describe my idea to the AI tool which generates a basic framework to start from. Then, I expand and improve on the code. But, be careful, because AI tools are not "smart" nor do they really understand things. You have to know enough about HTML / Javascript / CSS to know when the AI tool is making a mistake (or suggesting something that won't work). Use logic and deductive reasoning on your own and don't rely on the AI tool to do all the work for you. If it says something wrong -- tell it that it's wrong and ask it to fix the problem. Using tools like this, I am able to quickly go from idea to working code. Then, I just keep refining and improving it. Also, DON'T FORGET TO MAKE BACKUPS! I like to do a lot of iterations of my code. I have "test1", "test2", "test3", etc. Back up your work regularly so that if you accidently undo or break something you had that was working you can go back and find the back up copy and restore it. Sometimes my dev folders are a giant mess because I like to test a lot of different ideas. The best thing to do is create a new sub-folder and give it a descriptive name (e.g. "category-test"). Having a good dev environment makes things easier too. On my Windows 10 laptop, I'm running: 1. Uniform Server Zero (WAMP server) 2. Visual Studio Code I also prefer Chrome-based browsers (e.g. Vivaldi) for developing. But, I also test in Firefox and Microsoft Edge. I hope this helps? Good luck with your coding. Let me know if you have any specific questions about my To Do List code.

Here, I've updated the code to use flexboxes. Replace your CSS file with this. The part that was causing trouble was the logger, because it needs to fit properly within the height of the footer at the same time that the footer has to fit in to body, so they each need their own flexbox arrangement. *{ box-sizing: border-box; overflow-wrap: anywhere; } html, body{ width: 100vw; height: 100vh; padding: 0; margin: 0; } body{ --hdheight: 1.5em; --navheight: 1.5em; --ftheight: 6.5em; --wth: 40em; display: flex; flex-direction: column; align-items: stretch; } #header{ font-weight: 600; height: var(--hdheight); background-color:yellow; flex: 0 0 auto; } #nav{ height: var(--navheight); background-color:greenyellow; flex: 0 0 auto; } #main{ overflow: auto; flex: 1 1 auto; height: 100%; } #footer{ height: var(--ftheight); flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; } #footbar{ width: inherit; height: 1.5em; text-align:center; background-color:forestgreen; flex: 0 0 auto; } #logger{ background-color: #111; color:antiquewhite; overflow: auto; height: 100%; flex: 1 1 auto; } button{ background-color:coral; border-color: coral; border-radius:0.5em; box-shadow: 0.2em 0.2em #ccc; text-indent: 0.25em; vertical-align: middle; } .btn{ display: inline; background-color:antiquewhite; border-color:beige; border-radius:0.25em; box-shadow:none; text-indent:0; font-weight:500; height: 1.5em; box-sizing: border-box; vertical-align: middle; line-height: 0.25em; } .inputbox, .outputbox{ width: var(--wth); padding: 0.5rem; margin:0rem 0rem 0.5rem 0rem; } .inputbox{ border:1px solid black; border-radius:0.25rem } .outputbox{ background-color:darkblue; border:medium dashed chocolate; color:bisque; }

The #logger element doesn't have a fixed height, so the scroll bar on it doesn't do anything. If you remove the overflow from #logger and put "overflow: auto" or "overflow:scroll" on the #footer instead then it will scroll correctly.

Hi, I have been working on the design of this website https://www.mockofun.com and I would really like some constructive criticism. What do you think about the logo, the blue & orange color combination, the fonts, etc? Do you think the design is too busy? Thank you in advance!

A lot of questions asked here in this forum can be answered simply by reading the tutorials, and most often what people are asking are actually examples in the w3school main website. Some questions are even extremely similar, but yet people ask the same questions all over again.That "please-read-the-tutorial-first" message pinned at every forum apparently DOES NOT work.I firmly believe that this forum is created to answer questions that the w3schools main website does not answer.I do not have a solution for this. But this would just serve as a precaution. Because basically when this forum grows. Then a lot new topics will be started.Then probably, we will be reading a bunch of repetitive questions being asked all over and over and over again.And please forum members, please dont post for the sake of increasing your post count. Post for the sake of answering questions being asked.And if you wish to promote your website here, we cant/wont stop you with it, but please do it in an ETHICAL way. There is no excuse for not having any manners/ethics.And lastly, this forum, in my humble opinion, is used for answering questions (or some code snippets) not for asking for full/complete scripts.This is just my opinion. You might think i'm wrong, but really i think i am right with this one. You just have to agree with me here.

If you set the margin of the <ul> element to zero it should remove the space between the divs. The <h1> margin also has an effect and might also need to be set to zero.

Hello coders, I have been coding for a while now and I learned most of the coding from W3Schools and YouTube. I have built the following blog using PHP and MySQL. Here is the website: https://farrisblog.farrisfahad.com/ I am also selling it on CodeGrape if you are interested: https://bit.ly/3vZ1lN9 Let me know what you think Thank you, Farris

Good day Please advise if I get full lifetime access to the Data Analytics Certification Course from W3 Schools once I purchase it? Regards Rob3RT

Having a marketplace is a good idea. But, the market is pretty saturated. Some developers have luck selling things like WordPress themes and plugins. There are sites out there which allow you to sell code. But, there's so much plagiarism and theft that it's almost impossible to stop people from stealing your web code. As soon as you stop one person from doing it, 5 new ones pop up. I think that a lot of devs do good by offering free versions of their stuff to gain an audience and then sell your services to customize it for people who are unable (or unwilling) to do their own coding. I think a marketplace of available coders would be cool (like Fiverr). But, since web code isn't compiled, it's hard to stop people from stealing it and reselling your work as theirs. It seems like the money is in the customization of your code -- not the direct sale. Make it open source and then charge people to customize it.

Hello, Currently, we have a button with a specific CTA that applies to all brands on our website. What we would like to do is change what this CTA says along with the link destination but only for one specific brand. All others should remain how they are currently. We are working with Razor and partials which makes this a little more complicated. I have the two buttons set up: <div class="GNEPdpCTAButtonWrapper"> <div> <div class="GNEPdpCTAButtonsB"> <a class="btnPri" href="/dealerlocator@(brandParam)" target="_self">Where to Buy</a> </div> </div> <div> <div class="GNEPdpCTAButtonCEI"> <a class="btnPri" href="https://www.ceisupply.com/" target="_blank">Buy Direct on CEISupply.com</a> </div> </div> </div> But targeting the brand and tying that to which button shows is a little beyond me. There are several areas within the code where "brandName" is present. Before I add more code to this ticket I wanted to know if I am posting the code properly so as not to overly annoy anyone. [{ 'id': '@Model.Sku', 'name': '@Model.Name', 'price': '@Model.ProductPrice.PriceValue', 'brand': '@brandName', 'category': '@categoryName' }] Essentially I am looking for: if brand = CEI show this and display none to the original button I can provide more code information if someone is interested in helping me solve this. Thanks in advance for any assistance

Hi, I like the layout of your blog. Very modern and clean looking. I also like the dark theme. Very nice!

I humbly appologize, it was an error in my code that was preventing this from working - moderators: please feel free to remove 🫣

$(".foobar > div").eq(0).remove(); $(".sec").prev().remove();

Yes, that's about right. Only one of the values can be selected at the same time, so there's only ever one value associated with the name when the form is submitted.

There is some information available in the reference. Here's the description of the list attribute which specifies that it expects the id of a <datalist> element: https://www.w3schools.com/tags/att_input_list.asp <input> elements without a type attribute are always assumed to be text inputs by browsers. It's mentioned in the reference page as well: https://www.w3schools.com/tags/att_input_type.asp

The content at the bottom of the page has to be manually put there by you, then you can have links that point to it using the #hash part of the URL In your page content your code should look like this: <abbr title="InterPlanetary File System">IPFS</abbr>^{<a href="#reference-1">1</a>} Then you have to add this to the references section of your page. The id attribute has to match the href of the link above. <h2>References</h2> <ol> <li id="reference-1"><a href="https://wikipedia.org/wiki/IPFS">IPFS on wikipedia</a></li> </ol>

In the two places where it says padding: 14px 16px; replace 14px with a smaller number.

There's no need to memorize anything. You just need to understand enough to know what to look for when you need it.

I'm 81 yo, retired as CIO for a multi-state bank. Wrote my first mainframe code in the early '70s. Progressed through the ranks from programmer, to project leader, to analyst, to project manager and eventually to CIO. I haven't written code in a long time although I did create a web page for my high school class about 15 years ago using HTML/CSS/js. I'm trying to get my hand back in intending to create a family web page. I'm working my way through the W3c Schools tutorials. I don't intend to do any certifications 😂 I intend to make good use of this forum by picking your brains when I run into problems I can't find answers for or can't figure out. Be kind to an old man, please!

Find the position of the substring, then get everything up to that position. let pos = document.URL.indexOf("#blah"); let address = document.URL; if(pos >= 0) { address = address.substr(0, pos); }

I first went on W3Schools around 2014 to learn HTML and a bit of Javascript. Back then, there were only tutorials on web programming languages. Therefore, I went to learn programming languages on tutorialspoint but the quality of their tutorials aren't that great, although they have a quite large library. I only came back to W3Schools around 2021 or 2022 and noticed that programming languages such as C, C++, C#, Java and Python were added as tutorials and I found them far better than those at tutorialspoint. Though, it is a shame that W3School's library isn't as large as tutorialpoint's. That is why I'm suggesting that creating a tool to allow the community to create custom tutorials would be an excellent addition to this website. Let's say that, for instance, I wanted to create a Lua tutorial. If it hasn't been created by the community yet, I could create it and anyone could contribute to it. If at some point, the staff reviews the tutorial and judges that the quality is good enough, they could decide to make it official. Such a tool could greatly improve the user experience and expand the library of tutorials on this website. What do you guys think?