Categories
html

HTML Tags that you might not know

In this article, let us see some of the awesome but rarely used HTML tags that could be helpful in your new projects.

1. <details> tag

The <details> tag is used to specify additional details that the user can open and close on demand. So this means that the user can hide or show some information behind a heading or some other element. So in essence it is used to create an interactive widget like thing that can be opened and closed on the user’s interaction. The widget that we create by default appears as closed. On opening, it expands and displays the content that is present within it..

We can add any sort of content within the <details> tag.

Let us see an example for same :

2. <bdo> tag

BDO stands for Bi-Directional Override.

The <bdo> tag is used to override the current text direction. The <bdo> tag takes dir attribute which is used to change the direction of the text before presenting it. The dir attribute can take two values – ltr and rtl. So if you want the text direction from left to right, then use the ltr value otherwise use the rtl value. This is also a required attribute and using it you can specify the text direction inside the <bdo> element. Let us see an example for same:


3. <abbr> tag

The <abbr> tag is used to define an abbreviation or an acronym like “ASAP” (as soon as possible), “HTML” (hyper text markup language)

Let us move to an example for same :

If you hover over the rendered content, then you will see a popup with the abbreviation of the enclosed text.

3. <kbd> tag

The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser’s default monospace font.

So this it for this article. Thanks for reading !

Categories
css frontend html web development

Web Dev Made Easy

Hey everyone 👋🏻,

In this article, I will tell you about a website using which you can use as a resource for learning Web Development.

So the website name is this :

web.dev

https://web.dev

Image description

Now some of the featured courses on their website are :

Image description

1. Learn Responsive Design

Image description

This course takes you on a journey through the many facets of modern responsive web design. The first few modules will ease you in with a history of where responsive design came from and a look at the fundamentals of responsive layouts. From there, you’ll learn about responsive images, typography, accessibility and more.

Along the way you’ll find out how to make websites responsive to user preferences and device capabilities. By the end, you’ll also have an understanding of what the future might hold for responsive design.

Each module has demos and self-assessments for you to test your knowledge.

This course is created for beginner and intermediate designers and developers. A basic understanding of HTML and CSS should be enough. You don’t need to know any JavaScript. If you’re completely new to making websites, there’s an introduction to HTML and another course to help you learn CSS.

2. Learn Forms

Image description

This course breaks down HTML forms into easy to understand pieces. Over the next few modules, you’ll learn how an HTML form works and how to use them effectively in your projects. Use the menu pane by the Learn Forms logo to navigate the modules.

You’ll learn how to build a basic HTML form, about HTML form elements, styling forms, help users re-entering data, ensuring the form is accessible, and secure, how to test your forms, and about specific form types.

Each module is full of interactive demos and self-assessments for you to test your knowledge.

This course is suitable for beginners and advanced HTML developers. The first few modules help you get started with building HTML forms, the other modules give more detail. You can go through the series from start to finish to get a general understanding of HTML forms, or pick a specific module you want to learn more about.

3. Learn Progressive Web Apps

Image description

This course covers the fundamentals of Progressive Web App development into easy-to-understand pieces. Over the following modules, you’ll learn what a Progressive Web App is, how to create one or upgrade your existing web content, and how to add all the pieces for an offline, installable app. Use the menu pane by the “Learn PWA” logo to navigate the modules.

You’ll learn PWA fundamentals like the Web App Manifest, Service Workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

Each module includes interactive demos and self-assessments for you to test your knowledge. You will be able to test and try demos on your mobile phone, tablet, or laptop while playing with the code to understand the fundamentals of what makes a Progressive Web App.

This course is created for a beginner and advanced web developers alike. You can go through the series from start to finish to get a general understanding of PWA from top to bottom, or you can use it as a reference for specific subjects. For those new to web development you will need a grounding in HTML, CSS, and JavaScript to follow along. Check out Learn CSS, and the HTML and JavaScript courses on MDN.

4. Learn CSS

Image description

This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next few modules, you’ll learn how the core aspects of CSS work and how to use them effectively in your projects. Use the menu pane by the “Learn CSS” logo to navigate the modules.

You’ll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you’ll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.

Each module is full of interactive demos and self-assessments for you to test your knowledge. In addition to learning through reading and demos, there is an accompanying podcast episode for each topic as another way to learn and continue expanding your knowledge.

This course is created for beginner and advanced CSS developers alike. You can go through the series from start to finish to get a general understanding of CSS from top to bottom, or you can use it as a reference for specific styling subjects. For those new to web development overall, check out the intro to HTML course from MDN to learn all about how to write markup and link your stylesheets.

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text
Categories
html javascript vuejs web development

✨Top 5 resources to learn Vue.js [in no particular order]

✨Top 5 resources to learn Vue.js

Hey everyone 👋🏻,

In this article, I will be mentioning the top 5 resources that I highly recommend if you want to learn Vue.js.

PS : I am not an affiliate of any of these resources/courses. These are just some of my personal recommendations if you are looking to learn Vue.

Introduction

Alt Text

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

Here are the top 5 recommendations (in no particular order) of the courses that you should definitely check out for learning Vue.

1. Build Web Apps with Vue 3 and Firebase by Shaun Pelling a.k.a The Net Ninja (rated 4.8)

image

Shaun is a gifted teacher. He knows how to explain stuff in a very easy and lucid manner. This course will definitely take your knowledge to the next level if you are looking to learn this specific technology.

Here is what this course covers

Learn how to create Vue 3 applications from the ground-up

Get in-depth knowledge of Vue features like the Vue Router, Vue CLI, Options API, Composition API, Teleport etc

Get hands-on & in-depth experience using the latest Vue 3 features (such as the Composition API)

Learn how to use Firebase as a back-end to your Vue applications (as a database, authentication service, hosting etc)

Build & deploy 4 real-world web apps with Vue & Firebase
Learn how to implement an authentication system into your Vue js apps using Firebase Auth

Become a Vue 3 ninja!

Course Link :

https://www.udemy.com/course/build-web-apps-with-vuejs-firebase

2. Vue.js – The Complete Guide by Maximilian Schwarzmuller ( rated 4.8)

image

This course as the name can probably tell you covers the internals of Vue in great detail. The course starts from the very basics like What Vue.js is and how it works and later on moves to more complex and advanced topics

Here is what this course covers

What is VueJS and Why would you use it?

The Basics (including the basic Syntax, Understanding Templates and much more!)

How to Output Reactive Data & Listen to Events

Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements …)

Setting up a Development Environment and Workflow

Using Components (and what Components are to begin with)

A Deep Dive Look Behind the Scenes of Vue

Binding to Form Inputs

Sending Http Requests to Backend APIs

Authentication & Vue

How to make your App more Beautiful with Animations and Transitions

How to create an awesome Single-Page-Application (SPA) with Routing

How to improve State Management by using Vuex

How to Deploy the App

and more …

Course Link :

https://www.udemy.com/course/vuejs-2-the-complete-guide

3. Vue Mastery

This is a complete path for learning Vue.js from some prominent industry experts pertaining to the technology.

image

image

Here is what this course covers

Their courses are distributed in form of paths. You may want to try them out as well.

image

Course Link :

https://www.vuemastery.com/courses

4. VueSchool.io

image

Here is what this course covers

image

You may want to try their complete suite of courses to enhance your Vue.js Knowledge. So down below, you can find the link for their website :

Course Link :

https://vueschool.io/courses

5. Vue.js Documentation (a must thing to refer)

image

Docs link :

https://v3.vuejs.org/

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
ejs html javascript mongodb nodejs template engines web development

Rendering Dynamic Content and Template Engines

✨Rendering Dynamic Content and Template Engines

Hey everyone 👋🏻,

In this article, let us learn about how we can render dynamic content to the client (which is not static). Let us first touch briefly on what a template engine is because rendering dynamic content is closely related to what a template engine will help us in achieving.

Template Engines – a brief overview

Image description

A template engine is software designed to combine templates with a data model to produce multiple pages that share the same look throughout the site. These are the views in an MVC project.

So this helps us in putting dynamic content on our HTML pages.

We got a HTML like template (technically not HTML) which is typically a file that contains a lot of HTML like content in it but with some placeholders plugged into it and then we have a server (a Node.js Express server or any other server) serving the Node/Express content and then you have a templating engine.
that replaces placeholders with HTML content but that content is generated on the server dynamically on the fly taking that dynamic content into account.

Some of the common template engines :

1. EJS

EJS Uses normal html and plain javascript in your templates.

Image description

EJS provides us clean syntax that easily mixes with HTML and provides the flexibility to write the JavaScript code inside the templates.

Dynamic content to be rendered in the above example is name. The value of the name variable will be rendered as an HTML page’s paragraph with value of name getting rendered on the fly.

2. Pug

PUG uses minimal HTML and custom template language.

Image description

3. Handlebars

Handlebars uses normal HTML and custom template language

Image description

The side effect of Handlebars template compared to Pug is that we cannot run any logic in the Handlebars template we need to pass a variable that has a value true or false(i.e logic is performed outside and passed into hbs template) and then we can render dynamic content.

This keeps our templates lean and all our logic should live while making sure that all our logic lives in our backend code. It works on the philosophy of less logic in the template and more logic in the node express code.
So you have to prepare everything there so that inside the template you don’t have to write any JavaScript expressions.

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
css html javascript mongodb nodejs web development

(2021) – Web Developer Full Course : HTML, CSS, JavaScript, Node.js and MongoDB

✨Web Developer Full Course

Alt Text

I recently started to create a Full Web Developer Course on my YouTube Channel and recently finished with the HTML and the CSS Section of this FREE course. More videos will be up on upload.

HTML Section

CSS Section

JavaScript Section

This section covers the basics of JavaScript along with the modern features that the language offers. We cover concepts like :

  1. JavaScript Basics (variables, loops, conditionals, functions)
  2. JavaScript Types (Strings, Numbers, Objects, Booleans, Functions, Symbols)
  3. Immediately Invoked Function Expressions
  4. Document Object Model (DOM) – Querying, Traversal, Inserting and Removing Elements from the DOM
  5. Arrays and Iterables
  6. Mutator methods – push, pop, shift, unshift, splice
  7. Other array methods like – slice, indexOf, findIndex, find, sort, reverse
  8. Higher Order Methods – filter, reduce, map
  9. Split and Join Methods
  10. The spread operator
  11. Sets and Maps
  12. Understanding the this keyword in JavaScript
  13. Overview of Objects, Constructor Functions, Classes, OOP, Instance and Static Methods, Inheritance
  14. Events – Adding and Removing Event Listeners
  15. Event Capturing – Bubbling Phases, Propagation and Event Delegation
  16. Asynchronous JavaScript – Event Loop (Call Stack, Message Queue)
  17. Asynchronous JavaScript – Understanding Promises and Error Handling
  18. Asynchronous JavaScript – Promise.race, Promise.all, Promise.allSettled
  19. Demystifying Async Await, From Promises to Async Await
  20. Scopes in JavaScript, Closures
  21. Symbols in JavaScript
  22. Iterators and Generators in JavaScript
  23. The Concept of Pure and Impure Functions in JavaScript
  24. Understanding Hoisting in JavaScript

AND MORE….

A lot of exercises and projects were made in this section of the course.

Here are the Projects that we made in this JavaScript Section :

Building COVID-19 Tracker Application using JavaScript and Mapbox

Making a Todo List Application in JavaScript using Custom Events

Implementation of Infinite Scroll in JavaScript

10 JavaScript Projects in 2 Hours 

Node.js Section
COMING SOON

MongoDB Section
COMING SOON

Make sure to subscribe to the channel for more such videos.
A lot of AWESOME videos are coming this month… So make sure to SUBSCRIBE to the channel for more amazing videos.

Follow me on Twitter for more updates: https://twitter.com/The_Nerdy_Dev