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.
Inclus
17 vidéos13 lectures6 devoirs2 évaluations par les pairs1 sujet de discussion
Afficher les informations sur le contenu du module
17 vidéos•Total 143 minutes
Course Overview•8 minutes
Instructor Introduction•1 minute
Module 1 Introduction•2 minutes
History of the Web - Part 1•10 minutes
History of the Web - Part 2•12 minutes
History of the Web - Part 3•11 minutes
The Tools of Internet Publishing - Part 1•8 minutes
The Tools of Internet Publishing - Part 2•7 minutes
The Tools of Internet Publishing - Part 3•9 minutes
Browsers and Web Addresses - Part 1•12 minutes
Browsers and Web Addresses - Part 2•11 minutes
HTTP Requests•9 minutes
Meet Our Three Languages•11 minutes
The Basics of HTML - Part 1•8 minutes
The Basics of HTML - Part 2•9 minutes
The Basics of HTML - Part 3•10 minutes
How to Turn In Labs•5 minutes
13 lectures•Total 630 minutes
Syllabus•10 minutes
Module 1: Asset Library (code used in video demonstrations)•60 minutes
Lecture Slides: History of the Web•60 minutes
Lesson 1 Video Reference Page•10 minutes
Lecture Slides: The Tools of Internet Publishing•60 minutes
Lecture Slides: Browsers and Web Addresses•60 minutes
Lesson 3 Video Reference Page•60 minutes
Lecture Slides: HTTP Requests•60 minutes
Lecture Slides: Meet Our Three Languages•60 minutes
Lecture Slides: The Basics of HTML•60 minutes
Lesson 6 Video Reference Page•60 minutes
Lecture Slides: How to Turn In Labs•60 minutes
Module 1 Summary•10 minutes
6 devoirs•Total 330 minutes
What did you learn about the internet's history?•30 minutes
What did you learn about Internet Browsers?•30 minutes
What did you learn about HTTP requests?•30 minutes
What did you learn about our 3 website languages?•30 minutes
What did you learn about the basics of html?•30 minutes
Module 1 Summative Assessment•180 minutes
2 évaluations par les pairs•Total 50 minutes
Lab 1: Your First Website!•20 minutes
Lab 2•30 minutes
1 sujet de discussion•Total 60 minutes
Meet and Greet Discussion•60 minutes
Module 2: HTML
Module 2•15 heures à terminer
Détails du module
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.
Inclus
7 vidéos9 lectures4 devoirs2 évaluations par les pairs
Afficher les informations sur le contenu du module
7 vidéos•Total 49 minutes
Module 2 Introduction•2 minutes
HTML Elements (inline vs box) - Part 1•8 minutes
HTML Elements (inline vs box) - Part 2•8 minutes
HTML Lists and Cascades•12 minutes
HTML Links and Images - Part 1•7 minutes
HTML Links and Images - Part 2•7 minutes
HTML Tables•5 minutes
9 lectures•Total 490 minutes
Module 2: Asset Library (code used in video demonstrations)•60 minutes
Lecture Slides: HTML Elements (inline vs box)•60 minutes
Lesson 1 Video Reference Page•60 minutes
Lecture Slides: HTML Lists and Cascades•60 minutes
Lesson 2 Video Reference Page•60 minutes
Lecture Slides: HTML Links and Images•60 minutes
Lecture Slides: HTML Tables•60 minutes
Lesson 4 Video Reference Page•60 minutes
Module 2 Summary•10 minutes
4 devoirs•Total 270 minutes
What did you learn about HTML Elements?•30 minutes
What did you learn about HTML Links and Images?•30 minutes
What did you learn about HTML Table•30 minutes
Module 2 Summative Assessment•180 minutes
2 évaluations par les pairs•Total 120 minutes
Lab 3: Basic Page Markup•60 minutes
Lab 4•60 minutes
Module 3: HTML Forms
Module 3•14 heures à terminer
Détails du module
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.
Inclus
6 vidéos8 lectures3 devoirs2 évaluations par les pairs
Afficher les informations sur le contenu du module
Insights from an Industry Leader: Learn More About Our Program•10 minutes
3 devoirs•Total 240 minutes
What did you learn about Website Navigation?•30 minutes
What did you learn about UTF8 Characters?•30 minutes
Module 3 Summative Assessment•180 minutes
2 évaluations par les pairs•Total 180 minutes
Lab 5: HTML Forms•60 minutes
Project 1•120 minutes
Module 4: Introduction to CSS
Module 4•17 heures à terminer
Détails du module
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.
Inclus
7 vidéos12 lectures6 devoirs
Afficher les informations sur le contenu du module
7 vidéos•Total 52 minutes
Module 4 Introduction•3 minutes
How CSS talks to HTML•10 minutes
CSS Declaration - Part 1•9 minutes
CSS Declaration - Part 2•10 minutes
Writing CSS Selectors for Specificity•8 minutes
The Box Model and Box Sizing•7 minutes
CSS Resets•5 minutes
12 lectures•Total 640 minutes
Module 4: Asset Library•60 minutes
Lecture Slides: How CSS talks to HTML•60 minutes
Lesson 1 Video Reference Page•60 minutes
Lecture Slides: CSS Declarations•60 minutes
Lesson 2 Video Reference Page•60 minutes
Lecture Slides: Writing CSS Selectors for Specificity•60 minutes
Lesson 3 Video Reference Page•60 minutes
Lecture Slides: The Box Model and Box Sizing•60 minutes
Lesson 4 Video Reference Page•60 minutes
Lecture Slides: CSS Resets•60 minutes
Lab 6 Practice Assignment•30 minutes
Module 4 Summary•10 minutes
6 devoirs•Total 330 minutes
What did you learn about how CSS talks to HTML?•30 minutes
What did you learn about CSS Declarations?•30 minutes
What did you learn about Writing CSS Selectors for Specificity•30 minutes
What did you learn about the Box Model and Box Sizing?•30 minutes
What did you learn about CSS Resets?•30 minutes
Module 4 Summative Assessment•180 minutes
Module 5: CSS Floats and Positions
Module 5•18 heures à terminer
Détails du module
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.
Inclus
10 vidéos10 lectures4 devoirs2 évaluations par les pairs
Afficher les informations sur le contenu du module
10 vidéos•Total 73 minutes
Module 5 Introduction•2 minutes
CSS Fonts - Part 1•7 minutes
CSS Fonts - Part 2•9 minutes
CSS Floats - Part 1•7 minutes
CSS Floats - Part 2•6 minutes
CSS Positions - Part 1•8 minutes
CSS Positions - Part 2•9 minutes
Horizontal Navigation - Part 1•8 minutes
Horizontal Navigation - Part 2•6 minutes
Centered Navigation•11 minutes
10 lectures•Total 670 minutes
Module 5: Asset Library•60 minutes
Lecture Slides: CSS Fonts•60 minutes
Lesson 1 Video Reference Page•60 minutes
Lecture Slides: CSS Floats•60 minutes
Lesson 2 Video Reference Page•60 minutes
Lecture Slides: CSS Positions•60 minutes
Lecture Slides: Horizontal Navigation•60 minutes
Lecture Slides: Centered navigation•60 minutes
Project 2 Practice Assignment: First Attempt•180 minutes
Module 5 Summary•10 minutes
4 devoirs•Total 270 minutes
What did you learn about CSS Fonts?•30 minutes
What did you learn about CSS Floats?•30 minutes
What did you learn about Horizontal navigations?•30 minutes
Module 5 Summative Assessment•180 minutes
2 évaluations par les pairs•Total 90 minutes
Lab 7: Style an HTML Table•60 minutes
Lab 8: Navigation Expert•30 minutes
Module 6: Website Layouts and Design
Module 6•18 heures à terminer
Détails du module
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.
Inclus
9 vidéos11 lectures5 devoirs
Afficher les informations sur le contenu du module
9 vidéos•Total 74 minutes
Module 6 Introduction•3 minutes
Standard Website Layouts•10 minutes
Responsive Design•11 minutes
CSS Transitions, Transformations, and Animations - Part 1•4 minutes
CSS Transitions, Transformations, and Animations - Part 2•9 minutes
CSS Transitions, Transformations, and Animations - Part 3•9 minutes
CSS Pseudo-selectors•8 minutes
Full-site Demonstration - Part 1•9 minutes
Full-site Demonstration - Part 2•11 minutes
11 lectures•Total 730 minutes
Module 6: Asset Library•60 minutes
Lecture Slides: Standard Website Layouts•60 minutes
Lecture Slides: Responsive Design•60 minutes
Lesson 2 Video Reference Page•60 minutes
Lecture Slides: CSS Transitions, Transformations, and Animations•60 minutes
Project 2 Practice Assignment: Second Attempt•180 minutes
Module 6 Summary•10 minutes
5 devoirs•Total 300 minutes
What did you learn about Standard Website Layouts?•30 minutes
What did you learn about Responsive Design?•30 minutes
What did you learn about CSS Transitions, Transformations, and Animations?•30 minutes
What did you learn about CSS Pseudo-selectors•30 minutes
Module 6 Summative Assessment•180 minutes
Module 7: Introduction to Javascript
Module 7•15 heures à terminer
Détails du module
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.
Inclus
10 vidéos10 lectures4 devoirs
Afficher les informations sur le contenu du module
10 vidéos•Total 68 minutes
Module 7 Introduction•3 minutes
The Basics of JavaScript (JS) - Part 1•6 minutes
The Basics of JavaScript (JS) - Part 2•6 minutes
JS Language Features and Syntax - Part 1•7 minutes
JS Language Features and Syntax - Part 2•8 minutes
JS Language Features and Syntax - Part 3•7 minutes
Google Maps API (Application Programming Interface) - Part 1•6 minutes
Google Maps API (Application Programming Interface) - Part 2•7 minutes
JavaScript Objects, Event Handling, and DOM (Document Object Model) - Part 1•9 minutes
JavaScript Objects, Event Handling, and DOM (Document Object Model) - Part 2•9 minutes
10 lectures•Total 550 minutes
Module 7: Asset Library•60 minutes
Lecture Slides: The Basics of JavaScript (JS)•60 minutes
Lesson 1 Video Reference Page•60 minutes
Lecture Slides: JS Language Features and Syntax•60 minutes
Lecture Slides: Google Maps API (Application Programming Interface)•60 minutes
Lesson 3 Video Reference Page•60 minutes
Lecture Slides: JavaScript Objects, Event Handling, and DOM (Document Object Model)•60 minutes
Lesson 4 Video Reference Page •60 minutes
Project 3 Practice Assignment: First Attempt•60 minutes
Module 7 Summary•10 minutes
4 devoirs•Total 270 minutes
What did you learn about The Basics of JavaScript?•30 minutes
What did you learn about JS Language Features and Syntax?•30 minutes
What did you learn about JavaScript Objects, Event Handling, and the DOM?•30 minutes
Module 7 Summative Assessment•180 minutes
Module 8: JQuery and Frameworks
Module 8•13 heures à terminer
Détails du module
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.
Inclus
7 vidéos9 lectures3 devoirs1 évaluation par les pairs
Afficher les informations sur le contenu du module
7 vidéos•Total 55 minutes
Module 8 Introduction•3 minutes
How-To Grab JavaScript Objects and Change HTML•10 minutes
JQuery Intro and Box Sliders - Part 1•7 minutes
JQuery Intro and Box Sliders - Part 2•9 minutes
Responsive Videos•7 minutes
What This All Means for Using Website Frameworks - Part 1•10 minutes
What This All Means for Using Website Frameworks - Part 2•9 minutes
9 lectures•Total 440 minutes
Module 8: Asset Library•60 minutes
Lecture Slides: How-To Grab JavaScript Objects and Change HTML•60 minutes
Lecture Slides: JQuery Intro and Box Sliders•60 minutes
Lesson 2 Video Reference Page•60 minutes
Lecture Slides: Responsive Videos•60 minutes
Lecture Slides: What This All Means for Using Website Frameworks•60 minutes
Lesson 4 Video Reference Page•60 minutes
Project 3 Practice Assignment: Second Attempt•10 minutes
Module 8 Summary•10 minutes
3 devoirs•Total 240 minutes
What did you learn about JQuery Intro and Box Sliders?•30 minutes
What did you learn about Website Frameworks?•30 minutes
Module 8 Summative Assessment•180 minutes
1 évaluation par les pairs•Total 30 minutes
Lab 9: JS Event Handling•30 minutes
Summative Course Assessment
Module 9•3 heures à terminer
Détails du module
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.
Inclus
1 devoir
Afficher les informations sur le contenu du module
1 devoir•Total 180 minutes
Course Summative Assessment•180 minutes
Préparer un diplôme
Ce site cours fait partie du (des) programme(s) diplômant(s) suivant(s) proposé(s) par Illinois Tech. Si vous êtes admis et que vous vous inscrivez, les cours que vous avez suivis peuvent compter pour l'apprentissage de votre diplôme et vos progrès peuvent être transférés avec vous.¹
Consulter les diplômes éligibles
Préparer un diplôme
Ce site cours fait partie du (des) programme(s) diplômant(s) suivant(s) proposé(s) par Illinois Tech. Si vous êtes admis et que vous vous inscrivez, les cours que vous avez suivis peuvent compter pour l'apprentissage de votre diplôme et vos progrès peuvent être transférés avec vous.¹
¹La réussite de la candidature et de l'inscription est requise. Les conditions d'admissibilité s'appliquent. Chaque établissement détermine le nombre de crédits reconnus en complétant ce contenu qui peut compter pour les exigences du diplôme, en tenant compte de tout crédit existant que vous pourriez avoir. Cliquez sur un cours spécifique pour plus d'informations.
OK
Instructeur
Évaluations de l’enseignant
Évaluations de l’enseignant
Nous avons demandé à tous les étudiants de fournir des commentaires sur nos enseignants au sujet de la qualité de leur pédagogie.
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.
Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?
Felipe M.
Étudiant(e) depuis 2018
’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’
Jennifer J.
Étudiant(e) depuis 2020
’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’
Larry W.
Étudiant(e) depuis 2021
’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’
Chaitanya A.
’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’
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.