Ana Lúcia Engenharia is a front-end web project developed to simulate a professional engineering website, with a focus on interactivity, DOM manipulation, and structured JavaScript logic. The website allows user interaction through dynamic elements and scripts, serving as a practice project for combining HTML, CSS, and JavaScript in a real-world–like scenario.
• Interactive elements handled with JavaScript • Dynamic behavior controlled via DOM manipulation • Structured layout using semantic HTML • Responsive styling with CSS • Organized assets (images, fonts, vendor files) • Interactive form validation with JavaScript • Custom validation feedback using DOM manipulation • Submit button state control based on form validity
• HTML5 – semantic structure and content organization • CSS3 – layout, responsiveness, and visual styling • JavaScript (Vanilla JS)
• index.html – main application markup • style.css – global styles and responsiveness • scripts/ – JavaScript files handling interactivity and logic • blocks/ – reusable layout blocks (CSS architecture) • images/ – image assets • vendor/ – third-party or external resources
• Clone or download the repository
• Open index.html in your browser
Optional (recommended):
• Run a local server (e.g. VS Code Live Server) to avoid path issues and better simulate a real environment
✅ Completed (learning project) Future improvements may include refactoring and code reuse.
• Breaking functionality into small, reusable JavaScript functions • Separating responsibilities between: • UI state (open/close elements) • User-triggered events • DOM updates • Using defer to ensure scripts load after HTML parsing • Organizing files to keep logic, styles, and assets clearly separated
Special attention was given to:
• Understanding event flow (click, submit) • Reading from and writing to the DOM correctly • Maintaining clean and readable code structure
• GitHub: https://github.com/RodrigoMZanetti • LinkedIn: https://www.linkedin.com/in/rodrigomaturanozanetti/