A semantic and accessible blog template created using pure HTML5 and external CSS. This project was developed as part of the Frontend Developer track on Hyperskill (JetBrains Academy).
👤 Developer: David Alves
🎓 Hyperskill Profile: View my learning progress
Blogs serve as a widely-used medium for individuals to express their thoughts and ideas. They cover a wide range of topics, including sports, science, art, and technology.
In this project, the objective was to create a robust blog template website using HTML5 and CSS. The focus was on mastering semantic structure, ensuring the website is accessible and well-organized for search engines and screen readers, while separating structure (HTML) from presentation (CSS).
- Semantic HTML5: Proper use of tags like <header>, <main>, <section>, <article>, and <aside> to define document structure.
- External CSS: Styling is separated into a style.css file for better maintainability and cleaner code.
- Multimedia Integration:
- Embedded Video player using the <video> tag.
- Embedded Audio player using the <audio> tag.
- Navigation & Links: A structured navigation bar and ordered lists for popular content.
- Contact Info: A dedicated footer with mailto links and formatted address information.
- Structure: HTML5
- Style: CSS3 (External stylesheet)
Follow these steps to run the project locally on your machine.
-
Clone the repository:
git clone https://github.com/david-alvs/hs-hyperblog-html.git -
Navigate to the project directory:
cd hs-hyperblog-html -
Open the file in your browser:
Simply double-click index.html or open it with your preferred web browser.
During the development of this project, I focused on:
- Separation of Concerns: Keeping the content in HTML and the visual style in a separate CSS file.
- Document Flow: Understanding the hierarchy of web pages (header, main, footer).
- Semantic Tags: Learning why using <article> is better than <div> for independent content.
- Media Elements: How to natively embed video and audio files with controls.
- Nesting: The challenge of properly grouping articles within sections to meet strict validation requirements.
- Project provided by Hyperskill / JetBrains Academy.
Made with 💻 and HTML5 by David Alves.