Web Projects I introduces modern front-end development, from the foundations of the Web to interactive interfaces that consume data. Students work with semantic HTML, CSS, JavaScript and browser Web APIs, applying accessibility, responsive design, modular code organization, state management, asynchronous communication, local persistence and error handling. The subject combines explanations, demonstrations, Hands-On exercises and the incremental development of an integrating project through which students apply the course content and justify their technical decisions. Browser developer tools, validation and the working practices of a professional front-end environment are also used throughout the course.
Titular Professors
Professors
Previous study of HTML, CSS or JavaScript is not required because the subject introduces their foundations. Students should be familiar with basic programming concepts —variables, conditions, loops, functions, arrays and objects—, be able to organize files and folders, and work independently with a browser, a code editor and technical documentation, mainly in English.
By the end of the subject, students should be able to:
• Explain the relationship between the Internet, the Web, the browser, HTTP and client/server architecture.
• Structure accessible documents with semantic HTML, forms and multimedia content.
• Apply the cascade, selectors, the box model, Flexbox and Grid to create maintainable, responsive interfaces.
• Make a reasoned choice between custom CSS, Bootstrap and Tailwind without using a framework as a substitute for foundational knowledge.
• Program with modern JavaScript, modules, functions and data structures while avoiding implicit conversions and dependencies.
• Manipulate the DOM, manage events and interface state, and preserve accessibility during interaction.
• Consume APIs asynchronously, represent loading and error states and use local persistence when appropriate.
• Test, debug, document and technically defend a web application developed as a team.
The syllabus consists of ten core units and one optional extension unit:
1. Web and HTML foundations: Internet and Web, URLs, basic HTTP, the browser, DOM, document structure, links, images, lists, attributes, validation and DevTools.
2. Semantic HTML, forms, media and accessibility: landmarks, heading hierarchy, native controls, validation, responsive images, audio, video and keyboard testing.
3. CSS cascade, selectors and visual design: specificity, inheritance, layers, pseudo-classes, units, typography and maintainability.
4. Box model, flow and positioning: box-sizing, overflow, intrinsic dimensions, logical properties, positioning and stacking contexts.
5. Flexbox and one-dimensional layouts: axes, alignment, wrapping, gap, basis, grow, shrink and minimum sizes.
6. CSS Grid and responsive design: tracks, fr, minmax, auto-fit, areas, subgrid, media queries, container queries and clamp().
7. Interface patterns and visual frameworks: hero, CTA, cards, components, transitions, Bootstrap, Tailwind and selection criteria.
8. JavaScript fundamentals and modules: types, variables, control flow, arrays, objects, transformations, destructuring, modules and debugging.
9. Functions, DOM, events and state: pure functions, node selection and creation, safe output, delegation, forms and state-driven rendering.
10. Asynchronous JavaScript, APIs and persistence: Promises, fetch, async/await, JSON, errors, cancellation, interface states, HTTP, localStorage and MPA/SPA/hybrid strategies.
11. Optional extension: HTTP, TLS, origins and CORS, XSS, CSRF, CSP, WebSockets and front-end trust boundaries. This unit is complementary and will only be assessed if the teaching staff explicitly confirms this in writing.
The subject follows a Project-Based Learning methodology. Each week combines three teaching sessions: an initial session of approximately one hour to introduce concepts, analyse cases and demonstrate techniques, followed by two practical sessions —two hours in total— devoted to Hands-On exercises, problem solving, testing and project development.
The teaching materials organize learning as successive iterations of one guiding project. Each unit provides a deliverable or definition of done that requires students to apply the content in a realistic situation: first semantic structure, then visual and responsive design, and finally logic, state, APIs and persistence. Hands-On exercises are individual unless the brief states otherwise; the project in the ordinary examination session is completed in groups of three.
Teaching staff provide guidance and feedback during the sessions. Self-Paced Learning activities require students to consult documentation, test alternatives and justify their decisions. Validation, DevTools, keyboard and zoom testing, extreme content, network failures and other edge cases are part of the normal development process, not only the final check.
Ordinary examination session
MFinal = 0.7 × Mproject + 0.3 × Mknowledge. The formula is only applied when Mproject and Mknowledge are both at least 5.
Mknowledge is the average of the compulsory Hands-On exercises. Every exercise must be submitted by the deadline, meet the requirements in the brief and receive a minimum grade of 5. One exercise that is missing, rejected, submitted late without an authorized extension or graded below 5 means that Mknowledge is not passed in the ordinary examination session.
Mproject = ((0.9 × Mpm + 0.1 × Mdoc) × Mdoc_delivered) × Minterview. Mpm is the implementation grade; Mdoc is the documentation grade; and Mdoc_delivered and Minterview are Boolean variables (0/1). Mpm and Mdoc must each be at least 5. The report and interview are mandatory.
Extraordinary examination session
Only failed components are retaken. Mknowledge is retaken through one common examination covering the compulsory units, with a minimum grade of 5 and a maximum grade of 7. Mproject is retaken through an individual recovery practical task, report and interview, with a maximum grade of 7. If both components were failed, both retakes are required and the MFinal formula is applied again.
Use of artificial intelligence (AIAS)
- Weekly hands-on exercises and continuous assessment activities completed and assessed entirely in the classroom or laboratory (30%): Level 1 (No AI). They must be completed without the assistance of generative artificial intelligence tools.
- Final project and resit project (70%): Level 2 (AI Planning). AI may only be used for ideation, initial exploration, organisation and planning. It may not be used to generate, complete, correct or rewrite code, documentation or any other part of the submitted product.
- Project interview and individual defence: Level 1 (No AI).
Any permitted use of AI must be declared in the submission, identifying the tool used, its purpose, and the prompts or instructions entered. Any use exceeding the stated level, or any undeclared use, will be considered a breach of academic integrity rules. Students remain responsible for the authorship, accuracy and correct operation of all submitted material.
Assessment considers functionality, quality and understanding of the work. Each brief and rubric specifies the weight of its criteria and explicitly identifies any essential or blocking requirement. The following are generally assessed:
• Functional fulfilment of the brief and correct handling of normal, empty, invalid and error cases.
• Valid, semantic HTML with coherent hierarchy, forms, media and navigation that remain accessible with a keyboard and at increased zoom.
• Maintainable CSS: an explainable cascade, low specificity, correct box model, Flexbox/Grid layouts and robust behaviour across widths and content variations.
• Modern, modular JavaScript: coherent data, focused functions, safe DOM manipulation, events, state, asynchronous operations, APIs, persistence and visible loading or error states.
• Code quality, project organization, reasoned use of dependencies, validation, testing, DevTools-based debugging and absence of overflow or inaccessible content.
• Technical report, justification of decisions, traceability of team contributions, participation and the ability to defend the complete project individually.
To pass the subject, students must obtain at least 5 in both Mknowledge and Mproject, submit and pass every compulsory Hands-On exercise, and pass the report and interview under the conditions described in the assessment section.
WHATWG. HTML Living Standard. https://html.spec.whatwg.org/
Mozilla. MDN Web Docs: Learn web development and Web APIs. https://developer.mozilla.org/en-US/docs/Learn_web_development · https://developer.mozilla.org/en-US/docs/Web/API
ECMA International / TC39. ECMAScript Language Specification (ECMA-262). https://tc39.es/ecma262/
W3C Web Accessibility Initiative. Web Accessibility Tutorials. https://www.w3.org/WAI/tutorials/
Haverbeke, M. (2024). Eloquent JavaScript, 4th edition. https://eloquentjavascript.net/
Google Chrome Developers. Learn web development: HTML, CSS, JavaScript, accessibility, responsive design, forms and testing. https://web.dev/learn/
Google Chrome Developers. Chrome DevTools documentation. https://developer.chrome.com/docs/devtools/
Bootstrap Team. Bootstrap documentation. https://getbootstrap.com/docs/
Tailwind Labs. Tailwind CSS documentation. https://tailwindcss.com/docs/