My code will display a Hearthstone deck list.I'm still learning HTML and I'd like help with a few things: How readable is my code? How can I improve readability? Have I used any bad practices? What should I do instead? Is there any redundancy in my code?<!DOCTYPE html><html><head>    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>    <meta charset=UTF-8>    <title>Hearthstone Deck List</title>    <style>        body {            font-family: 'Lato', sans-serif;        }        img {            vertical-align: middle;        }        * {            box-sizing: border-box;        }        .card-list ul {            list-style-type: none;            margin: 0px;            max-width: 250px;            padding: 0px;        }        .card-list ul li {            margin: 1px;            position: relative;        }        a.card-frame {            background-color: #191919;            display: block;            font-size: 12.5px;            height: 25px;        }        a.card-frame:hover {            background-color: #646464;        }        a.card-frame span.card-cost,        a.card-frame span.card-count {            color: #FFFFFF;        }        a.card-frame span.card-cost,        a.card-frame span.card-name,        a.card-frame span.card-count {            height: 25px;            padding-top: 6.25px;            position: absolute;            text-align: center;        }        a.card-frame span.card-cost {            background-color: #005580;            left: 0px;            width: 25px;        }        a.card-frame span.card-name {            font-size: 9.375px;            left: 31.25px;            z-index: 1000;        }        a.card-frame span.card-count {            background-color: #323232;            right: 0px;            width: 25px;        }        a.card-frame span.card-image {            position: absolute;            right: 25px;        }        a.free-card span.card-name {            color: #FFFFFF;        }        a.common-card span.card-name {            color: #FFFFFF;        }        a.rare-card span.card-name {            color: #3296FA;        }        a.epic-card span.card-name {            color: #9632FA;        }        a.legendary-card span.card-name {            color: #FA9632;        }    </style></head><body>    <div class=card-list row>        <ul>            <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Inner_Rage><span class=card-cost>0</span><span class=card-name>Inner Rage</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/eNXNgqA.png></span></a></li>            <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Acidic_Swamp_Ooze><span class=card-cost>2</span><span class=card-name>Acidic Swamp Ooze</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/SuBSGCs.png></span></a></li>            <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Cleave><span class=card-cost>2</span><span class=card-name>Cleave</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/XWjnQc8.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Cruel_Taskmaster><span class=card-cost>2</span><span class=card-name>Cruel Taskmaster</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/vluCfAS.png></span></a></li>            <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Fiery_War_Axe><span class=card-cost>2</span><span class=card-name>Fiery War Axe</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/44gyjvy.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Flame_Juggler><span class=card-cost>2</span><span class=card-name>Flame Juggler</span><span class=card-count>2</span><span class=card-image card-count-ex><img src=http://i.imgur.com/EfXoFc4.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Haunted_Creeper><span class=card-cost>2</span><span class=card-name>Haunted Creeper</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/vcJeyH2.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Ship%27s_Cannon><span class=card-cost>2</span><span class=card-name>Ship's Cannon</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/5oayV5r.png></span></a></li>            <li><a class=card-frame rare-card href=http://hearthstone.gamepedia.com/Sparring_Partner><span class=card-cost>2</span><span class=card-name>Sparring Partner</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/M0NBfsq.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Unstable_Ghoul><span class=card-cost>2</span><span class=card-name>Unstable Ghoul</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/MOPFW2Z.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Scarlet_Crusader><span class=card-cost>3</span><span class=card-name>Scarlet Crusader</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/ZOIUwv3.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Arathi_Weaponsmith><span class=card-cost>4</span><span class=card-name>Arathi Weaponsmith</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/Q7x98If.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Dark_Iron_Dwarf><span class=card-cost>4</span><span class=card-name>Dark Iron Dwarf</span><span class=card-count>2</span><span class=card-image card-count-ex><img src=http://i.imgur.com/IrIovTL.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Dragonkin_Sorcerer><span class=card-cost>4</span><span class=card-name>Dragonkin Sorcerer</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/CiXAN9A.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Frigid_Snobold><span class=card-cost>4</span><span class=card-name>Frigid Snobold</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/aENN7T6.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Hungry_Dragon><span class=card-cost>4</span><span class=card-name>Hungry Dragon</span><span class=card-count>2</span><span class=card-image card-count-ex><img src=http://i.imgur.com/yn3ddha.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Piloted_Shredder><span class=card-cost>4</span><span class=card-name>Piloted Shredder</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/ayqsVa1.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Tomb_Spider><span class=card-cost>4</span><span class=card-name>Tomb Spider</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/WMFO9yi.png></span></a></li>            <li><a class=card-frame rare-card href=http://hearthstone.gamepedia.com/Violet_Teacher><span class=card-cost>4</span><span class=card-name>Violet Teacher</span><span class=card-count>2</span><span class=card-image card-count-ex><img src=http://i.imgur.com/egV3JLT.png></span></a></li>            <li><a class=card-frame rare-card href=http://hearthstone.gamepedia.com/Azure_Drake><span class=card-cost>5</span><span class=card-name>Azure Drake</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/huHFaVO.png></span></a></li>            <li><a class=card-frame epic-card href=http://hearthstone.gamepedia.com/Brawl><span class=card-cost>5</span><span class=card-name>Brawl</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/WotY3lV.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Clockwork_Knight><span class=card-cost>5</span><span class=card-name>Clockwork Knight</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/XHnknFn.png></span></a></li>            <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Archmage><span class=card-cost>6</span><span class=card-name>Archmage</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/jXhBQrK.png></span></a></li>            <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Boulderfist_Ogre><span class=card-cost>6</span><span class=card-name>Boulderfist Ogre</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/nMfmbT9.png></span></a></li>            <li><a class=card-frame legendary-card href=http://hearthstone.gamepedia.com/Illidan_Stormrage><span class=card-cost>6</span><span class=card-name>Illidan Stormrage</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/Xid9PyZ.png></span></a></li>            <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/North_Sea_Kraken><span class=card-cost>9</span><span class=card-name>North Sea Kraken</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/LlOdZs9.png></span></a></li>        </ul>    </div></body></html>            body {                font-family: 'Lato', sans-serif;            }                        img {                vertical-align: middle;            }                        * {                box-sizing: border-box;            }                        .card-list ul {                list-style-type: none;                margin: 0px;                max-width: 250px;                padding: 0px;            }                        .card-list ul li {                margin: 1px;                position: relative;            }                        a.card-frame {                background-color: #191919;                display: block;                font-size: 12.5px;                height: 25px;            }                        a.card-frame:hover {                background-color: #646464;            }                        a.card-frame span.card-cost,            a.card-frame span.card-count {                color: #FFFFFF;            }                        a.card-frame span.card-cost,            a.card-frame span.card-name,            a.card-frame span.card-count {                height: 25px;                padding-top: 6.25px;                position: absolute;                text-align: center;            }                        a.card-frame span.card-cost {                background-color: #005580;                left: 0px;                width: 25px;            }                        a.card-frame span.card-name {                font-size: 9.375px;                left: 31.25px;                z-index: 1000;            }                        a.card-frame span.card-count {                background-color: #323232;                right: 0px;                width: 25px;            }                        a.card-frame span.card-image {                position: absolute;                right: 25px;            }                        a.free-card span.card-name {                color: #FFFFFF;            }                        a.common-card span.card-name {                color: #FFFFFF;            }                        a.rare-card span.card-name {                color: #3296FA;            }                        a.epic-card span.card-name {                color: #9632FA;            }                        a.legendary-card span.card-name {                color: #FA9632;            }       <div class=card-list row>            <ul>                <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Inner_Rage><span class=card-cost>0</span><span class=card-name>Inner Rage</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/eNXNgqA.png></span></a></li>                <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Acidic_Swamp_Ooze><span class=card-cost>2</span><span class=card-name>Acidic Swamp Ooze</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/SuBSGCs.png></span></a></li>                <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Cleave><span class=card-cost>2</span><span class=card-name>Cleave</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/XWjnQc8.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Cruel_Taskmaster><span class=card-cost>2</span><span class=card-name>Cruel Taskmaster</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/vluCfAS.png></span></a></li>                <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Fiery_War_Axe><span class=card-cost>2</span><span class=card-name>Fiery War Axe</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/44gyjvy.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Flame_Juggler><span class=card-cost>2</span><span class=card-name>Flame Juggler</span><span class=card-count>2</span><span class=card-image card-count-ex><img src=http://i.imgur.com/EfXoFc4.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Haunted_Creeper><span class=card-cost>2</span><span class=card-name>Haunted Creeper</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/vcJeyH2.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Ship%27s_Cannon><span class=card-cost>2</span><span class=card-name>Ship's Cannon</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/5oayV5r.png></span></a></li>                <li><a class=card-frame rare-card href=http://hearthstone.gamepedia.com/Sparring_Partner><span class=card-cost>2</span><span class=card-name>Sparring Partner</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/M0NBfsq.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Unstable_Ghoul><span class=card-cost>2</span><span class=card-name>Unstable Ghoul</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/MOPFW2Z.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Scarlet_Crusader><span class=card-cost>3</span><span class=card-name>Scarlet Crusader</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/ZOIUwv3.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Arathi_Weaponsmith><span class=card-cost>4</span><span class=card-name>Arathi Weaponsmith</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/Q7x98If.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Dark_Iron_Dwarf><span class=card-cost>4</span><span class=card-name>Dark Iron Dwarf</span><span class=card-count>2</span><span class=card-image card-count-ex><img src=http://i.imgur.com/IrIovTL.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Dragonkin_Sorcerer><span class=card-cost>4</span><span class=card-name>Dragonkin Sorcerer</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/CiXAN9A.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Frigid_Snobold><span class=card-cost>4</span><span class=card-name>Frigid Snobold</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/aENN7T6.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Hungry_Dragon><span class=card-cost>4</span><span class=card-name>Hungry Dragon</span><span class=card-count>2</span><span class=card-image card-count-ex><img src=http://i.imgur.com/yn3ddha.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Piloted_Shredder><span class=card-cost>4</span><span class=card-name>Piloted Shredder</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/ayqsVa1.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Tomb_Spider><span class=card-cost>4</span><span class=card-name>Tomb Spider</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/WMFO9yi.png></span></a></li>                <li><a class=card-frame rare-card href=http://hearthstone.gamepedia.com/Violet_Teacher><span class=card-cost>4</span><span class=card-name>Violet Teacher</span><span class=card-count>2</span><span class=card-image card-count-ex><img src=http://i.imgur.com/egV3JLT.png></span></a></li>                <li><a class=card-frame rare-card href=http://hearthstone.gamepedia.com/Azure_Drake><span class=card-cost>5</span><span class=card-name>Azure Drake</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/huHFaVO.png></span></a></li>                <li><a class=card-frame epic-card href=http://hearthstone.gamepedia.com/Brawl><span class=card-cost>5</span><span class=card-name>Brawl</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/WotY3lV.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/Clockwork_Knight><span class=card-cost>5</span><span class=card-name>Clockwork Knight</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/XHnknFn.png></span></a></li>                <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Archmage><span class=card-cost>6</span><span class=card-name>Archmage</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/jXhBQrK.png></span></a></li>                <li><a class=card-frame free-card href=http://hearthstone.gamepedia.com/Boulderfist_Ogre><span class=card-cost>6</span><span class=card-name>Boulderfist Ogre</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/nMfmbT9.png></span></a></li>                <li><a class=card-frame legendary-card href=http://hearthstone.gamepedia.com/Illidan_Stormrage><span class=card-cost>6</span><span class=card-name>Illidan Stormrage</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/Xid9PyZ.png></span></a></li>                <li><a class=card-frame common-card href=http://hearthstone.gamepedia.com/North_Sea_Kraken><span class=card-cost>9</span><span class=card-name>North Sea Kraken</span><span class=card-count>1</span><span class=card-image card-count-ex><img src=http://i.imgur.com/LlOdZs9.png></span></a></li>            </ul>        </div>
Hearthstone deck list
html;css