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. The creation and deployment of modern, standards-compliant web pages are addressed. Students create and deploy a Web site with multiple pages and cross-linked structures.
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)
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.
涵盖的内容
17个视频13篇阅读材料6个作业2次同伴评审1个讨论话题
显示有关单元内容的信息
17个视频•总计143分钟
Course Overview•8分钟
Instructor Introduction•1分钟
Module 1 Introduction•2分钟
History of the Web - Part 1•10分钟
History of the Web - Part 2•12分钟
History of the Web - Part 3•11分钟
The Tools of Internet Publishing - Part 1•8分钟
The Tools of Internet Publishing - Part 2•7分钟
The Tools of Internet Publishing - Part 3•9分钟
Browsers and Web Addresses - Part 1•12分钟
Browsers and Web Addresses - Part 2•11分钟
HTTP Requests•9分钟
Meet Our Three Languages•11分钟
The Basics of HTML - Part 1•8分钟
The Basics of HTML - Part 2•9分钟
The Basics of HTML - Part 3•10分钟
How to Turn In Labs•5分钟
13篇阅读材料•总计630分钟
Syllabus•10分钟
Module 1: Asset Library (code used in video demonstrations)•60分钟
Lecture Slides: History of the Web•60分钟
Lesson 1 Video Reference Page•10分钟
Lecture Slides: The Tools of Internet Publishing•60分钟
Lecture Slides: Browsers and Web Addresses•60分钟
Lesson 3 Video Reference Page•60分钟
Lecture Slides: HTTP Requests•60分钟
Lecture Slides: Meet Our Three Languages•60分钟
Lecture Slides: The Basics of HTML•60分钟
Lesson 6 Video Reference Page•60分钟
Lecture Slides: How to Turn In Labs•60分钟
Module 1 Summary•10分钟
6个作业•总计330分钟
Module 1 Summative Assessment•180分钟
What did you learn about the internet's history?•30分钟
What did you learn about Internet Browsers?•30分钟
What did you learn about HTTP requests?•30分钟
What did you learn about our 3 website languages?•30分钟
What did you learn about the basics of html?•30分钟
2次同伴评审•总计50分钟
Lab 1: Your First Website!•20分钟
Lab 2•30分钟
1个讨论话题•总计60分钟
Meet and Greet Discussion•60分钟
Module 2: HTML
第 2 单元•小时 后完成
单元详情
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.
涵盖的内容
7个视频9篇阅读材料4个作业2次同伴评审
显示有关单元内容的信息
7个视频•总计49分钟
Module 2 Introduction•2分钟
HTML Elements (inline vs box) - Part 1•8分钟
HTML Elements (inline vs box) - Part 2•8分钟
HTML Lists and Cascades•12分钟
HTML Links and Images - Part 1•7分钟
HTML Links and Images - Part 2•7分钟
HTML Tables•5分钟
9篇阅读材料•总计490分钟
Module 2: Asset Library (code used in video demonstrations)•60分钟
Lecture Slides: HTML Elements (inline vs box)•60分钟
Lesson 1 Video Reference Page•60分钟
Lecture Slides: HTML Lists and Cascades•60分钟
Lesson 2 Video Reference Page•60分钟
Lecture Slides: HTML Links and Images•60分钟
Lecture Slides: HTML Tables•60分钟
Lesson 4 Video Reference Page•60分钟
Module 2 Summary•10分钟
4个作业•总计270分钟
Module 2 Summative Assessment•180分钟
What did you learn about HTML Elements?•30分钟
What did you learn about HTML Links and Images?•30分钟
What did you learn about HTML Table•30分钟
2次同伴评审•总计120分钟
Lab 3: Basic Page Markup•60分钟
Lab 4•60分钟
Module 3: HTML Forms
第 3 单元•小时 后完成
单元详情
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.
Insights from an Industry Leader: Learn More About Our Program•10分钟
3个作业•总计240分钟
Module 3 Summative Assessment•180分钟
What did you learn about Website Navigation?•30分钟
What did you learn about UTF8 Characters?•30分钟
2次同伴评审•总计180分钟
Lab 5: HTML Forms•60分钟
Project 1•120分钟
Module 4: Introduction to CSS
第 4 单元•小时 后完成
单元详情
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.
涵盖的内容
7个视频12篇阅读材料6个作业
显示有关单元内容的信息
7个视频•总计52分钟
Module 4 Introduction•3分钟
How CSS talks to HTML•10分钟
CSS Declaration - Part 1•9分钟
CSS Declaration - Part 2•10分钟
Writing CSS Selectors for Specificity•8分钟
The Box Model and Box Sizing•7分钟
CSS Resets•5分钟
12篇阅读材料•总计640分钟
Module 4: Asset Library•60分钟
Lecture Slides: How CSS talks to HTML•60分钟
Lesson 1 Video Reference Page•60分钟
Lecture Slides: CSS Declarations•60分钟
Lesson 2 Video Reference Page•60分钟
Lecture Slides: Writing CSS Selectors for Specificity•60分钟
Lesson 3 Video Reference Page•60分钟
Lecture Slides: The Box Model and Box Sizing•60分钟
Lesson 4 Video Reference Page•60分钟
Lecture Slides: CSS Resets•60分钟
Lab 6 Practice Assignment•30分钟
Module 4 Summary•10分钟
6个作业•总计330分钟
Module 4 Summative Assessment•180分钟
What did you learn about how CSS talks to HTML?•30分钟
What did you learn about CSS Declarations?•30分钟
What did you learn about Writing CSS Selectors for Specificity•30分钟
What did you learn about the Box Model and Box Sizing?•30分钟
What did you learn about CSS Resets?•30分钟
Module 5: CSS Floats and Positions
第 5 单元•小时 后完成
单元详情
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.
涵盖的内容
10个视频10篇阅读材料4个作业2次同伴评审
显示有关单元内容的信息
10个视频•总计73分钟
Module 5 Introduction•2分钟
CSS Fonts - Part 1•7分钟
CSS Fonts - Part 2•9分钟
CSS Floats - Part 1•7分钟
CSS Floats - Part 2•6分钟
CSS Positions - Part 1•8分钟
CSS Positions - Part 2•9分钟
Horizontal Navigation - Part 1•8分钟
Horizontal Navigation - Part 2•6分钟
Centered Navigation•11分钟
10篇阅读材料•总计670分钟
Module 5: Asset Library•60分钟
Lecture Slides: CSS Fonts•60分钟
Lesson 1 Video Reference Page•60分钟
Lecture Slides: CSS Floats•60分钟
Lesson 2 Video Reference Page•60分钟
Lecture Slides: CSS Positions•60分钟
Lecture Slides: Horizontal Navigation•60分钟
Lecture Slides: Centered navigation•60分钟
Project 2 Practice Assignment: First Attempt•180分钟
Module 5 Summary•10分钟
4个作业•总计270分钟
Module 5 Summative Assessment•180分钟
What did you learn about CSS Fonts?•30分钟
What did you learn about CSS Floats?•30分钟
What did you learn about Horizontal navigations?•30分钟
2次同伴评审•总计90分钟
Lab 7: Style an HTML Table•60分钟
Lab 8: Navigation Expert•30分钟
Module 6: Website Layouts and Design
第 6 单元•小时 后完成
单元详情
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.
涵盖的内容
9个视频11篇阅读材料5个作业
显示有关单元内容的信息
9个视频•总计74分钟
Module 6 Introduction•3分钟
Standard Website Layouts•10分钟
Responsive Design•11分钟
CSS Transitions, Transformations, and Animations - Part 1•4分钟
CSS Transitions, Transformations, and Animations - Part 2•9分钟
CSS Transitions, Transformations, and Animations - Part 3•9分钟
CSS Pseudo-selectors•8分钟
Full-site Demonstration - Part 1•9分钟
Full-site Demonstration - Part 2•11分钟
11篇阅读材料•总计730分钟
Module 6: Asset Library•60分钟
Lecture Slides: Standard Website Layouts•60分钟
Lecture Slides: Responsive Design•60分钟
Lesson 2 Video Reference Page•60分钟
Lecture Slides: CSS Transitions, Transformations, and Animations•60分钟
Lesson 3 Video Reference Page•60分钟
Lecture Slides: CSS Pseudo-selectors•60分钟
Lesson 4 Video Reference Page•60分钟
Lecture Slides: Full-site Demonstration•60分钟
Project 2 Practice Assignment: Second Attempt•180分钟
Module 6 Summary•10分钟
5个作业•总计300分钟
Module 6 Summative Assessment•180分钟
What did you learn about Standard Website Layouts?•30分钟
What did you learn about Responsive Design?•30分钟
What did you learn about CSS Transitions, Transformations, and Animations?•30分钟
What did you learn about CSS Pseudo-selectors•30分钟
Module 7: Introduction to Javascript
第 7 单元•小时 后完成
单元详情
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.
涵盖的内容
10个视频10篇阅读材料4个作业
显示有关单元内容的信息
10个视频•总计68分钟
Module 7 Introduction•3分钟
The Basics of JavaScript (JS) - Part 1•6分钟
The Basics of JavaScript (JS) - Part 2•6分钟
JS Language Features and Syntax - Part 1•7分钟
JS Language Features and Syntax - Part 2•8分钟
JS Language Features and Syntax - Part 3•7分钟
Google Maps API (Application Programming Interface) - Part 1•6分钟
Google Maps API (Application Programming Interface) - Part 2•7分钟
JavaScript Objects, Event Handling, and DOM (Document Object Model) - Part 1•9分钟
JavaScript Objects, Event Handling, and DOM (Document Object Model) - Part 2•9分钟
10篇阅读材料•总计550分钟
Module 7: Asset Library•60分钟
Lecture Slides: The Basics of JavaScript (JS)•60分钟
Lesson 1 Video Reference Page•60分钟
Lecture Slides: JS Language Features and Syntax•60分钟
Lecture Slides: Google Maps API (Application Programming Interface)•60分钟
Lesson 3 Video Reference Page•60分钟
Lecture Slides: JavaScript Objects, Event Handling, and DOM (Document Object Model)•60分钟
Lesson 4 Video Reference Page •60分钟
Project 3 Practice Assignment: First Attempt•60分钟
Module 7 Summary•10分钟
4个作业•总计270分钟
Module 7 Summative Assessment•180分钟
What did you learn about The Basics of JavaScript?•30分钟
What did you learn about JS Language Features and Syntax?•30分钟
What did you learn about JavaScript Objects, Event Handling, and the DOM?•30分钟
Module 8: JQuery and Frameworks
第 8 单元•小时 后完成
单元详情
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.
涵盖的内容
7个视频9篇阅读材料3个作业1次同伴评审
显示有关单元内容的信息
7个视频•总计55分钟
Module 8 Introduction•3分钟
How-To Grab JavaScript Objects and Change HTML•10分钟
JQuery Intro and Box Sliders - Part 1•7分钟
JQuery Intro and Box Sliders - Part 2•9分钟
Responsive Videos•7分钟
What This All Means for Using Website Frameworks - Part 1•10分钟
What This All Means for Using Website Frameworks - Part 2•9分钟
9篇阅读材料•总计440分钟
Module 8: Asset Library•60分钟
Lecture Slides: How-To Grab JavaScript Objects and Change HTML•60分钟
Lecture Slides: JQuery Intro and Box Sliders•60分钟
Lesson 2 Video Reference Page•60分钟
Lecture Slides: Responsive Videos•60分钟
Lecture Slides: What This All Means for Using Website Frameworks•60分钟
Lesson 4 Video Reference Page•60分钟
Project 3 Practice Assignment: Second Attempt•10分钟
Module 8 Summary•10分钟
3个作业•总计240分钟
Module 8 Summative Assessment•180分钟
What did you learn about JQuery Intro and Box Sliders?•30分钟
What did you learn about Website Frameworks?•30分钟
1次同伴评审•总计30分钟
Lab 9: JS Event Handling•30分钟
Summative Course Assessment
第 9 单元•小时 后完成
单元详情
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.
Illinois Tech is a top-tier, nationally ranked, private research university with programs in engineering, computer science, architecture, design, science, business, human sciences, and law. The university offers bachelor of science, master of science, professional master’s, and Ph.D. degrees—as well as certificates for in-demand STEM fields and other areas of innovation. Talented students from around the world choose to study at Illinois Tech because of the access to real-world opportunities, renowned academic programs, high value, and career prospects of graduates.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I purchase the Certificate?
When you purchase a Certificate you get access to all course materials, including graded assignments. Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid available?
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.