1-01: Introduction To Web Development

Editor's Notes

• #8: The course will follow a simple structure. Each week we will deliver a 1 hour lecture on a topic related to web development. In that lecture there will be an opportunity for discussion on the material presented. After most of the lectures, you will be set an small assignment, designed to make you revisit the topics covered in the lecture and give you some hands on experience with HTML & CSS. Of course, this is only how we envision things. How it will actually play out depends entirely on your needs, so we may change the format in the future based on your feedback. There will be plenty of opportunity for discussion throughout the course, all of which will affect what we teach, and how we teach it. By the end of the course we hope that you will have a good grasp of both HTML & CSS, and will feel confident in writing your own code from scratch. You will also be able to appreciate many of the practices of modern web developers, and use them to improve yourself as a web developer.
• #9: All of the course materials will be available for viewing here on the Wiki. This will include articles such as this one which cover each of the lessons in detail, slides used in the lessons, course assignments (more about these later), and links to resources that we reference in the lessons. There will be opportunities for further reading on all of topics we cover, which we will compile into a list of links and publish here on the Wiki. If you require any further information, just send either of us an email - we're happy to answer any questions you may have.
• #10: On the wiki...
• #11: Initially, we have plotted out an 8 week module which aims to take those with relatively no knowledge of HTML or CSS and equip them with the knowledge to create and style quality web content. If you already have some experience with HTML & CSS, we hope that the earlier topics we cover will serve not only as a refresher, but as a chance for you to gain a deeper understanding of why we use these technologies the way we do. The first couple of lessons are designed to introduce the course, and for us to discuss what you would like to get out of it. They also introduce HTML by looking at the structure of a webpage, and briefly highlighting some of the common elements you'll be regularly using. We'll the move onto some in-depth HTML tutorials, followed by CSS tutorials that complement the HTML you've been learning. Finally we'll be looking at some of the more advanced things you can do with CSS, and working on a large example that will bring together everything you've learned over the 8 weeks. For more information, consult the Course Outline.
• #13: We’ve got some things in our sites such as Finda, the RNN sites, etc., that allow you write content that adheres to the general style of the page. We’ll be enabling more of these things so that you can get a bit more creative with your content.
• #14: We're not big fans of lengthy assignments, so we don't plan on giving you anything that will take up too much of your time (your workload is big enough already without us adding more to the pile). We will however set small tasks that will help you reflect on what we've taught you in the lessons. More than anything, they'll help you question your understanding of what we've taught you, and bring to light any issues you're having with the content. If you can complete the assignments, it means you've got a good understanding of the course content.
• #15: We write the lessons in the weeks leading up to teaching them. This gives them the chance to evolve based on the rate at which you're absorbing the course material, as well as the things that you fine most interesting. If you feel that we're skimming over topics that you feel need more explanation, or indeed, if you feel that we're digging a little too deep into things that you feel you already have a good understanding of, please let us know. This course is for your benefit, and we want to fine tune it so that you get the most out of it.
• #17: We all learn at different paces, and the amount of content we cram into each lesson is based on an average learning rate (which doesn't actually exist in the real world), so if you feeling left behind, please let us know. Chances are, someone else is feeling the same way, and it's really important that we're not running ahead, as it becomes crucial that we're all on the same page as we get close to the end of the course, and start looking at more advanced topics. We're more than happy to run short catch-up classes between the main lessons, for those who couldn't make it to a lesson, or for those who'd like us to revisit a past topic. You can email either of us to arrange a session.
• #19: We've consulted many different sources in order to build this course, and we've tried to keep things as lean as possible in order to give the course what we think is a good pace.
• #20: The main websites we have drawn content & inspiration from are: W3SchoolsOpera Web Standards Curriculum[University of Texas] HTML: Getting Started You may want to look at some of the above sites if you'd like to dig deeper into any of the topics we cover in the course. We're also a fan of the HTML training videos on YouTube, and we make use of a live HTML editor during the lectures that you might want to play around with yourself.
• #21: The rest of this article will give you a brief introduction to the three basic building blocks of the web: HTML, CSS and Javascript. Although this module doesn't include a section on Javascript, it is still important to understand what it is, and how it fits into the grand scheme of things.
• #22: HTML is a markup language that we use to wrap up our web content so that browsers know how to display it. It allows us to define which pars of our document are headings, which parts of the text need specific emphasis, display images within our page, and reformat text as lists and tables. There are many more ways we can display our content, as well as collect information from our visitors, but we'll get to all of that over the coming weeks
• #23: CSS is a language that lets us describe the visual apprarence of our content, and give it a style of its own. With CSS we can alter the colour of text & backgrounds, the fonts to use when displaying our text and the positioning of all of the elements on the page. It is a powerful tool which lets you get really creative with how you want your website to look, and how people should percieve your content.
• #24: Javascript is a scripting language that allows you to manipulate a website once it has loaded. Some common uses are:Animating page elementsEmbedding 3rd party widgets (like the social media icons across our websites)Triggering browser actions such as bookmarking / printing the current pageDynamically changing page content and/or styling
• #28: HTML, CSS and Javascript are great tools for building websites. They have to be, as they're the only tools we've got! However, this wasn't always the case. In the beginning, we only had HTML. Javascript came onto the scene a bit later, and finally, CSS arrived. Before we had CSS, HTML had a large set of tags and attributes which could be used to apply styling to a page. You could alter fonts, colours, make text bold/italic, and so on. People even started to use tables to layout rows and columns of content, and create page elements such as headers and sidebars. HTML could even enable certain behaviour, such as making things happen when the user clicks on an element, or performing actions as soon as the page has loaded. Before long, the HTML people were writing was ugly, bloated and unmaintainable. Because styling information was hard coded into sections of HTML, something as simple as changing the colour of a heading required multiple changes in various pages across the website.When Javascript arrived, developers were given the option of removing scripting from their HTML elements, and replace that functionality with self-contained scripts. When CSS arrived, developers finally had a way to globally control website presentation. We were essentially given a way to clearly separate the 3 main things that contribute to a webpage, each defined by their own language. Modern web developers use this to their advantage, and make clear distinctions between content (HTML), presentation (CSS) and behaviour (Javascript) when organising their code.
• #30: When you write an external CSS file or JavaScript file, you can use that file by any page on your Web site. There is no duplication of effort, and whenever the file changes, it changes for every page that uses it without you making more than one change.
• #31: Once the script or cssstylesheet has been downloaded by your customer the first time, it is cached in the browser. Then every other page that is downloaded loads more quickly in the browser window. If you wrote all your style into the HTML pages, then you would needlessly download lots more info on the page that really didn't have to be.
• #32: If you have more than one person working on a Web site at once, you can divide up the workload with less hassle. Theoretically you could hire people who are style/design experts (At APN - front-end web development and design teams) to work on the CSS while your scripters work on the JavaScript (also front-end web dev tem), and your writers work in the content (Editorial Team via the ease of use of the CMS Admin). Layers of separation stop everyone getting in the way of your role or desired changes.
• #33: Accessibility is a term we use to describe the ease of access by different people with different needs or impediments (such as vision impaired) or different access on devices and platforms. External CSS files and Javascript files are more accessible to more browsers, because they can be ignored more easily, and because they provide more options. For example, you can set up a stylesheet that is displayed only for screen readers or Javascript that's only used by people on cell phones. It provides a level of control so we can be nice to different users.
• #34: When you have a site that is designed with the development layers, it will be more backwards compatible because browsers that can't use technology like CSS and Javascript can still view the HTML. Your Web site can then be progressively enhanced with features as browsers support them. That is an old example, but makes sense. If it's not supported by some old software, or not required... it can be ignored, and we can provide as much as it can understand. If it's all mixed in together, it will be unable to deal some parts, and give up on trying to understand any of it!
• #35: The separation of content, presentation and behaviour is just one of many "web standards". Web standards cover a modern set of practices that web developers should adhere to in order to give visitors a consistent experience when visiting their website, regardless of the device/browser they visit with.
• #37: The World Wide Web Consortium (W3C) was set up initially to steer the development of languages such as HTML and CSS, making sure that needless features aren't added, and that the ones we have serve a clearly defined purpose. More recently, their attention has been turned towards developing web standards, so that the languages are used correctly, and in a way that gives the best web experience to the widest audience possible.
• #39: Basic HTML ConceptsDocument overview - Meet HTML!HTML Syntax - tags, html, xhtml, attributesBlock & Inline - <DIV>'s and <SPAN>'sSpecial characters.