Anyone who has done some programming before and are just getting introduced to Front-End web development, often have this preconception that it is a lot easier than traditional programming. These notions will soon evaporate as they delve deeper in to the morass that is Front-End development.
- HTML is used to define web content and basic structure
- CSS is used to control the layout of the web page
Back to the frontend, the layout could be for a personal website showcasing someone's portfolio, an author promoting and selling their books online, or a more complicated app such as an analytics dashboard with multiple components having their own internal state, and dynamic values in each section. Or it could be rendering a map, or a chart, which requires processing a lot of data on the fly. The data itself could be coming from a REST API, or a GraphQL API. The developer needs to know how and when to fetch this data dynamically from different APIs, process it internally, as well as keep a clean and understandable user interface on top of it. The interface itself has to be responsive (optimized for viewports of mobile devices), needs to have complementing color schemes, fonts, typography. Add user authentication, SEO (Search Engine Optimization), testing, build configurations, deployments, performance optimization techniques, and you see, it starts getting a bit overwhelming as you can see. Glorified Elecronic Brochure far from it and we only just getting started.
My main advice to all Front-End web developers is to read the documentation. This cannot be stressed enough. Make a habit of reading because 90% of the time you have a question about implementation, it’s most likely already documented. Learn about how the web works, the HTTP Protocol, the different HTTP methods and HTTP Status Codes. Write semantic HTML - Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. The benefit of writing semantic HTML stems from what should be the driving goal of any web page - the desire to communicate. By adding semantic tags to your document, you provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser the meaning of each section of a page and its content. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.