Programming Foundations with JavaScript, HTML and CSS

About this course: Learn foundational programming concepts (e.g., functions, for loops, conditional statements) and how to solve problems like a programmer. In addition, learn basic web development as you build web pages using HTML, CSS, JavaScript. By the end of the course, will create a web page where others can upload their images and apply image filters that you create. After completing this course, you will be able to: 1. Think critically about how to solve a problem using programming; 2. Write JavaScript programs using functions, for loops, and conditional statements; 3. Use HTML to construct a web page with paragraphs, divs, images, links, and lists; 4. Add styles to a web page with CSS IDs and classes; and 5. Make a web page interactive with JavaScript commands like alert, onClick, onChange, adding input features like an image canvas, button, and slider.

Who is this class for: This course is for anyone interested in taking their first step toward a career in computer programming. Learners with no prior experience are encouraged to take this course! In addition, this is the first course of the Java Programming and Software Engineering Fundamentals Specialization, providing learners the programming fundamentals they will need to successfully complete the course series and the web development portion of the capstone project.

Created by:  Duke University

• Taught by:  Susan H. Rodger, Professor of the Practice

  Computer Science

• Taught by:  Robert Duvall, Lecturer

  Computer Science

• Taught by:  Owen Astrachan, Professor of the Practice

  Computer Science

• Taught by:  Andrew D. Hilton, Assistant Professor of the Practice

  Electrical and Computer Engineering

Basic Info Course 1 of 5 in the Java Programming and Software Engineering Fundamentals Specialization Level Beginner Commitment 4 weeks of study, 3-7 hours/week Language English How To Pass Pass all graded assignments to complete the course. User Ratings 4.5 stars Average User Rating 4.5See what learners said Trabajo del curso

Cada curso es como un libro de texto interactivo, con videos pregrabados, cuestionarios y proyectos.

Ayuda de tus compañeros

Conéctate con miles de estudiantes y debate ideas y materiales del curso, y obtén ayuda para dominar los conceptos.

Certificados

Obtén reconocimiento oficial por tu trabajo y comparte tu éxito con amigos, compañeros y empleadores.

Duke University Duke University has about 13,000 undergraduate and graduate students and a world-class faculty helping to expand the frontiers of knowledge. The university has a strong commitment to applying knowledge in service to society, both near its North Carolina campus and around the world.

Syllabus


WEEK 1


Welcome
Welcome! In this module, you will be introduced to this course's approach to teaching the basics of programming, from building web pages, to writing programs with JavaScript, to making web pages interactive.


5 videos, 1 reading expand

1. Video: Course Overview
2. Video: A Student's Perspective on Learning Programming
3. Video: Resources to Help You Succeed
4. Video: Tips for Learning Programming
5. Video: Using Forums: How to Ask for Help Effectively
6. Leyendo: Module Feedback Surveys

Designing a Web Page with HTML and CSS
In this module, you will learn the basics of HTML and CSS to design a web page. Over the course of the module you will build your first web page!


10 videos, 8 readings, 2 practice quizzes expand

1. Video: Using CodePen
2. Leyendo: Try It! Create Your CodePen Account
3. Video: What Is HTML?
4. Video: Metadata and Sectioning Elements
5. Leyendo: Try It! Build a “My Interests” Web Page
6. Cuadro de aviso de la discusión: Asking for Help in the Forums
7. Video: Formatting Text and Nesting Tags
8. Leyendo: Try It! Format Text
9. Video: Adding Images and Links
10. Video: Images and Storage
11. Leyendo: Try It! Add Links and Images
12. Video: Lists and Tables
13. Leyendo: Try It! Create Lists and Tables
14. Cuestionario de práctica: Using HTML
15. Video: How CSS Is Used to Design Web Pages
16. Video: CSS Basics
17. Leyendo: Try It! Style Your Web Page with CSS
18. Video: Colors and Names in CSS
19. Leyendo: Try It! Customize Your Web Page’s Colors
20. Cuadro de aviso de la discusión: Share your “My Interests” Web Page
21. Cuestionario de práctica: Styling with CSS
22. Leyendo: End of Module Survey

Graded: Designing a Web Page with HTML and CSS

WEEK 2


Algorithms and Programming Concepts



15 videos, 5 readings, 3 practice quizzes expand

1. Video: Introduction
2. Video: Everything Is a Number
3. Video: How Is That a Number?
4. Video: Developing an Algorithm
5. Video: A Seven Step Approach to Solving Programming Problems
6. Cuestionario de práctica: Solving Programming Problems
7. Video: Variables
8. Video: Methods
9. Video: Functions
10. Video: Types
11. Video: DukeLearnToProgram Environment
12. Leyendo: Try It! Using Variables, Methods and Functions
13. Video: For Loops
14. Leyendo: Try It! Using For Loops
15. Video: Conditional Execution
16. Leyendo: Programming Exercise: Modifying Images
17. Cuestionario de práctica: Modifying Images with JavaScript
18. Video: Translating to Code
19. Video: Thinking Critically about Your Program
20. Video: Finding Bugs in Code
21. Leyendo: Programming Exercise: Advanced Modifying Images
22. Cuestionario de práctica: Debugging Your Code
23. Leyendo: End of Module Survey

Graded: Overview of Programming Concepts

WEEK 3


JavaScript for Web Pages



8 videos, 8 readings, 1 practice quiz expand

1. Video: Introduction
2. Video: Buttons with Divs
3. Leyendo: Try It! Buttons with Divs
4. Video: Changing Pages Interactively
5. Leyendo: Try It! Change Pages Interactively
6. Video: Using HTML5 Canvas
7. Leyendo: Try It! Canvas
8. Video: Inputs and Events
9. Leyendo: Try It! Inputs and Events
10. Cuestionario de práctica: Event-Driven Programming
11. Video: Upload and Display an Image
12. Leyendo: Try It! Upload and Display an Image
13. Video: Convert Image to Grayscale
14. Leyendo: Try It! Convert an Image to Grayscale
15. Video: Moving to CodePen
16. Leyendo: Try It! Green Screen Online
17. Leyendo: End of Module Survey

Graded: Interactive Web Pages

WEEK 4


MiniProject: Image Filters on the Web



5 videos, 7 readings, 1 practice quiz expand

1. Video: Introduction
2. Leyendo: MiniProject Part 1
3. Leyendo: MiniProject Part 2
4. Leyendo: MiniProject Challenge
5. Leyendo: End of Module Survey
6. Leyendo: Extra Challenge
7. Video: Steganography Part I
8. Video: Steganography Part II
9. Cuestionario de práctica: Steganography math
10. Video: Steganography Part III
11. Leyendo: Steganography Review
12. Video: Steganography Coding Example
13. Leyendo: Steganography: Programming Exercise Guide

Graded: Review of HTML, CSS, and JavaScript
Graded: Steganography