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.
Now some of the featured courses on their website are :
1. Learn Responsive Design
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
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
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
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 :
⚡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.
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
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)
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
2. Vue.js – The Complete Guide by Maximilian Schwarzmuller ( rated 4.8)
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
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.
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
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.
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.
3. Handlebars
Handlebars uses normal HTML and custom template language
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.
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 :
Demystifying Async Await, From Promises to Async Await
Scopes in JavaScript, Closures
Symbols in JavaScript
Iterators and Generators in JavaScript
The Concept of Pure and Impure Functions in JavaScript
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.
