DEV Community

Cover image for Creating a live HTML, CSS and JS displayer

Creating a live HTML, CSS and JS displayer

Kavya Sahai on January 15, 2025

How does one one learn web development you may ask? Simple answer, by building projects. Even if you don't know anything in HTML, CSS and JS; follo...
Collapse
 
we_kese_a887363c59609aae7 profile image
We Kese

Why is bro stealing my ideas? I was writing a post on it only 😭

Collapse
 
kavya-sahai-god profile image
Kavya Sahai

Doesn't seem to be a very novel idea to me

Collapse
 
we_kese_a887363c59609aae7 profile image
We Kese

When's the next post in the series coming? I can't waitt

Collapse
 
kavya-sahai-god profile image
Kavya Sahai • Edited

Ahh planning is going on for it. The topic has been decided, but the methods are currently in thought. I want to introduce new concepts while reinforcing the previously taught ones; but that takes a lot of energy.
Honestly, planning the post, the topic, the methods to be used, and how to present that takes most of the time, more than writing the code itself.

Collapse
 
bobbyleex profile image
BobbyleeX

Great work

Collapse
 
kavya-sahai-god profile image
Kavya Sahai

Thank you

Collapse
 
peshale_07 profile image
Peshal Bhardwaj

explaining each line. wow 👍🏽

Collapse
 
kavya_655bd7b08c9f0e93601 profile image
Kavya • Edited

I have recommendations to improve the content of this series. Although, you have done your best implementing these may help :D

  • More Introductory Explanation: Add a very brief introductory lesson on the fundamentals of HTML, CSS, and JavaScript before diving into the project. This might involve simpler examples that don't use too much jargon.
  • Step-by-Step "Explanation" of the HTML Structure: Break down the example HTML structure a little bit more and explicitly define the different tags, attributes and elements, with brief explainers about their roles.
  • More CSS Examples: Consider showing more explicit examples of CSS selectors and basic styles that target common elements.
  • Simplify JS Explanation: The JS section needs more explicit explanation of concepts like DOM selection, event listeners, and functions, in an beginner friendly manner. Instead of a complex code block, break down each portion with an example to help beginners understand the purpose of each section of code.
  • Introduce Debugging Basics: Include a brief section on common errors beginners might encounter and how to debug them (e.g. using browser developer tools).
  • Provide Interactive Code Snippets: Embed interactive code snippets that can be run within the article, where beginners can make small changes and see the results.
  • Introduce concepts Gradually: Introduce complex concepts like debounce much later in the article, and provide a simpler explanation when you do.
  • Break up Text: The wall of text could do with more breaks and spacing, to make it more readable.
Collapse
 
kavya-sahai-god profile image
Kavya Sahai

Yeah, I definitely do understand your thoughts over here. Ngl, your comment seems very structured, more like an LLM, but am not going to accuse anyone rn.

You did not consider the fact that some intermediates and advanced web devs also see this post, and if it is made only for beginners, people who already know the basics, will bounce, potentially leaving or not understanding the good things which they need to know, which I had covered.

Especially, intermediates are very picky with what they want to learn, and if you don't cater that quick enough, they'll say "I already know this, Imma leave this now."

I tried my best to introduce concepts, without making the intermediate and advanced audiences feel bored. Didn't notice, you had the same name. haha.

Collapse
 
ripon52 profile image
Ripon Uddin

Great. Can you please share the Github Repo of this ?

Collapse
 
kavya-sahai-god profile image
Kavya Sahai

Definitely. Here it is: Github Repository