Course: Web Technologies and Web Design for Beginners
Executive Summary
Purpose of the course
The course “Web Technologies and Web Design for Beginners” is designed to provide learners with a solid foundation in web development and design. The course is structured into six modules, each focusing on specific aspects of web development and design.
Structure of the course
n Module 1, learners will be introduced to the basic syntax of HTML and learn about the structure of web pages. They will have the opportunity to practice creating a simple web page using HTML tags.
Module 2 focuses on applying CSS styles to enhance the appearance of web pages. Learners will understand the principles of cascading style sheets and how to style HTML elements. They will also learn about usability and accessibility principles.
Module 3 delves into document structure, teaching learners how to build more complex web pages using the block model. Learners will gain hands-on experience by modifying the structure of their existing web page.
Module 4 addresses cross-browser and cross-platform coding. Learners will learn about testing and optimizing web pages to ensure compatibility across different browsers and devices. They will also engage in peer reviews and testing.
Module 5 introduces learners to JavaScript and the jQuery library for creating interactive web elements. They will practice adding interactivity to their web pages using JavaScript and jQuery.
In Module 6, learners will explore the Bootstrap framework and its advantages. They will learn how to leverage pre-defined content blocks to enhance the functionality and design of their web projects.
Learning and Assessment strategies
Throughout the course, learners will have access to video lectures, presentations, cheat-sheets, online resources, and quizzes to reinforce their understanding. They will also engage in practical exercises and peer reviews to apply their knowledge in real-world scenarios.
Conclusion
By the end of the course, learners will have developed the skills to create functional and visually appealing web pages. They will have a solid understanding of HTML, CSS, JavaScript, and the Bootstrap framework. The course will provide a comprehensive introduction to web development and design, equipping learners with the necessary skills for further exploration in this field.
Type of Course
This course serves as an initial foray into the vast field of web development, providing students with the knowledge necessary to create their own basic website from scratch. By taking this course, students will acquire a foundational understanding of key programming languages like HTML, CSS, and Javascript. The course will cover effective strategies for combining these languages to create visually appealing, interactive websites that can function across a variety of platforms.
Target audience and learner profile
The target audience for the course is first-year students at a technical university. This course aims to help them comprehend the fundamental concepts of web development while providing basic knowledge of the typical structure of a website, including the abilities and limitations of software developed for the web.
This course will be delivered in a self-paced, online format.
Prior to enrolling in this course, learners should possess the following skills:
- the ability to use text-formatting tools or an IDE (Integrated Development Environment).
- a fundamental understanding of the structure of the internet, as well as client-server architecture.
Learning Gap
The “Digital 2022: October Global Statshot Report” 1 reveals that there are currently 5.07 billion internet users worldwide, representing 63.5% of the global population. As a result, web development has become a crucial area of focus for both developers and businesses, and its importance is likely to continue to grow in the future.
The field of web development can be visualized as a tree, with branches representing different languages, technologies, and frameworks such as PHP, Ruby on Rails, WordPress, and Laravel. However, all of these branches share a common root in HTML and CSS.
To gain a deeper understanding of modern web technologies, learners must first grasp the fundamentals of the web. This will provide them with a solid foundation for further learning and creating more complex projects.
Terminal Learning Objective
At the end of the course students will be able to create a static website using HTML, CSS, and JavaScript, conduct cross-browser and cross-platform testing and troubleshoot found issues.
The first objective requires students to apply their knowledge and skills to create a website, while the second and third objectives involve higher-order cognitive processes such as analysis and evaluation, as well as problem-solving skills.
Course Learning Objectives
The course consists of 6 modules with the following learning objectives:
Module 1. Basic Syntax:
- Remember key HTML tags, their attributes and their hierarchy
Module 2. Applying CSS Styles:
- Visualize verbal requirements using CSS styles
Module 3. Document Structure:
- Modify a web page structure using the HTML block model
Module 4. Cross-Browser and Cross-Platform Coding:
- Optimize a web page for cross-browser and cross-platform compatibility
Module 5. Interactive Documents with JavaScript:
- Add interactive elements to a web page using JavaScript and jQuery library
- Evaluate the effectiveness of jQuery library compared to native JavaScript code
Module 6. Bootstrap Framework:
- Develop a web project from scratch using Bootstrap framework
Instructional Strategies
1. Lectures: Instructors deliver pre-recorded lectures and presentations to teach students the basic concepts, syntax, and best practices of HTML, CSS, and JavaScript.
2. Online resources: Instructors provide students with access to online resources with interactive code examples to supplement their learning and help them to troubleshoot issues encountered during the course.
3. Hands-on practice: To reinforce the knowledge learned in the lectures, students participate hands-on practice exercises where they create and modify web pages using HTML, CSS, and JavaScript.
4. Peer review: Students will engage in peer review to provide feedback on each other’s work. This would help them to learn from each other’s mistakes, build teamwork skills, and develop critical thinking and analysis skills.
Assessment Strategies
Module 1:
- Multiple-choice quiz to assess understanding of key concepts.
- Project assignment where learners create a simple web page to showcase their comprehension
Module 2:
- Combined quiz with multiple-choice and short-answer questions to assess understanding of key concepts.
- Project assignment where learners modify view of the previously created web page using gained knowledge
Module 3:
- Multiple-choice quiz to assess understanding of key concepts.
- Project assignment where learners modify layout & structure of the previously created web page using gained knowledge
Module 4:
- Project assignment where learners optimize the previously created web page using gained knowledge
- Peer review of the created project
Module 5:
- Combined quiz with multiple-choice and short-answer questions to assess understanding of key concepts.
- Project assignment where learners modify behavior of the previously created web page using gained knowledge
Module 6:
- Project assignment where learners build a new web site from scratch using all knowledge gained during the course
- Peer review of the created project
Content Sources
1. Walter Angelia. The all-in-one HTML, CSS and JavaScript Beginner’s Guide
The guide covers the three crucial languages for internet development and demonstrates how to make use of all these crucial technologies with each other.
https://studylib.net/doc/25983282/walter-angelia-the-allinone-html-css-and-javascript-beginner
2. McGrath M. HTML, CSS & JavaScript In Easy Steps
HTML, CSS & JavaScript in easy steps instructs the reader on each of the three coding languages that are used to create modern web pages.
https://studylib.net/doc/26095633/html–css-javascript-in-easy-steps-special-edition-mike-m…
3. Jennifer Niederst Robbins. Learning Web Design A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics
Each chapter of this book provides exercises to help you learn various techniques and short quizzes to make sure you understand key concepts.
https://studylib.net/doc/26073098/learning-web-design–a-beginner-s-guide-to-html–css–jav…
Course Sequencing
The course “Web Technologies and Web Design for Beginners” will be presented in 6 Modules, which should be provided in sequential order. The knowledge gained in the previous module becomes the basis of the next one and project assignment is constructed in the way when user organically extends his project using recently gained experience.
Learning Plan
Introduction
[Discussion Forum] Getting acquainted with the learners, the instructor assesses learners’ level and checks if they have skills, needed for enrolling in the course.
Module 1. Basic Syntax (Length: 2 weeks)
[Video Lecture] Instructor gives learners understanding of HTML language structure, web page architecture and rules of applying basic HTML tags.
[Presentation/Infographics] Learners get cheat-sheet of HTML tags and their attributes
[Practice] Learners select personal theme from the list, provided by instructor and create basic non-styled web page dedicated to it.
[Quiz] Knowledge Check
Module 2. Applying CSS Styles (Length: 2 weeks)
[Video Lecture] Instructor explains learners the principles of cascading style sheets and their application to HTML tags.
[Presentation/Infographics] Learners get cheat-sheet of CSS attributes
[Online Resource] Instructor shares with learners code examples showing different applications of CSS styles.
[Practice] Learners modify the web page they created in Module 1, adding styling, fonts and colors and following the principles of usability and accessibility.
[Combined Quiz] Knowledge Check
Module 3. Document Structure (Length: 2 weeks)
[Video Lecture] Instructor describes the way so build the structure of more complex documents using block model.
[Online Resource] Instructor shares with learners code examples showing block documents of diffecent complexity.
[Practice] Learners modify the structure of the web page they updated in Module 2, adding more content blocks.
[Quiz] Knowledge Check
Module 4. Cross-Browser and Cross-Platform Coding (Length: 2 weeks)
[Video Lecture] Instructor explains the principles of cross-platform and cross-browser coding, and shares the ways to perform cross-platform and cross-browser testing.
[Presentation/Infographics] Learners get cheat-sheet of most commonly used browsers and screen resolutions
[Online Resource] Instructor shares with learners code examples showing correct responsive pages.
[Practice] Learners optimize the web page they updated in Module 3 to support correct behavior on most used devices and in popular browsers.
[Peer Review] Students exchange their pages and perform testing on their devices, writing a test report.
Module 5. Interactive Documents with JavaScript (Length: 2 weeks)
[Video Lecture] Instructor gives learners understanding of JavaScript syntax and intro into using jQuery library.
[Presentation/Infographics] Learners get cheat-sheet of JavaScript syntax
[Online Resource] Instructor shares with learners code examples showing various examples of interactive page behavior.
[Practice] Learners add to the web page they updated in Module 4 interactive elements according to individual task provided by instructor.
[Combined Quiz] Knowledge Check
Module 6. Bootstrap Framework (Length: 2 weeks)
[Video Lecture] Instructor introduces learners CSS Frameworks and explains their advantages on example of Bootstrap.
[Presentation/Infographics] Learners get cheat-sheet of Bootstrap pre-defined content blocks
[Practice] Based on the content gathered during Modules 1-5 learners rebuild their web page using Bootstrap framework and create complete functional project.
[Peer Review] Students exchange their projects and perform user testing.
Learning Model
To ensure that this course leads directly to achieving the final learning objective, I will primarily use the Understanding by Design model.
With backwards planning, suggested by this model,I will ensure that every module aligns with its objectives, and that each assignment provides acceptable evidence for meeting those objectives.
Learning Theory
The Constructivist Theory is based on the idea that students construct knowledge and meaning through their experiences and interactions with the environment.
This theory is particularly suitable for a web technologies course, as it encourages students to learn through hands-on practice and experimentation. Students are given the opportunity to apply the new knowledge in a practical context via creating and modifying own web pages.
Course Standards
The course standards are designed to ensure a successful learning experience for all participants. By meeting these standards, you will develop a solid foundation in web technologies and web design. Please adhere to the following requirements:
Active Participation in Discussions:
Ask questions, seek help, and provide constructive feedback to enhance the learning experience.
Maintain a respectful and inclusive environment, refraining from any form of disrespectful or non-constructive behavior.
Quizzes:
Achieve a score of 60% or higher on Quizzes during modules 1,2,3 and 5.
Demonstrate your understanding of the core concepts, principles, and techniques covered in the course.
Project assignment:
Complete steps of project assignment in full amount and in time, because it is the key to successful fulfillment of next modules.
Score 60% or higher to showcase your practical application of the learned skills.
By fulfilling the above requirements, you will successfully complete the course and earn your completion Certificate.
Course owners encourage you to make the most of this learning opportunity, interact with your peers, and enjoy the journey of exploring web technologies and web design. If you have any questions or need guidance, feel free to use the discussion forum to seek assistance from your peers or the instructor.
Remember, the course environment is supportive and inclusive. Any posts or feedback that violate the respectful and constructive guidelines will be promptly removed by the course administrators.
Get ready to embark on an exciting learning journey, acquire new skills, and unlock your potential in web technologies and web design!
1: https://datareportal.com/reports/digital-2022-october-global-statshot