News homepage - Sass, BEM, Mobile first, accessible mobile navigation

Hello! 👋

The design of this project caught my attention, so I decided to do it. It was a great opportunity to learn Sass CSS pre-processor and implement it into this project. I tried to create accessible mobile navigation by following Web Accessibility Guidelines. Just like in other recent projects i used mobile-first approach.

💡Here's some new things I used or learned:

• Learned Sass CSS pre-processor. Sass is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
• Used Sass file structure called 7-1 Pattern. It offers great way to modularize Sass file structure and help keep things easier to maintain. It's all about having everything in order so it is easier to work with code.
• Followed Web Accessibility Guidelines v1.0 to make accessible mobile navigation
• Used CSS Counters to automatically number the articles in trending section. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage, or to change the numbering on ordered lists.

🛠️Build with: (can be found also in my others projects)

• I used simple container as a proxy JavaScript technique to make entire container clickable in situations where container acts like illustrated introduction to article and it has a link inside (see articles or trending sections). One drawback was that by creating the entire container clickable, user will not be able to select anything.To allow selecting I detected how long the user is taking between mousedown and mouseup events and suppress the clicking event if user is likely to be selecting text.
• CSS backdrop-filter property for overlay when the modal pops up. The backdrop-filter property is used to apply a graphical effect to the area behind an element. I used it to blur the page behind my overlay.
• <picture> HTML element for responsive images. That is images that work well on devices with widely differing screen size. HTML provides us with elements to display identical image content, just larger or smaller depending on the device. This helps to improve performance across different devices.
• Reduced browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on by using CSS Reset by Andy Bell
• BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
• mobile-first approach. It is one of the best strategies to create either a responsive or adaptive design. Started with the smallest mobile screen and worked my way up.
• :focus-visible pseudo-class to increase usability for sighted users who use keyboard navigation. The :focus-visible pseudo-class is a native CSS way to style elements that are in focus but only applies when you actually want a visual indicator to help the user see where the focus is.
• Instead of repeating code for reusable elements I write some helper classes to reuse them throughout the project. I created reusable classes for headings, paragraphs or containers. This saves time as well as unnecessary code repetition. I will definitely try to improve in this aspect.

❓Questions:

• No specific questions. Any suggestions on how I can improve are welcome!