myCloud: first practice in HTML and CSS for students

This is a practical exercise as part of a training course in HTML, CSS, web layout and advanced optimization.

Context

As a front-end developer, you received this mockup from the designer, without any additional information. This often happens.

All you know is that your page needs to be optimized for SEO and mobile display.

Statement

You'll have to code the page with HTML and CSS according to the state of the art, with responsive adaptations for mobile.

But you can use:

no class,
no identifier selector,
no attribute selector,
no image,
no javascript.

Pay particular attention to semantics.

Resources

Text:

You can find all the text content here.

Fonts:

Colors:

#4696D0 blue,
#2877B0 dark blue,
#F5F5F5 background grey,
#333333 text color,
#FFC843 orange,
#FFA823 dark orange,
#B25F03 brown
#26EC96 green
#18A464 dark green
#4C5D55 darker green

Icons:

The icons come from Font Awesome Free by @fontawesome

Goal

The main aim of this practice is to force students to take a step back from what they see and focus on content rather than appearance. Here, they'll have to use the right HTML tags for each piece of textual content, and not according to the browser's default appearance.

They should then use type selectors only to style their page, with pseudo-classes or pseudo-elements if necessary.

Without taking this step back, and using different HTML tags appropriate to the content, completing this exercise is impossible… well, not in a right way.

Result

Here's an example of the expected result: twikito.github.io/myCloud/.

Don't worry: this is a deliberately complete and complex interpretation of this exercise, with the intention of demonstrating what can be achieved with CSS only.

Twikito / myCloud