D&D with Lee

Web Development - Assignment 1

Description

This is a html website that is to act as a resource for new players to find their footing in the world of Dungeons and Dragons. It is also a space where I can share my interests with others who share that same hobby.

The project overall was definitely a lot more work that I initially anticipated. It seemed that the closer I came to finishing one section, the more content I realised that I could add. So overall, I would say the site is not finished, in that I could continuously add more content to it.

Navigation

For the most part, the site is easily navigated using the sidebar menu on the left-hand side. There are a few pages that can only be accessed from another page, to not make the menu too long, such as the articles linked on the content page, as well as contact link in the footer.

Example - Content:

Regarding the content page, not all of grid cells contain a link to an article at the minute, as I already had many pages and was creating content myself. However, it shows how this site has room to expand and grow.

When clicking any of points with links - such as the social media icons and the resources, then content does not open in a new tab. I would recommend right-mouse-click New Tab so that you don't have to keep navigating back to the website.

Example - Socials:

Additional Sources

Sites I used:

1. round image - https://www.w3schools.com/howto/howto_css_rounded_images.asp

2. sidebar navigation - https://blog.hubspot.com/website/css-sidebar https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp

3. hero image heade - https://www.w3schools.com/howto/howto_css_hero_image.asp

4. change link colours - https://www.w3schools.com/css/css_link.asp

5. Social logos in a row - https://www.w3schools.com/howto/howto_css_images_side_by_side.asp https://www.w3schools.com/cssref/pr_class_float.php

6. text shadow to make text stand out - https://www.w3schools.com/cssref/css3_pr_text-shadow.php https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

7. hyperlink images - https://www.tutorialspoint.com/How-to-use-an-image-as-a-link-in-HTML

8. video embed - https://www.w3schools.com/html/html_youtube.asp

Icons and Images:

1. facebook - Facebook icons created by Freepik - Flaticon

2. instagram - Instagram icons created by Freepik - Flaticon

3. tiktok - Tiktok icons created by Freepik - Flaticon

4. email - Email icons created by Freepik - Flaticon

5. discord - Discord icons created by justicon - Flaticon

6. phone - Phone icons created by Freepik - Flaticon

7. adventure gidf (index) - https://images.app.goo.gl/Cu5181C9mUbyEfjdA

8. basic rules (start) - https://images.app.goo.gl/SU7buPiMTdrTVBnB7

9. character sheet (start) - https://images.app.goo.gl/2Pkacffm9sc1sdyh6

10. dnd beyond (resources) - https://images.app.goo.gl/ypB5x9NpuyiiVnU48

11. inkarnate (resources) - https://images.app.goo.gl/2UeGz6sYFWi1NRQy6

12. dmsguild (resources) - https://images.app.goo.gl/jZQjgqMfxzdUqrbR9

13. heroforge (resources) - https://images.app.goo.gl/JfLdA991toGSxAA4A

14. dimension 20 (content) - https://images.app.goo.gl/kqGPsMNfWhASKnwd9

15. dungeons & daddies (content) - https://images.app.goo.gl/CxNwqmnZZc9uDWUUA

16. critical role (content) - https://images.app.goo.gl/Q8ssDyzeYdUY7NgWA

17. not another dnd (content) - https://images.app.goo.gl/sDQZX1GXw8UZazFb6

18. unprepared casters (content) - https://images.app.goo.gl/KEWadkVJ2QbRFohm8

19. high rollers (content) - https://images.app.goo.gl/Y8vb8rRxoHvcPcn77

20. underworld gaming (stores) - https://images.app.goo.gl/2s7xNyJqHrJJcdBG7

21. donuts (stores) - https://images.app.goo.gl/34rCoyMJvXTFw7dM8

22. gamers world (stores) - https://images.app.goo.gl/7Y3zErtrd26JLjYn6

23. dakota irish (stores) - https://images.app.goo.gl/68GnUcwxWUVawdAd8

Remaining images are my own.