HTML & CSS

LIST OF TEXT FIELDS IN HTML CSS <input type=”text”> Generic text field. Take note, single line only. <input type=”email”> Email. <input type=”tel”> Telephone number. <input type=”url”> URL. <input type=”password”> Password. <input type=”number”> Numbers only. <textarea></textarea> Also a text field. Take note, multiple lines accepted.

Welcome to a tutorial on how to create a simple typewriter effect with HTML and CSS only. Yes, you read that right. It is possible to create a typewriter effect using only CSS, not a single line of Javascript – Read on for the example!     TABLE OF CONTENTS Download & Demo HTML CSS

Welcome to a tutorial on how to set smooth scroll in HTML and Javascript. So you want add a “nice scroll effect” to your project? The easiest way to enable smooth scroll is to change the CSS scroll behavior property – html { scroll-behavior: smooth } Yep, that’s all it takes. But let us walk

BASIC HTML FORM <form target=”_blank” action=”dummy.php” method=”post”> <input type=”text” name=”username”> <input type=”submit” value=”Submit”> </form> <form> The HTML form. <input> Form fields. type Field type. For now, a simple text field and submit button. Will go through more in next few chapters. name Name of the field. value On submit button, this is the button text.

Welcome to a tutorial on how to create a responsive dropdown menu in HTML CSS. Yep, there are a ton of “dropdown menu plugins” on the Internet. But we can literally build one within minutes, using only HTML CSS. No third-party libraries and senseless bloat. Read on for the example!     TABLE OF CONTENTS

Welcome to a quick tutorial on how to create a simple scroll to top button in HTML. There are a ton of scroll-to-top plugins on the Internet, but know what? Forget those gimmicks. We can literally create one within minutes without using any 3rd party frameworks – Read on!     TABLE OF CONTENTS Download

Welcome to a quick tutorial on how to create a simple hidden side menu in HTML and CSS. I am sure there are a ton of “sidebar plugins” on the Internet, but they are bloated and hard to customize. So let us do something different in this guide – Only the raw basics, so you

Welcome to a tutorial on how to rotate and spin images in HTML CSS. So you want to rotate or spin an image, but it is too much trouble to do image editing or create an animated GIF? Good news, it is easy to rotate images in modern CSS. To can rotate an image in

Want to show some text or an image caption on mouse hover? Yes, we can do that without a single line of Javascript – Let us walk through a few simple examples in this guide. Read on!     TABLE OF CONTENTS Download & Notes Text Over Image Extras The End   DOWNLOAD & NOTES

HTML PAGE LAYOUT & SECTION TAGS <header>MY SITE</header> <nav> <a href=”home.html”>Home</a> <a href=”page.html”>Page</a> </nav> <main> <article> <h1>My Article</h1> <section>SECTION A</section> <section>SECTION B</section> </article> <aside>Side bar</aside> <div>Generic division or section.</div> </main> <footer>&copy; Copyright My Site.</footer> <header> Page header. <nav> Navigation. <main> Main section – Can only have one. <article> An article. <section> A section. <div> Generic