Web Technologies Assignment: Practical 2 (A2 Website)

Aim of A2 Website

In this Practical, you will be required to build a small website of exactly three separate pages in two different ways:

    1) using a responsive web framework and

    2) using adaptive web design.

This website will be modelled on a news website, and will contain a home page, an article page, and a contact page. The pages will contain mock data rather than real news stories.

On the homepage, there should be up to four columns containing the latest news articles written by the news organisation. These articles should be presented on the homepage with a title, a short description and an image for each article. It should be possible to click on the article’s title which should go directly to the article page. Note, all articles displayed on the homepage should go to the same article page (described next).

On the article page, this should contain the title of the article, the actual content of the article (text, images and videos) and a list of related articles. You are free to structure this as you wish, but an example structure could be a main title, with the content of the article underneath and a list of related articles somewhere else on the page (for example on the right of the page or below the article).

On the contact page, this should include a contact form to get in touch with the news organization.

This should allow a user to type in their name, email address and a short message.






 


Requirements

You should build this website using a responsive web framework (such as Bootstrap) and then making use of adaptive web design (a purpose-built desktop version and separate mobile version of your website). Your website must validate successfully with no errors in your HTML or CSS. If there are warnings, then this must be briefly discussed in your report. The links to the HTML and CSS validators can be found here (https://validator.w3.org/ and https://jigsaw.w3.org/css-validator/ You do not need to come up with content, but can instead use “Lorem Ipsum” which you can find here: https://www.lipsum.com/. Additionally, images and videos can be found on free media content sites such as Pixabay (https://pixabay.com/) or Pexels (https://www.pexels.com/).

You should then write a report (of no more than 1,500 words) describing what you did, the approach you took and any challenges that you encountered in the building of your website. Please do not post screenshots of your code in your report, your report should instead be used to describe your approach, design, reflection on how you found the task and any challenges you encountered.

Submission

A single zip containing your code and report must be uploaded electronically via MMS by the deadline.

Assessment Criteria

Marking will follow the guidelines given in the school student handbook: http://info.cs.st-andrews.ac.uk/student-handbook/learning-teaching/feedback.html#Mark_Descriptors

Standard lateness penalties will apply as laid out in https://info.cs.st-andrews.ac.uk/student-handbook/learning-teaching/assessment.html#lateness-penalties.

The policy on Good Academic Practice can be found here: https://www.st-andrews.ac.uk/students/rules/academicpractice/

Quality is very important here and is key to you obtaining the highest marks. Please ensure your reports are clear and well written and that your code is clear and easy to read/follow. You may wish to use comments in your code to achieve this.

























2022/23