Fundamentals of Web Development (Coursera)

Software Requirements:

• An email account.
• A GitHub account.

A personal computer with the following software installed:

• A plain-text code-editor capable of syntax highlighting. Recommended: Notepad++ (Windows), TextWrangler (mac), or Sublime Text (multi-platform).
• GitHub Desktop (or Git if you are already proficient).
• Image-editing software (such as the free and open-source GIMP)
• At least three different browsers (e.g., Chrome, Opera, Firefox, and/or Edge)

Syllabus

Module 1: Internet Structures and an Introduction to HTML
Welcome to Fundamentals of Web Development! This course will cover the creation of Web pages and sites using HTML, CSS, Javascript, jQuery, and graphical applications as well as the client and server architecture of the Internet and related web technologies. Students will be able to create and deploy a Web site with multiple pages and cross-linked structures by the end of this course. In Module 1, students are introduced to the world of web development, starting with writing basic HTML scripts and publishing them on GitHub and GitHub Pages. It elucidates the roles and functions of the internet's core technologies - HTML, CSS, and JavaScript - and differentiates how browsers operate uniquely compared to other computer applications. Students will become proficient in using essential tools for internet publishing and code archiving, including text editors and GitHub, coupled with an understanding of live hosting practices. Additionally, the course offers insights into the physical infrastructure of the internet, focusing on server technology, and providing a holistic view of the digital landscape from code creation to global connectivity.

Module 2: HTML
Module 2 equips students with advanced skills in HTML, focusing on creating, hosting, and accurately indexing links and images to enhance web page functionality and aesthetics. Students will learn how to convert unique characters into UTF8 Unicode, ensuring global compatibility and accessibility. This module also delves into crafting and publishing essential HTML elements such as lists, and teaches the intricacies of writing and nesting HTML tables and their content. These skills enable students to structure web content effectively, laying the foundation for sophisticated web design and development.

Module 3: HTML Forms
Module 3 guides students through the process of creating well-structured HTML navigation, essential for user-friendly website design. Learners will delve into writing various HTML form elements designed to interact seamlessly with PHP receiving forms, facilitating effective user data collection and interaction. Additionally, the module focuses on crafting HTML scripts that encode the full spectrum of a traditional resume, teaching students how to present professional information in a clear, accessible, and visually appealing online format.

Module 4: Introduction to CSS
Module 4 explores the crucial concept of the HTML cascade in CSS, highlighting its value in creating coherent and visually appealing web designs. Students will learn to write and publish core CSS elements, gaining hands-on experience in styling web content. A key focus is on understanding the four layers of an HTML Box element (content, padding, border, and margin) and mastering their manipulation using CSS for optimal layout control. The module also guides students in choosing the right box-sizing techniques for their website projects and underscores the importance of implementing CSS resets to ensure a consistent styling baseline before applying unique CSS customizations. This approach fosters a comprehensive understanding of CSS as a tool for sophisticated web design and layout management.

Module 5: CSS Floats and Positions
In Module 5, students will deepen their CSS knowledge by learning to write and publish CSS properties specifically for fonts, enhancing the typographic appeal of web content. This module also covers the intricacies of CSS floats and positions, teaching students how to effectively manipulate the layout and placement of elements on a webpage. A practical component involves transforming a basic vertical HTML navigation into a stylish, horizontal navigation bar, complete with techniques for centering it within the website. These skills are essential for students aiming to create visually compelling and user-friendly web interfaces with advanced CSS techniques.

Module 6: Website Layouts and Design
Module 6 introduces students to the four fundamental layouts of website design, providing a foundational understanding of various web design approaches. It emphasizes the importance of adopting a mobile-first mindset when starting CSS styling, aligning with contemporary web usage trends. The module also advances into the dynamic aspects of CSS, teaching students how to write and publish CSS transitions, transformations, and animations, adding interactivity and visual flair to web pages. Additionally, learners will explore the use of CSS pseudo-selectors to enhance element styling. The culmination of these skills enables students to create a complete and comprehensive website using HTML and CSS, demonstrating proficiency in responsive and visually appealing web design.

Module 7: Introduction to Javascript
This module delves into the fundamental principles of writing JavaScript (JS), offering students a solid grounding in the language's core concepts. Students will learn to write and publish essential JavaScript elements, developing skills crucial for interactive web development. This module includes practical exercises where students will import and integrate a Google Map into their website, demonstrating the ability to enhance web pages with external APIs. Additionally, learners will gain experience in importing and manipulating JavaScript events, furthering their understanding of dynamic web interactions and user engagement techniques.

Module 8: JQuery and Frameworks
Module 8 focuses on empowering students with the skills to dynamically manipulate HTML content using JavaScript, enhancing web interactivity and functionality. Students will explore the integration and utilization of a jQuery Box Slider, adding sophisticated visual elements to their web projects. A key aspect of the course is teaching students how to responsively resize video widths, ensuring optimal viewing experiences across different screen sizes. Additionally, the module highlights the value of these skills in the context of working with various website frameworks, preparing students for advanced web development tasks and modern responsive design practices.

Summative Course Assessment
This module contains the summative course assessment that has been designed to evaluate your understanding of the course material and assess your ability to apply the knowledge you have acquired throughout the course. Be sure to review the course material thoroughly before taking the assessment.