0% found this document useful (0 votes)
18 views13 pages

Manipal Dca 3101

Uploaded by

parth108.33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
18 views13 pages

Manipal Dca 3101

Uploaded by

parth108.33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

MANIPAL. UNIVERSITY.

JAIPUR

INTERNAL. ASSIGNMENT

NAME. –. Parth.sharma

ROLL. NUMBER. –. 2214100799

PROGRAM. –. BACHLOR. OF. COMPUTER. APPLICATION. (BCA)

SEMESTER. –. V

COURSE. CODE. –.DCA3101

COURSE. NAME. –.WEB.DESIGN

SESSION. –.MARCH.2024

Set.1
1. What.does.the.internet.mean,.and.what.are.its.advantages.and.disadvantages?

Answer:-
.The.internet .is.a.global.network.of.computer.interconnections.and.servers.that .utilize.standard.
protocols.for.data.exchange..It.also.offers.an.enormous.amount.of.information,.as.well.as.servin
g.as.a.medium.for.communication,.and.what.about.being.a.place.where.you.can.do.your.social.n
etworking,.shopping.or.simply.get.entertained..The.development.of.the.internet.started.in.the.1
960s.with.ARPANET.creation;.today.it .is.considered.to.be.one.of.the.major.infrastructures.affe
cting.almost.every.aspect.of.human.life.

Advantages.Of.Internet.

Access.to.Information

The.internet.provides.immediate.access.to.huge.volumes.of.information.on.virtually.any.subject
.matter..This.has.led .to .revolutionizing.education.and.research.making.it .possible .for.learners,.te
achers,.and.professionals.to.find.academic.papers,.articles,.tutorials.and.other.resources.at.the.cl
ick.of.a.button.

Communication

Today’s.world.has.become.a.village.with.help.from.the.internet.which.has.made.communicatio
n.between.people.across.continents.very.simple..Communication.media.like.e-
.mailing,.instant .messaging.through.videos,.video .conferencing.programms.enable.us.to .stay
connected.with.friends.and.relatives.throughout.the.whole.globe..Such.an.ease.in.co
mmunicating.has.helped.in.international.business.and.collaborations.
Convenience:

Daily.tasks.have.been.more.convenient.through.online.services..It.saves.time.and.effort.to.ba
nk,.shop.online.or.pay.bills..Many.aspects.of.life.have.been.simplified.by.the.ability.to.order.t
ickets,.book.reservations.and.access.government.services.online.

Entertainment:

The.internet.brings.with.it.a.host.of.entertainment.options.such.as.movie.streaming,.television.sh
ows,.music.and.gaming.in.addition.to.social.media.sites..This.wide.variety.of.content.speaks.to.d
ifferent.interests.and.tastes.

Economic.Opportunities:

The.internet.has.created.new.business.opportunities..Businesses.can.now.use.e-
commerce.platforms.to.reach.global.customers.while.freelance.websites.enable.individuals.offe
r.their.services.internationally..The.rise.of.gig.economy.and.telecommuting.has.been.made.poss
ible.by.the.internet.which.provides.for.flexible.work.arrangements.
Drawbacks.of.the.Internet.Priva

cy.and.Security.Concerns:

The.internet.is.able.to.share.a.lot.of.data.so.fast.that.it.creates.difficult.problems.related.to.priva
cy.and.security..The.ease.with.which.personal.information.can.be.accessed.can.lead.to.identity.
theft,.financial.fraud,.and.cyber.attacks..To.protect.sensitive.data.online,.continuous.vigilance.i
s.required.as.well.as.highly.developed.security.measures.

Misinformation.and.Fake.News:

With.the.help.of.the.internet,.fake.news.spreads.like.wildfire..False.information.may.result.in.far
-
reaching.consequences.such.as.influencing.public.opinion,.leading.to.panic.or.even.affecting.po
litical.decisions..The.difficulty.lies.in.verifying.the.trustworthiness.of.online.sources.

Internet.Addiction.and.Mental.Health.Problems:

Spending.too.much.time.on.the.internet.especially.on.social.media.can.lead.to.addiction.and.me
ntal.health.issues..This.can.induce.feelings.of.loneliness,.anxiety.and.depression..Constant.comp
arisons.with.others.on.various.social.media.platforms.negatively.affect.self-worth.

Digital.Divide:

Despite.being.available.almost.anywhere.today.not.all.people.have.access.to.it..The.term.“dig
ital.divide”.defines.differences.between.those.who.have.got.an.Internet.connection.at.home.a
nd.those.who.haven’t.got.any..By.doing.this.gap.may.deepen.existing.disparities.in.education,
.employment,.business.opportunities.etc.

Impact.on.physical.health
Spending.a.lot.of.time.on.the.internet.may.result .in.physical.health.problems.like.stressed.eyes,.u
nsightly.body.positions,.and.an.inactive.lifestyle..To.maintain.sound.health.in.general,.one.has.to.
strike.a.balance.between.his.screen-time.and.bodily.exercises.

2. Define.the.term.DNS.and.Explain.the.types.of.domains.

Answer:.-
DNS,.or.domain.name.system
Computers.employ.IP.addresses,.which.are.used.to.identify.one.another.on.a.network,.to.identif
y.themselves.to.one.another..The.Domain.Name.System.(DNS).is.a.hierarchical.and.decentraliz
ed.naming.system.that.does.this.job..For.instance,.DNS.converts.the.domain.name."www.google
.com".into.the.IP.address.of.Google's.web.server.when.you.type.it.into.your.browser,.allowing.y
our.browser.to.connect.to.the.right.server.

DNS.guarantees.that.users.may.visit .websites.using.simple-to-
remember.domain.names.rather.than.needing.to.learn.complicated.numerical.IP.addresses,.
which.is.crucial.for.the.operation.of.the.internet.
DNS.Operation
User.Request:.A.DNS.query.is.started.when.a.user.types.a.domain.name.into.their.browser.

Recursive.DNS.Resolver:.The.user's.Internet.Service.Provider.(ISP).usually.provides.a.recursiv
e.DNS.resolver.to.which.the.query.is.forwarded..The.DNS.hierarchy.and.the.user.are.connected.t
hrough.the.resolver.

Root.Server:.The.resolver.queries.a.root.DNS.server,.which.provides.the.address.of.a.Top-
.Level.Domain.(TLD).server,.in.the.event .that .it .does.not .already.have.the.IP.address.cached.

TLD.Server:.Next,.the.resolver.sends.a.query.to.the.TLD.server.(such.as.".com".or.".org"),.an
d.in.response,.the.server.provides.the.address.of.the.domain's.authoritative.DNS.server.

Authoritative.DNS.Server:.The.IP.address.of.the.requested.domain.is.obtained.by.the.resolver.by.c
ontacting.the.authoritative.DNS.server.

Reaction:.The.user's.browser.connects.to.the.web.server.after.receiving.the.IP.address.from.the.r
esolver.in.order.to.access.the.website.
Domain.Types
TLDs,.or.top-level.domains:
The.top.level.of.the.DNS.hierarchy.is.represented.by.TLDs..They.fall.into.a.number.of.categories:

The.most.popular.kind.of.Top-
Level.Domains.(gTLDs).are.called.generic.com,.org,.net,.info,.and.biz..They.are.not.limited.to.p
articular.organizations.or.goals.

Sponsored.Top-
Level.Domains.(sTLDs):.These.are.TLDs.that.are.specifically.related.to.a.community.and.are.sp
onsored.by.groups.that.represent.that.community..Examples.are.gov.(for.US.government.organi
zations),.mil.(for.US.military),.and.edu.(for.educational.institutions).
Top-Level.Domains.with.Country.Codes.(ccTLDs):
These.are.two-
letter.TLDs,.like.uk.(United.Kingdom),.jp.(Japan),.and.in.(India),.that.are.linked.to.certain.nat
ions.or.regions..Websites.connected.to.those.areas.frequently.use.them..Infrastructure.Top-
Level.Domain:.This.category.consists.of.a.single.domain,.arpa,.which.is.utilized.for.internet-
related.technical.infrastructure.

Second-Level.Domains:.In.the.DNS.system,.second-
level.domains.come.immediately.after.TLDs..They. are.frequently.the.names.of.businesses,.asso
ciations,.or.people.."Example".is.the.second-level.domain.in."example.com,".for.instance.

Subdomains:.Used.to.arrange.and.segment.a.second-
level.domain.into.distinct.areas,.subdomains.are.extensions.of.the.primary.domain..As.instances
,."blog.example.com".and."shop.example.com".are.subdomains.of."example.com.".With.subdo
mains, .multiple.websites.or.services.can.be.developed.under.a.single.second-level.domain.
Third-
Level.Domains:.Domains.may.have.more.than.one.level.in.specific.circumstances..Subdoma
ins.within.subdomains.make.up.third-level.domains. .As.an.example,.a.third-
level.domain.under."shop.example.com".is."support.shop.example.com."

DNS's.importance
DNS.offers.a.scalable.and.effective.means.of.converting.domain.names.into.IP.addresses,.wh
ich.is.essential.to.the.operation.of.the.internet..Given.the.sheer.quantity.of.websites,.it.would.
be.impossible.for.consumers.to.memorize.numerical.IP.addresses.for.each.one.they.visited.if.
DNS.weren't.in.place.

3. What.is.a.Search.Engine?.Define.the.components.of.search.engine.and.it’s.working..A

nswer:-.A.search.engine:.what.is.it?
A.search.engine.is.a.software.program.created.to.conduct.web.searches,.which.entail.looking.for
.information.on.the.internet .using.keywords.or.phrases.entered.by.the.user..A.search.engine's.m
ain.job.is.to.return.a.list.of.pertinent.web.pages.in.response.to.a.user's.query.
Among.the.most.widely.used.search.engines.are.Yahoo,.Bing,.and.Google.

Parts.of.Web.Crawlers.(Spiders/Bots).for.Search.Engines:
online.crawlers.are.automated.applications.that.search.the.internet.in.a.methodical.manner.to.fin
d.and.index.online.pages..They.navigate.between.pages.by.clicking.on.links,.gathering.informat
ion.about.the.layout.and.content.of.every.website.they.visit..We.call.this.procedure.crawling.

Index:.The.index.is.a.vast.database.that.is.used.to.store.and.arrange.the.data.that.web.crawlers.coll
ect..It.contains.information.about.every.web.page,.including.metadata,.keywords,.and.the.conten
t's.location..In.response.to.user.requests,.the.search.engine.may.swiftly.obtain.pertinent.results.th
anks.to.the.index.

Search.Algorithm:.In.response.to.a.user's.query,.a.search.engine.employs.a.set.of.guidelines.and.
procedures.known.as.the.search.algorithm.to.assess.the.relevancy.and.order.of.online.pages..To.
deliver.the.most.relevant.results,.it.takes.into.account.a.number.of.variables,.including.keyword.
frequency,.website.quality,.backlinks,.and.user.engagement.metrics.
User.Interface:.The.search.engine's.front.end.is.where.users.enter.their.queries.and.see.the.results.o
f.their.searches..A.search.bar,.search.buttons,.and.functionalities.like.filters.and.advanced.search.
options.are.usually.included.

Search.Results.Engine:.This.part.analyzes.the.user's.query,.compares.it.to.the.data.that.has.been.
indexed,.and.returns.the.most.pertinent.results..It.presents.these.results.to.the.user.after.ranking.t
hem.according.to.the.parameters.of.the.search.algorithm.

Ranking.System:.The.ranking.system.is.in.charge.of.arranging.the.search.results.according.to.the
ir.quality.and.relevancy. .The.order.of.the.results.is.determined.by.a.number.of.ranking.paramete
rs,.including.user.experience.signals,.page.authority,.keyword.relevancy,.and.content.quality.

User.Interface:.Users.type.their.queries.and.view.the.results.of.their.searches.on.the.search.engin
e's.front.end..Typically,.this.includes.a.search.bar,.search.buttons,.and.features.like.filters.and.a
dvanced.search.options.

Search.Results.Engine:.This.section.evaluates.the.user's.query,.matches.it .with.the.indexed.data,.a
nd.provides.the.most.relevant.results..The.user.is.presented.with.these.results.once.they.have.been.
ranked.based.on.the.search.algorithm's.parameters.

Ranking.System:.The.search.results.are.arranged.by.the.ranking.system.based.on.the.relevance.
and.quality.of.each.result..Several.ranking.factors,.such.as.user.experience.signals,.page.authorit
y, .keyword.relevancy, .and.content.quality, .influence.the.results'.order.

SET.2

4. Explain.the.Image.Attributes.with.examples.

Answer.:-
Image.Attributes
Image.attributes.are.like.the.details.or.instructions.you.give.about.an.image.to.make.sure.it.show
s.up.correctly.on.a.web.page..These.details.help.in.displaying,.positioning,.and.optimizing.the.i
mage..Knowing.these.attributes.helps.web.developers.and.designers.make.their.websites.look.g
ood.and.work.well.

Important.Image.Attributes.
src.(Source):

This.tells.the.browser.where.to.find.the.image.file..It.can.be.a.path.on.your.computer.or.a.link.to.a.
website.

<img.src="images/photo.jpg".alt="A.beautiful. landscape">.
alt.(Alternative.Text):

This.is.a.description.of.the.image..It's.useful.for.people.who.can't.see.the.image,.like.visually.impai
red.users.who.use.screen.readers,.and.also.shows.up.if.the.image.fails.to.load.
<img.src="images/photo.jpg".alt="A.beautiful. landscape">.t
itle:

This.gives.extra.information.about.the.image..When.you.hover.over.the.image.with.your.m
ouse,.a.little.tooltip.with.this.text.appears.
<img.src="images/photo.jpg".alt="A.beautiful.landscape".title="View.of.a.beautiful.landscape.
during.sunset">
width.and.height:

These.set.the.size.of.the.image.in.pixels..It.helps.the.browser.know.how.much.space.to.reserve.fo
r.the.image,.preventing.the.page.from.jumping.around.as.images.load.
<img.src="images/photo.jpg".alt="A.beautiful. landscape".width="600".height="400">.l
oading:

This.controls.when.the.image.should.load..If.set.to."lazy,".the.image.only.loads.when.it's.about.t
o.come.into.view,.which.can.make.the.page.load.faster.initially.
<img.src="images/photo.jpg".alt="A.beautiful. landscape".loading="lazy">.s
rcset.and.sizes:

These.are.used.for.responsive.design,.meaning.they.provide.different.versions.of.the.image.for
.different .screen.sizes.and .resolutions..This.way,.the.best-
suited.image.is.loaded.for.each.device.
<img.src="images/photo-small.jpg"
srcset="images/photo-small.jpg.480w,.images/photo-medium.jpg.800w,.images/photo-
.large.jpg.1200w"
sizes="(max-width:.600px).480px,.(max-
width:.900px).800px,.1200px".alt="A.beautiful.landscape">
Examples.and.Applications.
Responsive.Design:

Using.srcset.and.sizes,.you.can.ensure.images.load.correctly.on.all.devices,.whether.it's.a.phone,.ta
blet,.or.desktop.
<img.src="images/photo-small.jpg"
srcset="images/photo-small.jpg.480w,.images/photo-medium.jpg.800w,.images/photo-
.large.jpg.1200w"
sizes="(max-width:.600px).480px,.(max-
width:.900px).800px,.1200px".alt="A.beautiful.landscape">
Accessibility:

Adding.descriptive.alt.text.helps.visually.impaired.users.understand.what's.in.the.image.through
.screen.readers.
<img.src="images/photo.jpg".alt="A.beautiful.landscape.during.sunset.over.rolling.hills">.SE
O.Optimization:

Search.engines.use.alt.text.to.understand.what.the.image.is.about,.which.can.help.your.website.s
how.up.in.search.results.
<img.src="images/photo.jpg".alt="Beautiful.sunset.landscape.over.hills">.I
mproved.Page.Load.Times:
Using.the.loading.attribute.with."lazy".makes.the.page.load.faster.by.delaying.the.loading.of.imag
es.until.they.are.needed.
<img.src="images/photo.jpg".alt="A.beautiful. landscape".loading="lazy">.
Enhanced.User.Experience:

The.title.attribute.gives.users.more.context.or.information.when.they.hover.over.the.image.
<img.src="images/photo.jpg".alt="A.beautiful.landscape".title="Landscape.during.sunset.in.the
.mountains">

Conclusion
Image.attributes.are.essential.for.making.sure.images.on.a.website.look.good,.are.accessible,.and.l
oad.efficiently. .Attributes.like.src,.alt,.title,.width,.height,.loading,.srcset,.and.sizes.improve.how.i
mages.are.displayed.and.how.they.affect.the.user.experience..Understanding.these.attributes.help
s.in.creating.better.and.more.effective.web.pages.

5. What.are.the.differences.between.HTML.and.DHTML?

Answer.:-
Distinctions.In.contrast.to.HTML.and.DHTML
While.both.HTML.(HyperText.Markup.Language).and.DHTML.(Dynamic.HyperText.Marku
p.Language).are.vital.technologies.used.in.web.development,.their.functions.and.functionaliti
es.differ..For.web.developers.and.designers.to.properly.use.them.in.the.creation.and.enhancem
ent.of.web.sites,.it.is.imperative.that.they.comprehend.their.differences.

Markup.Language,.or.HyperText
Web.content.is.created.and.organized.using.HTML,.which.is.the.standard.markup.language..By.
defining.features.like.headings,.paragraphs,.links,.images,.and.forms,.it.offers.the.fundamental.b
uilding.blocks.for.web.pages..Being.a.static.language,.HTML.does.not.alter.the.content.it.defines.
unless.the.HTML.code.is.changed.

The.structure.and.content.of.an.HTML.page.are.its.key.features..Using.elements.and.tags,.content.i
s.arranged.into.a.hierarchical.structure.that.serves.as.the.page's.foundation..Use

for.paragraphs,.for.links,.Error!.Filename.not.specified.for.pictures,.and.fo

r.headings,.for.instance.

HTML.content.is.static,.which.means.that.it.doesn't.alter.dynamically.in.response.to.user.in
put.or.other.circumstances..It.is.necessary.to.alter.the.HTML.code.and.reload.the.page.whe
never.you.make.changes.to.the.content.

Declarative.Language:.HTML.is.declarative,.which.means.that.instead.of.giving.directions.on.
how.to.carry.out.tasks,.it.specifies.the.structure.and.content.of.a.web.page.

Basic.Layout.and.style:.While.elements.like.<table>.and.<font>.and.attributes.like.align.can.be.
used.to.include.basic.layout.and.style,.HTML.mostly.relies.on.CSS.(Cascading.Style.Sheets).fo
r.more.sophisticated.styling.and.layout.control.
Dynamic.HyperText.Markup.Language,.or.DHTML

Dynamic.and.interactive.web.pages.can.be.created.with.the.help.of.DHTML,.which.is.a.combin
ation.of.HTML,.CSS,.JavaScript,.and.the.Document.Object.Model.(DOM)..DHTML.enhances.
user.experience.by.providing.responsiveness.and.interaction.to.web.content,.allowing.it .to.upda
te.dynamically.without.requiring.a.page.refresh.

Key.DHTML.Features:
Interactivity:.Web.pages.may.react.to.keystrokes,.mouse.clicks,.and.other.user.input.thanks.to.DH
TML..JavaScript.is.used.to.accomplish.this,.as.it.has.the.ability.to.change.the.DOM.and.update.co
ntent.in.real.time.

Dynamic.Content:.DHTML.enables.dynamic.content.changes,.in.contrast.to.static.HTML..Ja
vaScript.can.be.used,.for.instance,.to.update.text,.pictures,.and.styles.in.response.to.user.input
—such.as.button.clicks.or.form.completion.

Styling.and.Animation:.DHTML.uses.CSS.to.apply. styles.in.real.time.and.produce.animated.gr
aphics..This.makes.it.possible.to.create.more.complex.visual.effects.like.sliders,.animated.men
us,.and.hover.effects.

Enhanced.User.Experience:.DHTML.improves.user.experience.by.enhancing.web.pages.with.m
ore.interactivity.and.engagement.through.the.combination.of.HTML,.CSS,.JavaScript,.and.the.
DOM..Real-time.data.updates,.dynamic.forms,.and.animated.elements.are.a.few.examples.

HTML.and.DHTML.Comparison:.Nature

Web.page.content.and.structure.are.defined.using.HTML,.a.static.language..DHTML:.
Dynamic,.which.combines.JavaScript,.DOM,.HTML,.and.CSS.to.produce.responsive.a
nd.interactive.web.pages.
Interaction:

HTML:.Reloading.the.page.is.necessary.to.make.changes;.little.interactivity.
DHTML:.Highly.interactive;.without.requiring.a.page.reload,.content.can.alter.dynamically.in.r
esponse.to.user.activities.
Updates.to.the.Content:

HTML:.In.order.to.alter.content,.you.must.edit.the.HTML.code.and.reload.the.page..DHTML:.J
avaScript.and.DOM.manipulation.are.used.to.change.content.dynamically..Animation.and.Style
:

HTML:.Basic.style.features;.sophisticated.styling.is.mainly.handled.by.CSS..D
HTML:.Animates.and.applies.dynamic.styling.using.JavaScript.and.CSS..Exp
erience.of.the.User:

HTML:.Offers.static.material.and.a.simple.user.interface.
Real-time.updates.and.interactive.components.make.DHTML.a.better.user.experience.
6. Define.the.CSS.Properties.in.details..
Answer.:-

CSS.Properties

Cascading.Style.Sheets.(CSS).is.a.stylesheet.language.used.to.describe.the.presentation.of.a.do
cument.written.in.HTML.or.XML..CSS.properties.allow.web.developers.to.style.and.layout.w
eb.pages..They.control.aspects.such.as.color,.font,.spacing,.positioning,.and.layout..Below.is.a.
detailed.explanation.of.some.key.CSS.properties.

Key.CSS.Properties.

Color:

The.color.property.sets.the.color.of.the.text.

css

Copy.code.

p.{

color:.blue;

Background:

The.background.property.is.a.shorthand.for.setting.multiple.background.properties.in.one.de
claration..It.can.include.background-color,.background-image,.background-
position,.background-size,.background-repeat,.and.background-attachment.

body.{

background:.#f0f0f0.url('background.jpg') .no-repeat.center.center/cover;

Font:

The.font.property.is.a.shorthand.for.setting.multiple.font.properties.in.one.declaration..It.can.inclu
de.font-style,.font-variant,.font-weight,.font-size,.line-height,.and.font-family.

h1.{
font:.italic.small-caps.bold.24px/1.5.Arial,.sans-serif;

Text:

text-align:.Aligns.text.horizontally.within.its.container.

h2.{

text-align:.center;

text-decoration:.Adds.decorations.to.text,.such.as.underline,.overline,.or.line-through.

a.{

text-decoration:.none;

text-transform:.Controls.text.capitalization.

p.uppercase.{

text-transform:.uppercase;

Margin:

The.margin.property.controls.the.space.outside.an.element..It.can.be.set.individually.for.each.side.(
top,.right,.bottom,.left).or.using.shorthand.

.box.{

margin:.10px.20px.30px.40px;

Padding:
The.padding.property.controls.the.space.inside.an.element,.between.the.element’s.content.an
d.its.border..It.can.also.be.set.individually.or.using.shorthand.

.container.{.paddi

ng:.15px;

Border:

The.border.property.is.a.shorthand.for.setting.border.width,.style,.and.color.in.one.de
claration.

.box.{

border:.2px.solid.black;

Width.and.Height:

The.width.and.height.properties.set.the.dimensions.of.an.element.

img.{

width:.100px;.

height:.auto;

Positioning:

position:.Defines.how.an.element.is.positioned.in.the.document..Possible.values.are.static,.rel
ative,.absolute,.fixed,.and.sticky.

.absolute.{

position:.absolute;.

top:.50px;
left:.100px;

z-index:.Controls.the.stacking.order.of.positioned.elements.

.overlay.{

position:.absolute;.

z-index:.10;

Display:

The.display.property.specifies.the.display.behavior.of.an.element..Common.values.include.block,.
inline,.inline-block,.flex,.grid,.and.none.

.hidden.{.displa

y:.none;

Flexbox:

The.display:.flex.property.creates.a.flexible.container.with.flexible.items. .Common.properties.
used.with.flexbox.include.flex-direction,.justify-content,.align-items,.and.flex.

.flex-

container.{.dis

play:.flex;

justify-content:.space-between;

.flex-

item.{.fle

x:.1;

Grid:
The.display:.grid.property.creates.a.grid.layout.container..Properties.like.grid-template-
.columns,.grid-template-rows,.grid-gap,.and.grid-area.are.used.to .define.the.grid.structure.

.grid-

container.{.dis

play:.grid;

grid-template-

columns:.repeat(3,.1fr);.grid-

gap:.10px;

.grid-item.{

background-color:.#ccc;

You might also like