Scope & clarify. Have a methodical approach: a good idea is to split things into ui architecture, data entries, api design, and front-end storage. This is typically how you design a system and then within these discussed concepts like performance efficiency and scale and as well as product-specific nuances like time zones, scroll, and accessibility.
Watch out for hits : Think out loud. Practice.
Question : How would you clone Twitter's infinite scrolling newsfeed? Design the architecture of Spotify's web app. Create your own wysiwyg editor.
Functional requirements are primarily about the functionalities that the user requires. For example, if you're building a Facebook news feed, do you need to have the ability or feature to post, like, comment, share, repost, etc. So those are some things that you expect from that system.
Non-functional requirements I'd something that you don't explicitly present to the user, but it's again essential, something like performance, backup. How speed or fast your website loads or how accessible your website or how secure your system is. They are still essential, but they are not features that are going to be a part of the system, so those are additional features that won't be directly presented, but they are essential for users.
HLD:
Requirements: functional and non-functional. Scoping. Tech choices. Component architecture. Data model, data api, protocols.
Lld: It is a subset of hld. Small part of a large system.
Non- functional requirements: Responsive Adaptive: adaptive is primarily like you have two different code bases, one for mobile and another for desktop.