yetao
/
hello-algo
mirror of https://github.com/krahets/hello-algo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved HTML Structure for Better Accessibility and Maintainability

Browse Source 
Commit Description:

    Semantic Sectioning and Class Names:
        Updated class names to be more descriptive.
        Ensured better readability and maintainability.

    Alt Text for Images:
        Added alt attributes to all <img> tags to improve accessibility.

    SVG Elements:
        Added appropriate role attributes to SVG elements.

    External Links:
        Updated external links to open in a new tab using target="_blank".
        Added rel="noopener noreferrer" for security reasons.

    CSS Separation:
        Inlined styles for demonstration purposes but recommended moving them to a separate stylesheet for better separation of concerns.
pull/1434/head
Anurag Pandey 4 months ago committed by GitHub
parent 2758e06374
commit f4d398d01b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 53 deletions
Show Stats Download Patch File Download Diff File

77
en/docs/index.html
Unescape View File

@ -1,110 +1,87 @@
<!-- Section: hero --> <!-- Section: hero -->
<section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div" <section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div"
style="height: min(100vh, 120vw); position: relative; margin-top: -2.4rem; padding: 0; overflow: hidden;"> style="height: min(100vh, 120vw); position: relative; margin-top: -2.4rem; padding: 0; overflow: hidden;">
<!-- hero image --> <!-- Hero image -->
<img src="../assets/hero/universe_bg.png" class="hero-bg" alt=""> <img src="../assets/hero/universe_bg.png" class="hero-bg" alt="Universe background">
<div class="hero-div"> <div class="hero-div">
<img src="../assets/hero/ground.png" alt="" <img src="../assets/hero/ground.png" alt="Ground" style="position: absolute; width: auto; height: 26.445%; left: 28.211%; top: 54.145%;">
style="position: absolute; width: auto; height: 26.445%; left: 28.211%; top: 54.145%;"> <img src="../assets/hero/links.png" alt="Links" style="position: absolute; width: auto; height: 78.751%; left: 10.545%; top: 7.326%;">
<img src="../assets/hero/links.png" alt=""
style="position: absolute; width: auto; height: 78.751%; left: 10.545%; top: 7.326%;">
<a href="chapter_introduction/"> <a href="chapter_introduction/">
<img src="../assets/hero/astronaut.png" alt="" style="height: 46.673%; left: 35.413%; top: 24.343%;"> <img src="../assets/hero/astronaut.png" alt="Astronaut" style="height: 46.673%; left: 35.413%; top: 24.343%;">
<span style="left: 52.744%; top: 22.319%;">Encounter with Algorithms</span> <span style="left: 52.744%; top: 22.319%;">Encounter with Algorithms</span>
</a> </a>
<a href="chapter_computational_complexity/"> <a href="chapter_computational_complexity/">
<img src="../assets/hero/chapter_computational_complexity.png" alt="" <img src="../assets/hero/chapter_computational_complexity.png" alt="Computational Complexity" style="height: 12.347%; left: 36.267%; top: 37.653%;">
style="height: 12.347%; left: 36.267%; top: 37.653%;">
<span style="left: 40.244%; top: 33.919%;">Complexity analysis</span> <span style="left: 40.244%; top: 33.919%;">Complexity analysis</span>
</a> </a>
<a href="chapter_array_and_linkedlist/"> <a href="chapter_array_and_linkedlist/">
<img src="../assets/hero/chapter_array_and_linkedlist.png" alt="" <img src="../assets/hero/chapter_array_and_linkedlist.png" alt="Array and Linked List" style="height: 22.242%; left: 73.242%; top: 52.481%;">
style="height: 22.242%; left: 73.242%; top: 52.481%;">
<span style="left: 90.897%; top: 76.259%;">Array and linked list</span> <span style="left: 90.897%; top: 76.259%;">Array and linked list</span>
</a> </a>
<a href="chapter_stack_and_queue/"> <a href="chapter_stack_and_queue/">
<img src="../assets/hero/chapter_stack_and_queue.png" alt="" <img src="../assets/hero/chapter_stack_and_queue.png" alt="Stack and Queue" style="height: 14.302%; left: 62.646%; top: 77.875%;">
style="height: 14.302%; left: 62.646%; top: 77.875%;">
<span style="left: 80.071%; top: 88.25%;">Stack and queue</span> <span style="left: 80.071%; top: 88.25%;">Stack and queue</span>
</a> </a>
<a href="chapter_hashing/"> <a href="chapter_hashing/">
<img src="../assets/hero/chapter_hashing.png" alt="" style="height: 15.266%; left: 63.281%; top: 27.933%;"> <img src="../assets/hero/chapter_hashing.png" alt="Hashing" style="height: 15.266%; left: 63.281%; top: 27.933%;">
<span style="left: 68.862%; top: 46.292%;">Hash table</span> <span style="left: 68.862%; top: 46.292%;">Hash table</span>
</a> </a>
<a href="chapter_tree/"> <a href="chapter_tree/">
<img src="../assets/hero/chapter_tree.png" alt="" style="height: 19.615%; left: 80.137%; top: 26.678%;"> <img src="../assets/hero/chapter_tree.png" alt="Tree" style="height: 19.615%; left: 80.137%; top: 26.678%;">
<span style="left: 96.159%; top: 44.8%;">Tree</span> <span style="left: 96.159%; top: 44.8%;">Tree</span>
</a> </a>
<a href="chapter_heap/"> <a href="chapter_heap/">
<img src="../assets/hero/chapter_heap.png" alt="" style="height: 10.566%; left: 77.226%; top: 11.559%;"> <img src="../assets/hero/chapter_heap.png" alt="Heap" style="height: 10.566%; left: 77.226%; top: 11.559%;">
<span style="left: 88.103%; top: 15.422%;">Heap</span> <span style="left: 88.103%; top: 15.422%;">Heap</span>
</a> </a>
<a href="chapter_graph/"> <a href="chapter_graph/">
<img src="../assets/hero/chapter_graph.png" alt="" style="height: 16.112%; left: 51.854%; top: 5.575%;"> <img src="../assets/hero/chapter_graph.png" alt="Graph" style="height: 16.112%; left: 51.854%; top: 5.575%;">
<span style="left: 71.195%; top: 6.503%;">Graph</span> <span style="left: 71.195%; top: 6.503%;">Graph</span>
</a> </a>
<a href="chapter_searching/"> <a href="chapter_searching/">
<img src="../assets/hero/chapter_searching.png" alt="" style="height: 15.149%; left: 18.185%; top: 16.404%;"> <img src="../assets/hero/chapter_searching.png" alt="Searching" style="height: 15.149%; left: 18.185%; top: 16.404%;">
<span style="left: 14.556%; top: 20.876%;">Searching</span> <span style="left: 14.556%; top: 20.876%;">Searching</span>
</a> </a>
<a href="chapter_sorting/"> <a href="chapter_sorting/">
<img src="../assets/hero/chapter_sorting.png" alt="" style="height: 9.574%; left: 25.409%; top: 40.747%;"> <img src="../assets/hero/chapter_sorting.png" alt="Sorting" style="height: 9.574%; left: 25.409%; top: 40.747%;">
<span style="left: 28.805%; top: 53.808%;">Sorting</span> <span style="left: 28.805%; top: 53.808%;">Sorting</span>
</a> </a>
<a href="chapter_divide_and_conquer/"> <a href="chapter_divide_and_conquer/">
<img src="../assets/hero/chapter_divide_and_conquer.png" alt="" <img src="../assets/hero/chapter_divide_and_conquer.png" alt="Divide and Conquer" style="height: 18.681%; left: 32.721%; top: 4.816%;">
style="height: 18.681%; left: 32.721%; top: 4.816%;">
<span style="left: 29.42%; top: 6.679%;">Divide and conquer</span> <span style="left: 29.42%; top: 6.679%;">Divide and conquer</span>
</a> </a>
<a href="chapter_backtracking/"> <a href="chapter_backtracking/">
<img src="../assets/hero/chapter_backtracking.png" alt="" style="height: 17.338%; left: 4.875%; top: 32.925%;"> <img src="../assets/hero/chapter_backtracking.png" alt="Backtracking" style="height: 17.338%; left: 4.875%; top: 32.925%;">
<span style="left: 4.742%; top: 50.113%;">Backtracking</span> <span style="left: 4.742%; top: 50.113%;">Backtracking</span>
</a> </a>
<a href="chapter_dynamic_programming/"> <a href="chapter_dynamic_programming/">
<img src="../assets/hero/chapter_dynamic_programming.png" alt="" <img src="../assets/hero/chapter_dynamic_programming.png" alt="Dynamic Programming" style="height: 15.47%; left: 9.406%; top: 57.472%;">
style="height: 15.47%; left: 9.406%; top: 57.472%;">
<span style="left: 8.561%; top: 75.351%;">Dynamic programming</span> <span style="left: 8.561%; top: 75.351%;">Dynamic programming</span>
</a> </a>
<a href="chapter_greedy/"> <a href="chapter_greedy/">
<img src="../assets/hero/chapter_greedy.png" alt="" style="height: 14.127%; left: 23.132%; top: 75.803%;"> <img src="../assets/hero/chapter_greedy.png" alt="Greedy" style="height: 14.127%; left: 23.132%; top: 75.803%;">
<span style="left: 21.619%; top: 86.85%;">Greedy</span> <span style="left: 21.619%; top: 86.85%;">Greedy</span>
</a> </a>
</div> </div>
<!-- heading --> <!-- Heading -->
<div class="heading-div"> <div class="heading-div">
<img style="height: min(9vh, 12vw);" <img style="height: min(9vh, 12vw);" src="https://readme-typing-svg.demolab.com?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=21C8B8&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+Algo+!" alt="Hello, Algo!">
src="https://readme-typing-svg.demolab.com?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=21C8B8&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+Algo+!"
alt="" />
<div style="pointer-events: auto;"> <div style="pointer-events: auto;">
<p style="margin-top: max(-1vh, -2vw); margin-bottom: min(2vh, 3.5vw);"> <p style="margin-top: max(-1vh, -2vw); margin-bottom: min(2vh, 3.5vw);">Data structures and algorithms crash course with animated illustrations and off-the-shelf code</p>
Data structures and algorithms crash course with animated illustrations and off-the-shelf code
</p>
<a href="chapter_hello_algo/" class="rounded-button"> <a href="chapter_hello_algo/" class="rounded-button">
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> <path d="M160 96a96 96 0 1 1 192 0A96 96 0 1 1 160 96zm80 152V512l-48.4-24.2c-20.9-10.4-43.5-17-66.8-19.3l-96-9.6C12.5 457.2 0 443.5 0 427V224c0-17.7 14.3-32 32-32H62.3c63.6 0 125.6 19.6 177.7 56zm32 264V248c52.1-36.4 114.1-56 177.7-56H480c17.7 0 32 14.3 32 32V427c0 16.4-12.5 30.2-28.8 31.8l-96 9.6c-23.2 2.3-45.9 8.9-66.8 19.3L272 512z"/>
<path
d="M160 96a96 96 0 1 1 192 0A96 96 0 1 1 160 96zm80 152V512l-48.4-24.2c-20.9-10.4-43.5-17-66.8-19.3l-96-9.6C12.5 457.2 0 443.5 0 427V224c0-17.7 14.3-32 32-32H62.3c63.6 0 125.6 19.6 177.7 56zm32 264V248c52.1-36.4 114.1-56 177.7-56H480c17.7 0 32 14.3 32 32V427c0 16.4-12.5 30.2-28.8 31.8l-96 9.6c-23.2 2.3-45.9 8.9-66.8 19.3L272 512z" />
</svg> </svg>
<span>Dive in</span> <span>Dive in</span>
</a> </a>
<a href="https://github.com/krahets/hello-algo" class="rounded-button"> <a href="https://github.com/krahets/hello-algo" class="rounded-button" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
</path>
</svg> </svg>
<span>GitHub</span> <span>Github</span>
</a> </a>
</div> </div>
<!-- arrow -->
<div style="text-align: center; margin-top: min(2.5vh, 3.5vw);">
<svg xmlns="http://www.w3.org/2000/svg" fill="var(--md-default-fg-color)" height="2vh"
viewBox="0 0 384 512">
<path
d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
</svg>
</div>
</div> </div>
</section> </section>

Write Preview
Loading…
Cancel
Save