Final assessment

The exercise consists of developing a website according to a given design. Several points have to be solved:

• Use Sass.
• Use flexbox and CSS Grid.
• Use media queries.
• Solve some interactions using transitions.

Mobile version (in a single column down)

Tablet and Desktop version:

Layout

1. The hamburger button (in the top left corner) should be fixed at the top of the screen and should not disappear when scrolling. The hamburger icon must be a link to a Adalab´s web page. This hamburger menu does not display any submenus.
2. First module (Hero): it must be laid out with flexbox and must occupy the total height of the browser window.
3. Second module (Tips): it can be laid out using CSS properties of your choice.
4. Third module (3 Reasons): the 3 elements of the list must be laid out with CSS Grid in at least one screen size.
5. Fourth module (Footer): it must be laid out using flexbox. All texts in the column "ARTICLES" and all the texts in the "TWITTER" column must be links.

Interaction

In total, there are several interactions to resolve:

1. The arrow button in the hero module must link to the "3 Reasons" section.
2. The footer arrow button must link to the top of the page.
3. All footer links should go to https://adalab.es.
4. In the hover of the buttons ("Go" and "3 Reasons") you must include a transition.
5. BONUS: make a small animation in the footer button.

---

Assessment criteria

General:

• Use a proper file and folder structure for a web project, and link the different files and folders well.
• Use version control with branches to manage a code project.

HTML

• Have the code perfectly indented
• Create HTML code with correct, well-structured syntax.
• Use appropriate semantic HTML tags for each piece of content.

CSS / Sass

• Have the code perfectly indented
• Create Sass code with correct, well-structured syntax.
• Use some Sass features such as variables, nesting and partials. Use CSS code that makes intensive use of class selectors. Do not use tag selectors or id
• Use class selectors in English
• Use the CSS box model appropriately to specify size, padding and margins.
• Use text and background styles for different types of elements.
• Use flexbox appropriately to organise elements into flexible boxes.
• Use media queries to make layouts fit different device sizes.
• Use positioning to place fixed and absolute elements on the screen.
• Use CSS grid to place elements using a grid.
• Use CSS transitions to add dynamism to a web project.

---

Module summary: