✨ Eljie Peteros

Web Design & Development Portfolio

⚡ JavaScript Interactive Section

📋 A. Variables & Output (10 pts)

🔔 B. Button Function - Alert (10 pts)

Click the button to see an alert with a message:

✍️ C. User Input - Dynamic Display (10 pts)

Type something and watch it display in real-time:

Your text will appear here...

🎯 D. Event Handling - Dynamic Content (10 pts)

Click buttons to change content dynamically:

Content 1 - Web Development Fundamentals

Web development is the process of creating websites and web applications. It encompasses both the frontend (user interface) and backend (server-side logic) components.

Content 2 - HTML5 Structure

HTML5 introduced semantic elements like <header>, <nav>, <article>, <section>, <aside>, and <footer> to provide better structure and meaning to web content.

Content 3 - CSS3 Styling

CSS3 brings advanced features like gradients, animations, transformations, and flexbox/grid layouts. These features enable developers to create modern, responsive, and beautiful user interfaces.

📱 Featured Articles

🎨 Understanding Web Development

Web development combines the art of design with the science of programming. Creating effective web pages requires a solid understanding of HTML, CSS, and JavaScript. These three technologies work together to create beautiful, functional, and responsive digital experiences.

🏗️ The Importance of Semantic HTML

Semantic HTML uses meaningful tags like <header>, <nav>, <article>, and <footer> to provide structure and meaning to web content. This approach improves accessibility for all users, enhances SEO rankings, and makes your website more discoverable and easier to navigate.

🎯 CSS Styling Best Practices

Effective CSS styling involves using different selectors strategically. Tag selectors apply styles globally, class selectors target specific groups of elements, and ID selectors style unique elements. Combining these approaches creates flexible, maintainable stylesheets that enhance user experience and code readability.

📱 Creating Responsive Designs

Modern web design must account for various screen sizes and devices. Using media queries and flexible layouts ensures your website looks great on desktops, tablets, and mobile devices. This responsive approach is essential for engaging users across all platforms and improving overall accessibility.