For this CodeReview, the following criteria were graded: 120 Points reached.
(5 points) Create a GitHub Repository named: FE21-CR2-YourName. Push the files into it and send the link through the learning management system (lms). See an example of a GitHub link below:
https://github.com/JohnDoe/repositoryname.git
Please remember to set your repository to private and invite codefactorygit as a collaborator!
(10 points) Correct usage of the HTML structure (proper order of HTML elements and code indentation)
(10 points) Use CSS selectors (classes and/or IDs) to style your web page (colours, font size, font style etc.).
(05 points) Correct usage of lists to show the menu (navigation bar)
(15 points) Correct usage of Flexbox or FlexGrid. The elements should be displayed accordingly to the image guide, next to each other, respecting the columns and rows.
(20 points) Correct placement of images with their respective titles. The elements should be displayed accordingly to the image guide for the desktop.
(20 points) Correct usage of Media Queries. For mobile, for the resolution of 480px, you should use the second guide template.
(10 points) Create an article HTML page and include it in the navbar. All the news articles which are shown on the index.html page should be linked to this page. Fill this article.html page with content.
(05 points) The banner (How to become a developer) must be linked to the https://www.codefactory.wien URL
Bonus Points:
(05 points) Use SASS/SCSS tools to style your site
(10 points) Add links to the menu that lead to other local HTML pages that you will additionally create for these bonus points and you are free to provide your design/layout solutions for these additional pages.
(05 points) Create a Media Query for tablets. For this option, as the tablet resolution is wider, two(2) columns should be able to fit in the screen.
NOTE: Bootstrap won't be accepted in this code review. It is important to follow the structure of the layout, including the placement of all elements. The cropping of the images, the font-size and font-family are not important.
Focus on how the articles are positioned in the 2 versions (for example: the 3 articles layout in the desktop vs. 1 article layout in the mobile version, as well as the disappearance of some images in the mobile version)