In Client-Side Web Development we will be developing content with the languages HTML, CSS and Javascript.
Code editing
- All development will be done in Visual Studio Code. This is an Integrated Development Environment, providing syntax checking and other utilities e.g. Emmet abbreviations. If you do not have it installed on your computer, you should install it before commencing work for this module.
- Install the extension HTMLHint in Visual Studio Code. This will highlight any syntax errors in HTML files.
Browser and browser developer tools
- HTML and CSS are special purpose declarative languages and Javascript is a programming language, but they all rely on a special purpose interpreter (most often a browser) to render specified content and behaviour i.e. make it consumable by the user.
- You may use any browser you wish. Demonstrations in the module will be on Firefox or Chrome and you may find it easier to use one of these for CSWD, as there is some variation in how different browsers behave.
- We can use browser developer tools to get more detailed and behind-the-scenes information about what the browser is doing, including about how it interprets the HTML and CSS.
- In most browsers the developer tools can be opened in any of the following ways:
- press the F12 key
- press the Ctrl+Shift+i key combination
- right-click on the page, then click menu item Inspect element
- HTML and CSS information is in a module of the tools called Inspector in Firefox and in one called Elements in Chrome. Here styles can be edited on the fly with temporary effect, for testing
- Firefox has a module called Style Editor, which allows the editing and permanent update of currently open CSS files.