Web App Tutorial – JavaScript, Mobile First, Accessibility, Persistent Data, Sass

Wordpress sites

In this tutorial, we will build a to-do list app with HTML, SASS / CSS, and Vanilla Javascript. Our to-do list web app will be responsive with mobile first in mind. The to do list app will also be built with accessibility (A11y) in mind for keyboard navigation and screen readers. We will also use the Web Storage API to create a persistent data store so our list items reappear any time we visit the web app.

πŸ“Ί Tutorial by Dave Gray. Check out his YouTube Channel:

⭐️ Course Contents ⭐️
⌨️ (0:04) Introduction / App Outline
⌨️ (1:24) HTML foundation
⌨️ (12:24) SASS / CSS styles
⌨️ (50:05) JavaScript Classes
⌨️ (57:25) JavaScript Functions
⌨️ (1:41:53) Testing the Accessibility features
⌨️ (1:45:56) Code clean up and enhancements for A11y
⌨️ (1:59:40) Testing the fixes & enhancements for the app
⌨️ (2:00:55) Wrap-up: How do you want to improve the to do list app?

πŸ“š Further Reading:
πŸ”— Official SASS website:

βœ… Follow Dave here:
πŸ”— Twitter:
πŸ”— Reddit:
πŸ”— LinkedIn:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

32 thoughts on “Web App Tutorial – JavaScript, Mobile First, Accessibility, Persistent Data, Sass”

  1. Thanks to Beau and everyone at freeCodeCamp.org!

    ▢️ Check out my channel for more: youtube.com/DaveGrayTeachesCode

    1. Not sure if anyone gives a damn but if you guys are stoned like me during the covid times then you can stream all the latest movies on InstaFlixxer. Been watching with my gf these days xD

    2. @Gibson Ahmed yup, have been watching on InstaFlixxer for since december myself πŸ˜€

  2. Awesome video Dave, greatly explained everything, haven’t really seen someone using javascript this good, like creating classes and reusable functions…really really liked your contentπŸ’–

  3. This is a great example of splitting the functions up so its cleaner but feel it’s N overkill for this type of app and could be coded much simpler. Just my opinion but I do love the way he shows us how to code a class based structure

  4. Fantastic. Thank you. The javascript itself is a bit beyond my skill level at this point. What I would love to add is sub-items. No idea how I would go about that.

    A few things didn’t work for me on my pc setup. It might be because I am in Linux instead of Windows.
    – Firefox did not display the styled checkboxes (just the default look). The styled checkboxes displayed correctly in other browsers.
    – Installing the Chrome Vox extension in Chromium, the voice (oddly, as it seems to be the point of the extension) did not work. Just got sounds on clicking tabs, etc.
    – Could not find the Live Sass Compliler in the vs code extensions on the vs code version I have installed. However, I already had Sass on my system previously, and just manually (command line) started the sass watch command.

  5. Hi, Dave. Thx a lot for the awesome tutorial. I use the same extensions for VS like you introduced. But by me the viarables are white not color. also some key words like document, localStorage, event are white. Do you know what’s the reason for it? Because i get a problem by doing the same as you. so maybe something is wrong. can you give some advice? the second question is why do you underscores by using this. thx

  6. Thanks for the tutorial! I had 2 issues at the end that I can’t figure out my problem. I have triple checked every single line comparing main.js to my VS Code and I’m 99% sure they are identical.

    1. My clear button does not clear my list when I click on it.
    2. The very last function updateScreenReaderConfirmation displays a message on my screen “eggs removed from list” instead of having the voice work.

    Any tips in the right direction would be appreciated!

    1. Hi, without seeing your code, I cannot help much. The clear button code does work. I’d suggest comparing that section of your code to the video again. The very last function should be updating a paragraph element that is styled to display offscreen. If it appears onscreen, you are missing that styling.

  7. How different is the event “readystatechange” coded for the App Launch from “DOMContentLoaded”?

  8. Hey Dave I am getting error message in chrome where it says Acess to script at main.js from index.html:1 origin ‘null’ has been blocked by CORS policy.

    1. You must run a local dev server like the Live Server extension to use JS modules. I’m guessing that is the reason for the CORS error. You must also have type=”module” in your script tag.

  9. Thank you very much for the great video. May Allah, the almighty, grant you health, wealth, happiness and every good thing. Amen

  10. Is there a repository or somthing to check the code? I am following the tutorial yet I messed up in something and my app doesn’t work

  11. I appreciate your charisma and presentational style, and your commitment to accessibility!

  12. This was a great and highly useful tutorial. Thanks for the hard work. That said, I imagine it would save people a lot of debugging and trouble shooting if the code was made available on github to reference.

  13. Hello Dave , thanx for the great work we do really appreciate your insightfull tutorials like this one, however, i have encoutered an error in main.js @add listeners, the compiling returns with an UncaughtType errorr of
    cannot read property addEventListener to null

    const itemEntryForm = document.getElementById(“itemEntryForm”);
    ————> itemEntryForm.addEventListener(“submit”, (event) =>{

    could you please enlighten me or anyone on this forum how to rectify this ?

Comments are closed.