Quick Facts
EldenGuides
Genre: Gaming Information Website
Role: Solo Developer
Language: HTML, CSS
View Repository ->HTML5 | CSS3 | Front-End Development
Research, Discover, and Explore Elden Ring's Information.
EldenGuides is a responsive fan website designed to help Elden Ring players discover guides, explore game mechanics, and access useful gameplay tools through a clean and intuitive interface..
Project Overview
Website Summary: EldenGuides is a responsive website created for Elden Ring players looking for guides, resources, and helpful tools. The website provides organised navigation to different areas of the game while maintaining a consistent visual design inspired by Elden Ring's atmosphere and aesthetic.
Core Goal: The goal of the project was to design and develop an easy-to-navigate gaming website that demonstrates responsive web design principles, user-focused layouts, and consistent styling while providing useful information for players.
Development Context: This project was developed to improve my front-end web development skills using HTML and CSS. It focused on responsive layouts, website navigation, visual consistency, accessibility, and creating a user-friendly browsing experience.
What I Learned: During development I significantly improved my understanding of
- Responsive web design
- HTML semantic structure
- CSS layouts
- Navigation design
- Dropdown menus
- User experience design
- Visual consistency
- Responsive navigation
- Website accessibility
- Page layout planning
Biggest Challenge: One of the biggest challenges was designing a navigation system that worked well across both desktop and mobile devices. Creating responsive dropdown menus while keeping navigation intuitive and visually clean required careful planning of the page layout and user experience.
Features
Navigation And Responsive Design
The website features a responsive navigation system that adapts to different screen sizes,
providing a dropdown menu for smaller devices while displaying a full navigation bar on desktop.
Implementation Notes
- Responsive navigation bar
- Mobile dropdown menu
- Desktop navigation layout
- Footer social media links
- Consistent page navigation i>
Guides And Resources
Players can browse multiple guide categories covering different areas of Elden Ring through organised sections
and collapsible dropdown menus.
Implementation Notes
- Guide categories
- Dropdown content sections
- Visual category cards
- Gaming resources
- Information hub
User Interface And Design
The website uses a colour palette and imagery inspired by Elden Ring to create an immersive experience
while maintaining readability and consistent styling.
Implementation Notes
- Responsive layouts
- Consistent styling
- Game-themed colour palette
- Hero video integration
- Sign-up page
Roadmap and Iteration
Completed
- Responsive navigation
- Homepage
- Guide pages
- Items page
- Responsive layouts
- Footer navigation
- Sign-up page
- Dropdown menus
- Social media integration
In Progress
- No active development.
- Project completed as a front-end portfolio piece.
- Future improvements listed separately.
Future Ideas
- Game update announcements
- User accounts
- Interactive build planner
- Boss strategy pages
- Search functionality
- Comment system
- Interactive maps
- Build calculators
- Community forums
Media and Links
Project Repository
Explore the complete source code for EldenGuides, including the responsive layouts,
navigation system, page structure, and styling used throughout the project.
Live Demo
View the live website to explore the responsive interface, navigation system, guide pages,
and overall user experience.
Technical Notes
EldenGuides was developed using HTML and CSS with a strong focus on responsive web design and user experience.
The website features semantic HTML structure, responsive navigation, dropdown menus, and consistent page layouts that adapt across desktop and mobile devices.
A game-inspired colour palette, imagery, and embedded media were used to create an immersive browsing experience while maintaining readability and accessibility.
Throughout the project I strengthened my understanding of front-end development, responsive layouts, CSS styling, navigation design, and creating user-focused websites.
Technologies Used
- HTML5
- CSS3
- Git
- GitHub Pages
- Visual Studio Code