Intro to Web Development with HTML and CSS
Here is information on the class I taught about building websites.
| Topic | Overview | Slides | Files |
|---|---|---|---|
| Introduction To HTML Pages And Web Design | Basic overview on how to create and view html pages. Syntax introduction. IDE overview. | Lecture Slides | Example |
| Building A Webpage Template With HTML5 | Creating an index page. Semantic Elements. Tags and Symbols. Style Guide. | Lecture Slides | Example |
| Enhancing A Website With Links And Images | Hyperlinks, images, attributes and lists. | Lecture Slides | Example Try clicking on the links! |
| Applying CSS Styles To Webpages | CSS syntax overview. Types of style sheets and how to add them. Multiple Style Sheets. Selectors, color, text decoration, CSS box model. | Lecture Slides | Example Check each page from here on to see different changes |
| Responsive Design Part 1: Designing for Mobile Devices | Responsive web design overview. Media queries and flexible images. Mobile first approach. | Lecture Slides | Example Open on mobile, or try narrowing your browser window to simulate a mobile device. |
| Responsive Design Part 2: Designing for Tablet and Desktop Devices | Creating Style rules and media queries for tablet and desktop. Breakpoints. Pseudo classes. Gradients. | Lecture Slides | Example Try out different browser window sizes to se the responsive design. |
| Improving Web Design With New Page Layouts | Sementic elements and advanced properties. | Lecture Slides | Example Check various pages at various window sizes. |
| Creating Tables | Table elements with columns and rows of data. | Lecture Slides | Example Always build responsive pages. |
| Creating Forms | Gathering information and relaying it to a web server. Form processing, controls and validation. | Lecture Slides | Example Many kinds of form fields exist. |
| Integrating Audi and Video | Adding audio and video elements to a webpage. | Lecture Slides | Example Media file playback is subject to connection speed. |