Angular 5 Tutorial 03 – Project Structure

In the previous post, we have discussed on how to create hello world application in angular. Using Angular CLI, we have generated basic files needed to run a hello world application.

Now, let’s have a quick look at the files and folders in our new Angular project.

The generated projects have the following files and folders structure

angular_structure

We have three folders and few files in the root directory.

The 3 folders are e2e, node_modules, and src.

src – src/ folder presents in the root folder. It contains all the source code of project whereas the remaining folder contains files that helps to build, test,  maintain the application.

e2e – It contains end to end tests. These files should not present in the src folder, because it acts as the separate app that helps to test the whole application.

node_modules – This folder has been created by Node.js based on the libraries listed in packages.json. (click here to know about in details)

 

Before digging further into the above folders, let’s take a look at the remaining files available in the root folder.

.angular-cli.json – Configuration of angular CLI. It helps us to define different environments like dev, stage, etc. and also to import third-party stylesheets.

.editorconfig – Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Example: indent_size, max_line_length of the project. It allows us to maintain a common editor setting across the team.

.gitignore – Git configuration to make sure autogenerated files are not committed to source control. Example: dependencies folder – node_modules, compiled output folder – dist

karma.conf.js – Karma is a test runner which we are using in Javascript application. This file contains the configuration of karma test. The configuration mentioned in this file is used when we are testing the application using ng test command.

package.json – npm configuration to maintain the metadata of the application, third-party packages listing, and to maintain the dependencies of those packages.

protractor.conf.js – Protractor is an end to end test runner. The configuration mentioned in this file is used when we are testing the application using ng e2e command.

README.md – Basic documentation of the project, when are generating files with CLI it is prefilled with CLI commands details.

tsconfig.json – TypeScript compiler configuration for IDE.

tslint.json – Linting settings for TSLint which is a used during ng lint for linting TypeScript code.

 

So far we have discussed the folders and files available in the root directory. Let’s dig deeper into the src folder.

cool-app-src

The src folder contains sub-folders called app, assets, environments and few more files such as index.html, main.ts, etc

app/app.component – The HTML, CSS, ts, spec.ts files together form the  AppComponent. Basically, it’s an HTML template, stylesheet and unit test. It acts as the root component of the application. The remaining component will be created as the nested component of this root component.

app/app.module.ts – Modules is a mechanism to group the component, pipes, and services which are related.

assets – assets folder is the place to maintain the static contents like images, or any content that needs to copy fully as it is during the build process.

environments – This folder contains one file for each environment. The file contains environment based configuration or information.

favicon.ico – favorite icon to be displayed when we are bookmarking our page

index.html – The main HTML thats serves the application. The CLI automatically links the js and CSS files when building the application.

main.ts – The entry point of application. Compiles and bootstraps the application root module to run in the browser.

poyfills.ts – Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. Example: The latest feature will browser like chrome or firefox, but we need the fallback for the browser like Internet Explorer. Polyfills will help to fill those gaps.

styles.css – We import the global styles in this file. Mostly the local style specific to the particular component will be placed inside the same folder for easy maintenance.

test.ts – The main entry point of the unit test.

tsconfig.json – Typescript compiler configuration for the angular application

 

In the next post, we can discuss about component in more details.

Happy Coding 🙂

Angular 5 Tutorial 02 – Creating Hello World Application

In this post, we are going to discuss how to setup development environment and create an initial angular app using CLI.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v

01

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v

 

4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

  • cool-app is the name of the project.

 

new-app

Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows

code_ng-app4.png

5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

The default page will gets open with the greeting message.

 

CoolApp.png

 

Stay connected and Keep supporting. 🙂

Happy Coding!

 

In the next post, we can discuss about the architecture of angular application.

Angular 5 Tutorial 01 – Introduction

angular5.png

What is Angular?

A framework for building client application in HTML, CSS and JavaScript/TypeScript.

Why Angular?

Why we need Angular? We can do the same in JavaScript or jQuery. Yes, we complete our most of the task using jQuery.

When the application becomes complex in terms of requirements, jQuery becomes hard to maintain the code. Even though we have lots of design patterns for JavaScript, its hard for beginner to start with design patterns.

When we create large complex application using jQuery it becomes hard to test. To make life easier a lots of frameworks arrived in programming world to help the programmers.

Benefits of Angular

  • Its a component based framework which gives a clean structure for our application
  • It has Declarative templates which Includes lots of re-usable code
  • More testable code – supports to build lots of automated test
  • Dependency Injection – loads dependent objects (called the dependencies) when it creates an instance of an object.
  • We can write our code in either JavaScript or TypeScript – Angular Framework itself developed using TypeScript

Architecture

We have two main sections in Architecture

  • Front-end
  • Back-end

Front-end

In the front-end, we have built our UI using HTML, CSS, JavaScript or TypeScript. It contains HTML templates, Graphical representation, application presentation logic.

Back-end

Back-end Architecture contains the Business Logic, Data from Database or APIs. In angular, we are not going to store any data in client side because once the session or cookies cleared everything will deleted. We will use local storage or cookies in client side to store temporary data. The business logic or data are stored in database or APIs.

angular

The key parts available in angular architecture are

  • Modules
  • Components
  • Templates
  • Directives
  • Data Binding
  • Services
  • Dependency Injection

We can discuss on each topic in upcoming posts.

History of Angular

Before moving to deeper learning part, lets take a look on history of angular.

  • Angular JS – Version 1 – 2010
  • Angular – Version 2 – 2016
  • Angular – Version 4 – 2016 December
  • Angular – Version 5 – 2017 November

The first version on Angular is released in 2010 with the name of “Angular JS”. It became popular framework among developers.

Then in 2016, a complete rewrite has happened in the framework and it has been release with the name “Angular”. The word JS is removed from the framework name. This is a major release with complete rewrite of framework with major architecture and behavioral changes.

In December 2016, Angular version 4 is released. The version number 3 is skipped to match the version number mismatch between other components of angular.

The current version of Angular 5 is released in Nov 2017. The new version of Angular is going to released on every six months. That’s all about the major version changes happened in angular.

In next post, we can see how to create our hello world application in Angular.

Happy Coding!

npm – a quick walk

Aa a part of learning angular, I would suggest everyone to learn and understand basic concept of npm

May be by finding answers for few of questions listed below

  • What is npm?
  • What is the role of npm?
  • How to use it?
  • Why we are going to use it?

So, what is npm?

npm – node package manager

Let’s split the sentence and understand the meaning present in the abbreviation.

Node

Here node.js is mentioned as node. Node.js is a server-side JavaScript environment. It uses an asynchronous event-driven model and is designed for writing scalable internet applications, notably web servers.

Package

Modules of code grouped up into a component which can be used in various project or application.

Manager

Managing the dependencies with various operation like install, uninstall, update and so on.

Now, we can frame our own definition for npm from above split up explanation. So using npm, we can manage (install, uninstall, organize) the node.js packages in our project.

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js.

npm has CLI terminal and website to search for packages.

What is the role of npm?

npm does N number of roles in various projects. I’m just mentioning the various which we are going to use in our upcoming posts in the end user developer point of view

  • install packages
  • uninstall packages
  • version maintenance of packages across team
  • maintaining the dependencies

How to use it?

Simple, install Node.js

npm is distributed with Node.js- which means that when we download and install Node.js, we automatically get npm installed on our computer.

Using following command in terminal, we can check whether our tool set get installed successfully,

// to check node.js version
node -v

// to check npm version
npm -v

 

packages.json

What is this packages.json? this is the one important thing we should get familiar of we are going for npm.

  • packages.json file is like registry of packages in our project.
  • it lists the packages that our project depends on.
  • allows us to specify the versions of a package that our project can use using semantic versioning rules.

How to create packages.json file?

Open terminal with your target folder location.

Type npm init and Enter, now you’ll be caught up with few questions. After you have answered most of the question, your file will get created.

name and version fields are mandatory fields.

npm_cmd

If you are afraid of questions, we have another quick options.

Enter command npm init –yes

npm_cmd_2

Using –yes argument option, the npm will create packages.json file with default values.

Install a package

npm install (in package directory, no arguments) – Install the dependencies in the local node_modules folder.

In global mode (ie, with -g or --global appended to the command), it installs the current package context (ie, the current working directory) as a global package.

You can find detailed details of npm install options in this link

A package can be downloaded with the command:

npm install <package_name>

The --save and --save-dev install flags

The easier (and more awesome) way to add dependencies to your package.json is to do so from the command line, flagging the npm install command with either --save or --save-dev, depending on how you’d like to use that dependency.

To add an entry to your package.json‘s dependencies:

npm install <package_name> --save

To add an entry to your package.json‘s devDependencies:

npm install <package_name> --save-dev

 

That’s it. Few lines has been copied from official documentation. :p

Lets conclude, using npm we can mange number of packages in our projects easily.

Happy Coding!

 

Few quick steps to learn core parts of angular 2+

Actually, there is no quick steps to learn any tools or technology unless we are interested or committed to goal of our learning curve.

I just added this title as a temporary one, nothing came up in my mind suddenly. so simply added.

I’m just going list down the various steps/core parts that should be covered in the learning curve of angular 2+

And the steps are,

Step 1
Learn how to install Node.js & npm, whats the purpose of it, and how to use it

Step 2
What is TypeScript? – classes, interfaces, objects

Step 3
Angular CLI – Understanding project structure/architecture, entry point of application

Step 4
Bootstraping, ngmodules, Angular dependency injection

Step 5
Data binding, Observables & Promises, Pipes, and event handling in application

Step 6
Navigation & Routing,

Step 7
Testing – Karma, Jasmine

Step 8
How to deploy your apps in server

 

I think these are some core parts that needs to learned for building a basic angular application. If you think something could be add up in this, please mention those in comment section.

I’m planning to write each steps in detail in upcoming posts. And the question arrives in my mind or probably some people mind in my network,

  • So this is another how to angular posts?
  • So same story, different post?
  • Before you complete these post, the next version will get release
  • Are people going to read these?

And the answer I tell to myself,

I write to practice my skills, experiment my knowledge, and so on. It makes me happy. So, lets do this.

Happy blogging!

 

P.S. I shall add posts on each steps mentioned above and link those topics to this posts.

TypeScript – Quick view – Pt. 1

What is TypeScript?

  • TypeScript is a syntactic sugar for JavaScript.
  • TypeScript syntax is a superset of ES5 & ES6 syntax.
  • Every valid JavaScript code is also a TypeScript code.
The TypeScript compiler emits JavaScript. The TypeScript compiler performs only file-local transformations on TypeScript programs and does not re-order variables declared in TypeScript. This leads to JavaScript output that closely matches the TypeScript input.
TypeScript does not transform variable names, making tractable the direct debugging of emitted JavaScript. TypeScript optionally provides source maps, enabling source-level debugging. TypeScript tools typically emit JavaScript upon file save, preserving the test, edit, refresh cycle commonly used in JavaScript development.
It can improve your productivity by enabling rich tooling experience. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. 

Why TypeScript?

JavaScript is standardized through the ECMAScript standards. TypeScript supports most of the latest ECMAScript features (the various posts under ECMAScript can be found here). Some of the interesting features of latest ECMAScript like modules, lambda functions, classes, the spread operator, destructuring, template literals are supported in TypeScript.

TypeScript makes JavaScript more and reliable by having following features

  • Optional static typing
  • Supports the latest JavaScript features
  • Supports classes, interfaces, generics
  • More productive than JavaScript

Optional static typing

JavaScript is dynamic type, it does not know type of variable until we initialize it. Typescript provides types support to code. Using static typing we can define the data type of the variable.

var x : string = "Make a smile";

Here we have declared a variable of type string. The popular data types available in TypeScript are Boolean, Number, String, Array, Tuple, Enum, Any, and etc.

We have mentioned TypeScript is optional static typing.

What does it mean?

It means, we don’t have to mention the exact type of variable always. If we don’t wish to mention the type of variable, we can user any type to declare the variables. Once we are initializing the any type variable, it will decide the type of variable based on the values.

example:

var y: any = “Clear Screen”;

Supports the latest JavaScript features

Most features of ECMAScript has been supported by TypeScript.

The latest features of ECMAScript like

are supported in TypeScript as well. We can discuss about those topics in upcoming blog posts.

More productive than JavaScript

If the developer is already familiar with any of the Object Oriented Programming, it will be easy for them to adopt to TypeScript. The syntax are similar to Object Oriented language like C#.

As C# developer, in my personal experience I felt learning and understanding the syntax of TypeScript is easy.

IDEs can help you throwing error right away when you are coding itself. So you can focus more on coding and less time at debugging. Enhanced IDEs provides greater support to this language which provides significant productivity compared working with JavaScript.

 

This is just an introductory post, we can discuss more topics under TypeScript in upcoming posts. Please share your thoughts in comments section and follow this site for more updates.

 

Happy Coding!

2018 Books Reading Wish list

I’m currently preparing the list of books which needs to read in 2018.

This is just an initial draft, the post will be updated based on books availability and interests soon.

  • The Innovators: How a Group of Hackers, Geniuses and Geeks Created the Digital Revolution – Walter Isaacson

  • The Shallows: What the Internet is Doing to Our Brains – Nicholas Carr
  • The Phoenix Project: A Novel About IT, DevOps, and Helping Your Business Win – Gene Kim, Kevin Behr, George Spafford

  • Inside Cyber Warfare: Mapping the Cyber Underworld – Jeffrey Carr
  • Computer Science Distilled: Learn the Art of Solving Computational Problems – Wladston Ferreira Filho
  • The 7 Habits of Highly Effective People – Stephen Covey
  • The End of Jobs: Money, Meaning and Freedom Without the 9-to-5 – Taylor Pearson
  • Grit: The power of passion and perseverance – Angela Duckworth

  • The 4-Hour Workweek – Timothy Ferriss
  • What If?: Serious Scientific Answers to Absurd Hypothetical Questions – Randall Munroe

  • Stay Hungry Stay Foolish – Rashmi Bansal
  • The $100 Startup: Reinvent the Way You Make a Living, Do What You Love, and Create a New Future – Chris Guillebeau

  • Rich Dad, Poor Dad – Robert T. Kiyosaki

This is not a checklist or reading challenge list, it’s just a wishlist. Tamizh books details will be added once discussed with my friends 🙂

Please add your favorite books or suggestion list in the comments section.

 

Happy Reading!

 

 

The Art of Planning

“Don’t think about the start of the race, think about the ending” – Usain Bolt

One common question, I’m receiving from most of my friends is

How you are managing your time to do these many things?

Actually, they meant how I’m being active in learning new tools, reading books, making progress in blogging, posting random pieces of stuff at social media and all.

I took this question seriously and planned to answer them all via this blog post.

Planning is the ultimate key to unlock these activities.

 

Why planning?

A couple of years back I too had the same set of questions on how to create an action plan and how to efficiently work on it.

I have started reading some books, watching some YouTube videos, and listening to other people stories on how they are managing time on personal life as well towards their passion.

I have written all good ideas I have collected from the various medium in a notepad.

Later, I have clearly picked up the items which suit me.

On most time management & goal settings stories, I have found one common habit or ground rule.

It’s PLANNING!

 

How I have prepared my action plan?

Then, I have come up with an idea to create an action plan. I have started listing all things I wished or dreamed to complete in next few weeks or months or years.

Once I have listed all the items I wish to do. It looks like a large list, kind of watching a horror movie at midnight.

Instead of making progress in all the items at the same time, I have come up with idea of

  • prioritizing
  • categorizing

I have started to prioritize the list based on Career growth and Personal growth from most to least important. (Kind of bubble sort, decided which bubbles I need to burst first)

After prioritizing, Its time for categorizing.

In my case, I have decided to Categorize my action plan based on what time frame I have to achieve it.

So, the categories will look like this

  • Long-term
  • Short term
  • Daily
  • Today

The long-term goal is something I planned to achieve in few years. Short term goal is the items I wish to cover in minimum one year. Daily goals are like checklist I should follow on daily basis. Today board is to plan for the day ahead.

Ultimately, my planning board looks like following

planning

I shall create a separate post on how I plan for the day ahead.

I used to keep this list on my desktop screen always using sticky notes options on my windows laptop.

Basically, I’m a sticky note lover. And below is my monitor screen filled with sticky notes 🙂

sticky_notes_overused

 

Next big step

We have planned everything, whats the next big step?

Executing

Yes! A very organized plan will help you to make consistent progress to reach your goal.

 

Hope you have like this post, please follow this blog to receive more updates.

And also Please comment your thoughts or share your ideas on planning in the comment section.

 

Happy planning!

 

 

A techie newbie?

Wow! Welcome to the tech field where you have lots of computers, servers, rolling chairs, ACs, etc. It may be a very hard task to transition from college to a job -a software developer. In spite the myths about this job, claiming to be the most paid job, most stressful job, most hair-fall job, most whatever job, it has its own pros and cons. Yet many of the myths are true, the hair-thing for example 🙂 Just kidding!

When you first step into this field, everything seems a little off and people keep on speaking, attending meetings, tapping the keyboard, etc and you don’t understand what they speak or why 😦 For two months you will be left alone, I mean you would struggle to make friends and acquaintances. People would stare at you as if you are from Kepler-1229b (an exoplanet) but as days go by, you begin to get along with the people around you. (i.e) You start to code.

When this process begins, you discover new languages, frameworks, and most importantly you will realize that StackOverflow is the greatest treasure you can have. And every time you try to stay cool, some bug would rise up from the code you wrote yesterday and dance before the QA Team. Your bad 😦

Even I’m new to this field. I have consolidated few tips that would make you feel better as a fresher in this job -the most paid job 🙂 Again kidding!!
This post is a bit lengthy, if you want a quick read, just skim through the bold letters.

Mistakes are OK:
Yup! You heard it. No one is perfect. A famous proverb says “Rome was not built in a day”. Perfection comes with practice and experience and they come with mistakes. When you commit a mistake, learn from it and try hard not to repeat it again. One of my favorite quotes -“I never fail, I learn”. Learn from the mistakes of your seniors as well.

Ask questions:
Being new to this field, everything will seem strange and weird. Open your mouth and ask questions if you are not clear about anything. People in the software field are kind. They will surely help you. Do not hesitate to ask a question that has knocked your throat. Just open your mouth and let it out.

Get Help from seniors:
Don’t feel shy to speak with them, they are also fellow human beings with an experience level greater than you. They would always be ready to help you out. Think them as your StackOverflow but do not disturb them often. This might lead them to avoid you, move to another cabin, find another job, etc. Who knows!! Just don’t disturb them with silly questions like “What is 1&&-1 ?”, “Visual Studio is not working, can you help me?”, you could Google it instead 🙂

Learn/Read/Practice:
I heard people in college say, “All this studying stuff, examinations, semesters will get over within the college, Once into a job, we are free, no exams, no learning, nothing”. My friend, this is not true and you know it. You have to keep on learning as the world moves fast, so does the technological advancement. Frameworks, languages they all mutate every day, make sure that you read a lot and keep your technology stack up-to-date.

Improve writing skills:
Don’t write stories in the comment/work-log. Be straight to the point you wanted to say. Did some changes to the code?? Commit message – “updated bug that was not fixed today”. This type of writing doesn’t help you. In this field, you will have to write a lot of comments, reply to emails, skype with people. Poor writing skills do not help.

Be precise/short and firm in words:
Speak right to the point and use the correct words. Once I was asked by my team lead at the beginning of my career -“What is AJAX ?” I had no idea what it was back then. I knew “A” was for asynchronous so I started with Asynchronous… JQuery… He said “Don’t bluff” 🙂 All I wanted to make clear is that, if you don’t know something –Don’t bluff 🙂

Be wise while you code:
Read about OOPS and try to implement them and make the code modular. Use efficient algorithms and do a thorough analysis before you get your hands dirty on the code. Understand why and how the code works and then begin your task.

Keep your passion along with you:
Not everyone has the same passion -coding. Each and everyone may have different hobbies and passion. Do not leave them untamed. Follow your passion. Coding is your profession, passion may be something else. When you feel bored or stressed, ignite your passion and feel the stress relieved.

And finally, Smile always 🙂
“Face is the index of mind”, radiate joy and confidence to the people whom you meet and talk with. A simple smile can brighten your day.

This is a field where you can develop your logical thinking, programming skills, ability to solve problems, communication skills, comprehending skills, etc. Make use of it. It may be hard in the beginning but as you get involved you will be drawn towards it and stress will stay away from you. For more posts on life skills, visit samuellawrentzz.wordpress.com

Happy coding!!

Emmet in VS Code

VS Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

VS Code is one of my favorite code editor. I love the various features like embedded Git Control, Code completion, snippets, code refactoring etc.

I’m a full stack web developer (I used to call myself with that name), I have been using the vs code from its earlier release. I use to follow the release notes of VS Code on every release.

I always used to share the details of VS Code new features with friends, colleagues and all. Some of the features I have excited about was integrated terminal, Side by Side editing, Command palette, Markdown preview and list goes on.

Today, in this post I would like to share one of the interesting feature of VS Code which is involved with Code completion.

It’s Emmet!

So the next big question is,

What is Emmet?

Wiki says,

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.

Me:

To be short, it helps to code completion, add snippets, etc.

And next big question is, even some text editor also doing this fair job nowadays. Why Emmet?

Yes, nowadays all the editors comes up with code completion or syntax suggestion intellisense.

However, Emmet got some cool features like syntax abbreviation, improves HTML, CSS workflow. Using Emmet we can quickly write a bunch of code, wrap code wit new tags.

Your favorite may be Atom, Sublime, Brackets or something else. Emmet supports most of your favorite editors.

Check this link on how to integrate Emmet with your editor.

https://emmet.io/download/

It’s a plugin, you can install or integrate with your code editors.

 

Emmet in VS Code

The one good news is that we don’t have to download & install the Emmet in VS Code.

Emmet is built in with VS Code, no extension in required. OK, that’s the base story; now let’s start with how to use the features.

 

How to expand Emmet abbreviations?

Emmet abbreviation and snippets are enabled by default for html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

Mostly, Tab key is used to complete the code abbreviation. We have to type the syntax and click tab key to expand the abbreviations.

We expand the single html tag or even expand the hierarchy of html tag at the same time by clicking tab key.

emmet-gif-01

 

An important change is that the Tab key is no longer the default way to expand Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

We can quickly view the Emmet abbreviation by clicking the info icon next to list shown. By typing text next to hash (#) will be taken as id and text next to period(.) will be considered as class name. Emmet basically works related to CSS selectors.

emmet-gif-02

And also we can create multiple list of same syntax with unique id as well.

emmet-gif-03

 

We can generate lorem ipsum text with default number of words or certain number of text by mentioning the word count.

emmet-gif-04

 

Let’s see some CSS abbreviation example as well

emmet-gif-05

 

To experience more html & css short code check this out link https://docs.emmet.io/cheat-sheet/

The complete cheat sheet for html and css.

Try out and let me know your thoughts on the comment section.

Happy Coding! 🙂