Openclassrooms - Zozor travel diary hands-on

This is a solution to the Hands-on work: create a web site step by step (TP : Créez un site pas à pas) on Openclassroms.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

The challenge is to reproduce by my own the website of the hands-on.

Model of the website: Click here to view

Screenshots

Links

• Solution URL: Github Project
• Live Site URL: Github Web page

My process

Built with

• Semantic HTML5 markup
• CSS3 custom properties
• Flexbox
• Design files direct download link - For styles

What I learned

Below are the major things I learned throughout this project.

First thing

Continued development

In future projects, I would like to focus one at least one of these areas:

• Drafting README file while doing the project. Saving useful links during the coding process. So I don't have to struggle recalling the hows and whys.
• Commenting my CSS code, so I can understand my code when I return to it several days later.
• Using flexbox with more elegance
• Using Git/Github in a more efficient. Especially by using branches.
• Custom fonts integration: I feel like I am not in full control of font-weight, font-size, and also of how it is displayed in different browsers.
• Mastering other layout method (position: absolute, relative; inline-block, etc.). Because sometimes I feel flexbox doesn't give all the flexibility I want during my design process.
• Understanding more about how text, block, etc. are structured and designed. So I can better arrange elements.
• Structuring HTML file more efficiently: no useless "id", "class", "div". Also better choice in tags. I feel the structure of my HTML isn't optimal.
• Writing lesser amount of CSS code
• Using media queries to be comfortable with.

Useful resources

The resources bellow gave me the necessary knowledge to complete this project:

• Example 1: This Stackoverflow Q&A helped me to figure out how to combine media queries with "OR" conditions using the good syntax.
• Example 2: This Stackoverflow Q&A helped me to figure out how to combine media queries with "OR" conditions using the good syntax.

text-decoration-thickness: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness How to display an unordered list in two columns?: https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns CSS column-count Property: https://www.w3schools.com/cssref/css3_pr_column-count.asp Horizontal menu: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu Lorem Ipsum: https://www.loremipzum.com/en/text-generator HTML-CSS Center Text horizontally and vertically in a link: https://stackoverflow.com/questions/14862604/html-css-center-text-horizontally-and-vertically-in-a-link repeat vertically: https://www.w3schools.com/cssref/pr_background-repeat.asp bullet images: https://www.w3schools.com/cssref/pr_list-style-image.asp bullet position: https://www.w3schools.com/cssref/pr_list-style-position.asp column-gap: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

Author

• Github - s-t-e-v
• Frontend Mentor - @s-t-e-v