Assignment Web Engineering Assignment

Create your own portfolio website with some information about your project. The style and layout are completely free to choose.

Even if you do your project together with someone else, each of you has to create his own website of which the layout and structure should be clearly different.

Beware of plagiarism ! If you use code from the net, then add a note to it and indicate where you found it!

Pages

Mandatory

• Project page (see appendix 1) that contains at least the following elements:
  
  
  • The title of your project
  • A logo or other small figure related to your project
  • A short description of who you are (be sure to mention your name,study discipline and phase) and what your project will be about. Feel free to advertise here!
  • A slideshow with a few pictures from your
  • If your project contains hardware , you make a block with a short explanation and a block diagram about your hardware
  • A short explanation with a block diagram about your software development.
  • A movie (optional)
  • A footnote with the copyright notice:
    "Copyright Thomas More Mechelen-Antwerp vzw - Campus De Nayer - Professional bachelor electronics-ict - 2024"
  • This overview is meant to advertise your project! So use CSS to make it look good. Do not use tables to put parts of the page in place! Show what you can do!

• CV page with:
  
  
  • information about yourself
  • information about your hobbies
  • information about any previous projects (GIP, ...)

• Contact page (see appendix 2) with:
  
  
  • Checking if all fields were completed correctly using
    JavaScript (no alerts and no required attribute)
  • Send the form data by email if the check is Otherwise nothing will be sent.

• Home page with:
  
  
  • Your own way to welcome your visitors and forward them to the rest of your portfolio website.

Structure (see appendix 3)

• Your website opens with the Home page (index.html). From here you can navigate to the rest of the site.
• The project page will have a poster-like layout, fully realized with CSS .

• The different pages of your website have the same basic style and structure (header, menu bars, content, footnote, ...).

Minimum requirements

• All pages must be 100% valid (validator.W3.org)
• Use HTML5
• Use a proper CSS ? reset
• Do not use any frameworks!
• Use only external stylesheets (reset.css, css, )
• Do not use tables to format your pages!
• Make sure your website remains well laid out and readable in Firefox , Chrome and Edge .

• Minimum 4 completed Show what you can. Make sure there is some variety in your pages. Show that you have a good understanding of CSS .
• Use padding and margin in the right way! Don't use break tags to make room!
• Use floats in at least 1 place and flexbox in at least 1 place to take care of the layout.

• Create a Contact form validated with Javascript (zie above), do not use alerts and do not use the required attribute in HTML!
• Create a Project page with poster-like layout (see above)
• Use jQuery in at least two places in a relevant You may use plugins but don't forget to mention the source of the plugin and of course you will get bonus points for working jQuery code that you wrote yourself.
• Make sure your layout also fits on a screen that is a little bit wider or smaller (wrapper).

Deadline and practical arrangements

This assignment counts for 40% of your lab exam. Moreover, during the exam, depending on the Covid situation at that time, there will be questions about your website. This explanation will also be quoted.

All websites must be submitted as a zip file via Canvas before 04/05/2025 at 23:59!!

Too late means less points (-1pt per day)!!

Evaluation criteria

• Site general:
  • all mandatory pages with requested content
  • extras
  • compatible for Edge, Firefox and Chrome
  • credits/prompts if using help from the internet
    
    
• HTML code:
  • all pages are valid
  • page structure with wrapper and min-width
  • menu structure with links in ul/li
  • correctly used HTML tags (lists for enumeration, paragraphs for text, labels correctly linked in form, ...)
    
    
• CSS code:
  • as age of css
  • all css in external files
  • correctly use the techniques provided (float and flex, position only if necessary)
  • set dimensions via width, height only if necessary
  • correct lay out of links in the navigation bar
  • complexity of chosen CSS formatting
  • variation in CSS formatting

• JavaScript/jQuery:
  • scripts run correctly
  • correct use of W3C DOM
  • complexity of scripts
  • show and remove message in contact form
  • include data form in mail

Appendix 1

Appendix 2

Appendix 3