[A] HTML & CSS

In this assignment you will build a small website. This will show that you can manage HTML and CSS show that you manage to use the techniques together when building a website.

Grading

This is an individual assignment.

This assignment is graded as Fail (U) or Pass (G) and it is worth 1 credit/hp.

Preconditions

You have basic knowledge in HTML and CSS.

You have access to the course environment on GitLab.

Prepare

There are no specific tasks to prepare yourself, besides working through all the course material that leads up to this assignment.

Get going

Get going with the assignment by cloning and preparing the assignment repo.

Clone the assignment repo

  1. You have a git repo on GitLab named "a1-website", available below your lnu student acronym in the course at GitLab. Start of by cloning the repo to your computer ("xxx" is your lnu-username):
‌‌‌‌‌

Add the development tools

You need to add all the linters and development tools into the assignment repo.

Check the article "Development tools and linters" to see how you do that.

Requirements

These are the requirements to fullfill the assignment.

General structure

  1. You create all the files, for this assignment, in the directory public/.

  2. All the pages should have the same header, navbar and footer and they should look the same. The only thing that differs between the pages is their main content.

  3. Each page has a body with a main section with the page actual content. Some pages also have content in aside sections.

  4. Create a favicon image and use it on all pages.

  5. Feel free to create the website with a theme or for some imaginary person or organisation. It might be more fun to do that.

  1. The site header should contain an image, a site title and another site subtitle or slogan of your site.

  2. Feel free to add a background image to the site header, or to the whole website.

  1. The pages shall have a navigation part to make it possible to navigate between the pages by clicking the links in the navbar. The navbar can be its own section, or included into the header section, your choice.

  1. Add a triptych (three equal sections on one row) footer and put it at the bottom of each page.

  2. In one of the triptychs you should add links to MDN reference manual for HTML and CSS (use a HTML list element).

  3. In one triptych you can add links to the HTML and CSS validators, using a list.

  4. At the last triptych, add links to the W3C standard for HTML and CSS.

Stylesheet public/css/style.css

  1. Prepare the file public/css/style.css to contain style for the website.

  2. Add a comment at the top of the file and add your name to the file.

  3. Add style to your website as you go along. Make it look good.

Page public/page.html

  1. Create an article element and write a short story with text about yourself (or an imaginary person).

  2. Add one or more images to illustrate the story and make the text float around the images.

  3. As a footer to the article, add a byline containing details of the author. The byline should contain an image and some text about yourself (or the imaginary author) and add a border around it.

Page public/typography

  1. Add a page typography.html.

  2. Into main, add the content from the following page. It is examples on a lot of typographic elements.

  3. Change the style for half or more of the text elements.

  4. It might be a good suggestion to at least use one fontfamily for h1-h6 and another font-family for the body text.

  5. Feel free to import external fonts. Google Fonts has some to choose from.

Page with form public/form.html

  1. Add a page form.html.

  2. Create an imaginary THML form where you should submit your credit card details including name, amount to be drawn from the card, type of card, card number, validity and include a submit button.

  3. Use CSS to style the form to make it look good.

Two column page public/about.html

  1. Add a page about.html which should contain two columns. One column is the main column and the other is the aside column.

  2. You can place the aside to the left or the right of main.

  3. In the main part, write your a few paragraphs with your own thoughts and expectaions on this course. Add some image representing your thoughs.

  4. In the aside, add a section with an header "Related" and a list of links to course related stuff.

Three column page public/column3.html

  1. Add a page column3.html which contains three columns. The main is in the middle and it is surrounded by two aside columns.

  2. It should be very visible that there are three columns and the main/center column should be the widest column.

  3. You may put any content into the columns, mix text, images and links.

Mobile responsive

  1. Use CSS to make your website responsive using media queries by adapting the width and/or visibility of the two and three column pages.

  2. Use media queries for the footer triptych and make it responsive.

  3. Stack the elements when the width is to narrow.

  4. Do not hide elements.

Linters

  1. Run the linters npm run lint and verify that no errors exists.

Webserver

  1. Run the webserver npm run http-server and verify that all parts of the site works.

README.md

  1. In the README.md (.md means Markdown), provide a few instructions to the teacher on how to clone your repo, run the linters, start a webserver and then how to access your website. This is like writing documentation for your repo.

Submission

This is how to submit this assignment.

  1. Add a tag v1.0.0 to your repo when you are done. If you make updates then add another tag like v1.0.1 or v1.1.0 and so on.

  2. Ensure you have committed and pushed all your changes, including the tags, to GitLab.

  3. Create an issue on the repo and answer the following questions in it. Write freely with 15 to 30 sentences of text.

    1. Did you know and/or had used HTML and CSS before this assignment?

    2. Briefly explain, with your own words, about HTML to a person who have never heard of it before.

    3. Briefly explain, with your own words, about CSS to a person who have never heard of it before.

    4. Elaborate on the importance of keeping HTML (markup and content) and CSS (style and layout) as two separate items. Is it important and in that case why? Can it be completely separated or do they somehow depend on each other?

    5. Is there something you did not do with your website but you would like to do if you had the time and skill? It could pehaps be some improvements.

    6. What is your TIL for this course part?

  4. When you are done, assign the issue to the teacher, to show that you are ready for grading. The teacher will be notified by mail.

What is a TIL? TIL is an acronym for "Today I Learned" which playfully indicates that there are always new things to learn, every day. You usually pick up things you have learned and where you might have hiked to a little extra about its usefulness or simplicity, or it was just a new lesson for the day that you want to note.