Web development is the process of creating and designing websites for the World Wide Web. Understanding web development requires familiarity with the fundamental components of the web and the technologies used to build modern websites.
In its early days, the web consisted of virtual documents (or pages) linked together through Universal Resource Identifiers/Locators (URIs/URLs). These documents were created using Hypertext Markup Language (commonly known as HTML), a markup language that allowed users to define the structure and presentation of web pages [1]. Over time, the web has evolved significantly under the guidance of early computer scientists like Sir Tim Berners-Lee, growing into the twisted mix of beauty and insanity it is today [1].
The core building blocks of modern web development are HTML, Cascading Style Sheets (CSS), and JavaScript. While approximately 98.7% of websites still utilize HTML, CSS and JavaScript have become essential additions to enhance the functionality and visual appeal of these pages [2].
1) That it is inherently challenging and that coding knowledge is no longer necessary for building complex websites. Contrary to this notion, website design is simple if you put in the effort. It’s unrealistic to be able to compete with the quality and build of well-established enterprise sites online on day one, but realistic to quickly overtake the scary amount of 1990s sites still up within a week or so of study. I mean, HTML and CSS aren’t even classified as languages! They’re just “markup” and “styling” sheets.
2) That it is useless to learn if website builders exist and offer basic features suitable for general purposes. This is a fallacy because customizing advanced functionalities often requires coding expertise (refer to our example in the previous section!). Thus, web-based development skills are important to learn.
Website builders like Webflow and Wordpress offer friendly and appealing interfaces to create websites without directly needing to learn to code. However, it is paramount to recognize that these platforms still utilize the underlying technologies of HTML, CSS, and JavaScript under-the-hood. While they simplify website creation, for any more advanced customization, they require custom-code.
For example, a groupmate built a small website called the GitHub Painter [3] that looks like it could be made with a builder, right? I mean, it’s only a couple squares on a grid! However, this problem took several thousand lines of custom-code to build, alongside code-generation. However inception-y that sounds, no builder could do it. I’ll say it again, knowing how to develop your own custom solutions is critical in this day and age; it gives you versatility and the ability to stretch your creative muscles — the freedom not to be bound to somebody’s else’s idea of perfection.
The choice of web development as our topic is driven by our group's extensive experience in the field. Multiple of our team members have undertaken university-level courses and I’ve additionally participated in a London-based bootcamp. Moreover, I run a "Help Kids Learn To Code" Discord server [4], with about 500 members primarily aged 13 to 18, which has afforded me valuable insights into interacting with this demographic.
Unintentionally, for the Discord server [4], my primary audience has become these young individuals. Oddly, on the younger side of that spectrum I’ve noticed a large minority of them have some mental ailment, usually a variation of an attention-deficit disorder. Many of these knowledge-seekers thus require specialized one-on-one continual encouragement to learn and grow.
In accordance with advice received earlier, I was thinking about switching-up some of our activities to be easier. However, before I did so, I perused my Discord server. Within a few minutes, I saw a 13 year old Balkan kid building a video game in Python, a 14 year old South Korean building an AI image processing system, and another 14 year old writing some unknown low-level assembly program. Then it hit me. I think kids of this demographic like learning hard things. They know coding is prestigious and difficult, so they want to be treated like adults. Thus, I've altered the material a little bit (especially the JavaScript lessons) to make them easier, but primarily kept the HTML and CSS lessons the same (they're easier by default anyway). However, it's worth noting that emphasizing the difficulty of these activities is recommended. This will both incentivize the kids (give them a challenge), alongside vindicating the kids who are unable to progress at the same speed (note: there are enough easy activities to keep these kids occupied as well). I’ve put a lot of thought into this, based upon my personal experience interacting with specifically young learners wanting to learn coding.
We tentatively propose hosting this resource on a groupmate's personal website, [5], which was created using the very web development techniques we’re trying to teach. By doing so, we aim to add a sense of credibility to the article, and become more relatable to the learner. In other words, we want them to know their teachers once went through the very thing they’re going through now themselves, and that the skills they learn will carry-forward and be useful.
We will not rely on a single learning approach, but a combination of behaviourism, cognitivism and constructivism.
Behaviourism: Students will be asked to do some simple practice questions such as fill in the blanks to successfully run code while we are teaching the basic knowledge. When they complete these practice questions, it will automatically show whether their code is correct (a check mark for the correct code, and an error mark for the wrong code). This will encourage students to reinforce correct coding through practice and positive feedback.
Cognitivism: We will engage students in analyzing cases and discussing activities to understand applies to the real-world. This will encourage students to think critically about the concepts, absorb others’ opinion and reinforce their understanding of basic principles.
Constructivism: We will randomly divide students into groups and let them build a simple website as a group. Group members share their opinions, solve problems and deepen their understanding of web development through group discussions. Every group member should actively participate in and learn from the interactions with their peers.
We elected to work most frequently with a combination of project-based and direct instruction. Initially, we leaned towards this approach when designing our plan because two of our groupmates have taken computer science classes before, and this is the strategy their favorite professors utilized.
The structure of our content will be based on the three uncontested fundamental components of web development: HTML, CSS, and JavaScript, which also happens to map perfectly with the number of team members in our group!
An introduction should be made before diving into the three subtopics to clarify how they connect. This was an overview I was never given, but wish I had been:
To relate a web page to our own human physiology: HTML is like our bones. It makes up our structure. It helps us not fall apart. However, with just HTML, we can’t walk, don’t have skin, and are pretty much ugly and useless! If we add CSS, which is like our skin and outer layer, we become more pleasant to gaze upon — we suddenly gain eyelashes, hair, skin, and lips! From the outside, we now appear fully human. However, without JavaScript, all we can do is lay static, doing nothing. Thus, to correct this, we add JavaScript, which is like our brain! With it, our human can now walk, talk, and do things by themselves. Likewise, with JavaScript, our website can now handle button presses, talk to a server, and much more!
HTML (Hypertext Markup Language): HTML is the foundational markup language for creating web pages, and displaying text, graphics, animations, tables, links, images, and other content through markup tags.
CSS (Cascading Style Sheets): CSS is a styling language used to represent file styles such as HTML. CSS can not only style web pages statically, but also dynamically format elements of web pages with various scripting languages.
JS (JavaScript): JavaScript is a versatile programming language used to embed dynamic text in HTML pages, respond to browser events, read and write HTML elements, validate data before it is submitted to the server, detect visitor’s browser information, and control cookies.
The HTML language is basically a language is basically a simple language and the main question is whether the students understand the basic structure of the HTML document which is quite necessary.The students should also know how to basically map anUI idea from the code , but the main question is whether the students can implement what they have learned into more complex projects.
The CSS language is quite different from all the other languages but the main thing is that the students can analyze or use UI design sources in such a way that they are able to create creative web interfaces.
JavaScript is basically a language which is quite easy, but the main thing is that are students able to understand the syntax and the code because it seems quite simple, but actually is a lot tougher than what people think. Then comes the arithmetic operators. Once students know how to code they can easily use these arithmetic operators. The JavaScript language is all about functions , it consists of function which have to be called in certain way.
The learning objectives basically give an idea about how to learn and perform some tasks to know a bit of coding. After completing the assessments , students get to know how to think of solutions for the layout and the design projects.Learners would also get to know that how to use HTMl and CSS to build certain website and would also know how to level up the website in terms of functionality and aesthetics. Once students are done with the functions assessments , they now know about 75 percent of the java language because it basically based on functions.
An introduction should be made before diving into the three subtopics to clarify how they connect. This was an overview I was never given, but wish I had been:
To relate a web page to our own human physiology: HTML is like our bones. It makes up our structure. It helps us not fall apart. However, with just HTML, we can’t walk, don’t have skin, and are pretty much ugly and useless! If we add CSS, which is like our skin and outer layer, we become more pleasant to gaze upon — we suddenly gain eyelashes, hair, skin, and lips! From the outside, we now appear fully human. However, without JavaScript, all we can do is lay static, doing nothing. Thus, to correct this, we add JavaScript, which is like our brain! With it, our human can now walk, talk, and do things by themselves. Likewise, with JavaScript, our website can now handle button presses, talk to a server, and much more!
An alternative/supplementary way forward: following this video series [6].
| Skill classification | Essential question | Learning objective | Assessment plan | Additional resources by activity |
|---|---|---|---|---|
| Knowledge (formative) | Are students able to identify the structure of a basic HTML document? | The students will match 10 different commonly-used tags to what their UI representation is. | A matching activity (we did this in CSC 130!). There are 10 lines of “code” on a projector, with 10 lines of UI on another projector. Students must attempt to match the two correctly. | HTML tags intro: w3schools.com/html [7] |
| Collaboration and analysis (summative) | Are students able to map an idea of a basic UI from their minds to code? | Students should be able to think of a tag they want to create, and add it to the page such that the UI renders. | Students are put into groups where they prompt each other with assorted ideas of “cool” UI concepts. They then try to actually bring those individual concepts to life with a matching HTML tag. |
HTML visualizer tool:
codebeautify.org/htmlviewer [8] Easy HTML editor (no installation): html.onlineviewer.net [9] |
| Aggregated application (summative) | Can students apply individual tag-based skills to a more complex project? | Students build a basic web page. | Students are asked to create a “personal website” about themselves that looks better than any 1990s website they find online. This brings out the competitive side of them! Let their own motivation drive them forward. Many intelligent computer science professors have awful websites, and it’s encouraging for students to be able to surpass their websites so quickly. |
Example old websites:
blog.uptrends.com/internet/6-internet-fossils-websites-from-the-90s-that-still-work [10] More example old websites: makeuseof.com/popular-90s-websites-running [11] |
An alternative/supplementary way forward: following this video series [12].
| Skill classification | Essential question | Learning objective | Assessment plan | Additional resources by activity |
|---|---|---|---|---|
| Fundamental knowledge (formative) | Are students able to understand basic syntax and structure of CSS rules? | Students complete basic code by filling in the blanks. | There are 20 lines of code with blanks, and students need to follow the instructions and fill in the blanks to complete the code. | CSS intro: w3schools.com/css/default.asp [13] |
| Collaboration and analysis (summative) | Can learners analyze UI design choices to create effective web interfaces? This is highly subjective, but allows for great creativity. | Students need to be able to think up CSS solutions for layout and design challenges in web projects. | Students participate in a group project. They need to create a responsive and naive website design, while providing feedback on peers’ website designs. | CSS frameworks: getbootstrap.com [14] |
| Aggregated application (building on previous skills; summative) | Can students apply CSS skills effectively to create comprehensive and polished web projects? | Students should be able to proficiently integrate HTML and CSS to build websites, and use CSS properties and techniques to enhance website aesthetics and functionality. | Students create a multi-page website with HTML and CSS, showcasing a combination of design, layout, and interactivity. Encourage students to perform code reviews for peers’ projects and provide constructive feedback. | CSS preprocessor: sass-lang.com/install [15] |
An alternative/supplementary way forward: following this video series [16].
| Skill classification | Essential question | Learning objective | Assessment plan | Additional resources by activity |
|---|---|---|---|---|
| Fundamental knowledge (formative) | Are students able to understand the syntax and procedure of how the first official “programming language” code works? | The students just have to create a variable and have to assign the values to that variable. They can also print the results to see a visual representation. | This assessment consists of just 5 exercises where students have to create a new variable and assign it to certain values given in the question. | Javascript variables 101: exercise_js.asp [17] |
| Breadth of knowledge — widening the base (summative) | Are students able to use arithmetic operators in JavaScript? | The students would get to know how to use different arithmetic operators in JavaScript. | The students must use the arithmetic operators in such a way that they get the desired output. They are given 4 or 5 test cases. These consist of statements like “1+1” or “5*2”. | Javascript operations: exercise_js.asp [18] |
| Usage of Functions (summative) | Are students familiar with functions in JavaScript and how to call them? | Students learn how to use functions and get the desired output from them. | The students must call a pre-specified function, such that the function is executed and returns a predetermined result. For example, “write us a function that returns the word ‘three’”. | Javascript functions: exercise_js.asp [19] |
Formative assessment: Formative assessment means that educators provide continuous feedback to learners during the learning process to ensure that learners can adjust their learning methods according to the feedback. E.g., practice questions, quizzes, and discussion on coding. Learners also can get formative assessment through online meetings with instructors.
Summative assessment: Summative assessment is the assessment at the end of a study period of learners’ understanding and mastery of all the content learned. For example, we evaluate the web pages that student groups finally created.
Self assessment: Self assessment involves learners reflecting on their own progress and learning performance. Students can take notes, write blogs or make a checklist to document their study and reflect what they need to do.
Our rubric ranges from level 1 ("no content grasp") to level 5 ("advanced understanding") without clear parameters in the middle. We've decided this is for the assesser to determine. However, we've given them generic categories we believe important. These levels will be given over grades.
| Category | Level 1 | Level 2 | Level 3 | Level 4 | Level 5 |
|---|---|---|---|---|---|
| Content & Holistic Viewpoint | Insufficient | Basic | Proficient | Good | Excellent |
| Organization of Ideas | Disorganized | Inconsistent | Logical | Structured | Well-structured with clear flow |
| Clarity & Concept Understanding | Unclear / Nothing | Inadequate | Clear and Personal Insight | Effective or Driven | Highly effective and easy to understand, going above and beyond |
| Domain-relevant Language | Unintelligible | Errors present | Accurate and coherent | Polished with minimal errors | Fluent, precise, and articulate |
| Delivery & Energy | Monotone | Unengaging | Engaging | Dynamic and interactive | Compelling, captivating, and inspiring |
HTML: We will create an interactive matching activity. There will be 10 lines of “code” on a projector, with 10 lines of UI on another projector. Students must attempt to match the two correctly. When they complete the activity, they will receive feedback.
CSS: Learners will be asked to change attributes such as colors, fonts and margins for web pages. Learners can understand how CSS properties affect the style of web pages by comparing the visual effects they see with the original web pages.
JavaScript: Learners will be provided with some buggy JavaScript function code snippets, and they need to identify and fix the bug. The function should be executed successfully and returns the expected result.
Perception: We will provide a variety of media formats, such as text, images, videos, and audio, to present the introduction to web development. For example, providing transcripts for the learners with hearing impairments or the learners prefer reading.
Engagement: We will allow students to choose their topic that they are interested in, so they are more likely to engage in the projects. Also, they can get diverse perspectives through group projects and peer reviews.
Expression: Learners are allowed to present their final project through various ways, such as coding projects or multimedia creations.
Inclusivity and Accessibility: We will make the learning content available through various devices, such as mobile phones, tablets and computers. We will also ensure that we do not use sensitive words that make students from different cultural backgrounds feel disrespected. Additionally, we provide some incorporated accessibility features to support learners with disabilities.
Moreover, as an aside, we made the website dark-themed to help protect our learners' eyes! The small things are important.
We’re electing to use a tool called JS Fiddle (https://jsfiddle.net/). This is a platform that allows for the writing and manipulation of HTML, CSS, and JavaScript online. The key point here is that users don’t need to install anything. This will help lower the barrier for entry and help alleviate any installation issues (which are all-too-common to occur while coding). Every lesson can be completed using this website, and users can access it from any (common) operating system such as iOS, MacOS, Windows, etc. Additionally, it allows learners to create accounts so they can persist their progress across different sessions/lessons.
As discussed above, we elected to host our resource on one of our groupmate’s personal websites to build Ethos with our learners. This is so our learners can see we practice what we preach and know how to develop ourselves. This, of course, being built with pure HTML, CSS, and JavaScript.
The review of our resource by Pod #6 can be found here [20].
Thank you so much for the feedback.
We love how you observed the relevance and inceptionary nature of website development as an interactive learning resource — especially in today’s digital era!
Your insight regarding the target audience being young individuals is spot on. In today's tech-driven world, young people are inherently drawn to technology, and we desire to pivot our Interactive Learning Resource off that.
Highlighting that coding isn't a mandatory skill for building a basic website is a significant point. We initially weren’t sure if we should include it, but did anyway. Website-builder tools have truly opened-up the world of web development, making it accessible to a broader range of learners. However, as our resource highlights, we know they don’t work for everything, especially as projects scale in complexity.
Your suggestion of incorporating step-by-step tutorial videos for each topic or skill within the web development learning process is an excellent one. We will be doing this. We realize videos can provide a visual and auditory dimension to the learning experience, and hence should add them. We already have a few indirectly included via the links we provide throughout the resource, but we see how more would be paramount to our learners’ experience.
Overall, great feedback, and we’ll be sure to implement it.
Note: we have now implemented these changes.
I recently had the opportunity to explore the "Interactive Learning Resource: States of Matter", and I am really impressed with the level of depth, clarity, and interactivity that this resource provides.
I’ll start off by saying I really like the Canva slides. They bring a certain aspect of beauty to the resource and make it appear like the team has spent a large amount of “tender-loving-care” on it. As a light Canva user myself, I’m actually very curious how you got all the graphics to fit the theme so well together considering how many you had.
In regard to the content, I liked how easy it was to grasp the holistics of what you were trying to teach: liquids, solids, and gasses. Then, after you’d pulled the viewer in with that, we learned more about each one after first being prompted with an essential question. This made the resource easy to follow. Moreover, your rationale made a lot of sense to me. They made me desire to see how your three mentioned overarching themes could be accomplished by learning about your topic.
My only critique would be to perhaps provide a qualitative rubric. I noticed the resource does say things like “1 mark”, or “12 marks total”, but that’s very definitive and I think students would almost want to be assessed more on “you did well, critically engaged, remembered core concepts” which perhaps “maps to an X/12” instead of just giving the grade outright.
Overall, love it! I look forward to seeing the finished version.
I recently read the “Interactive Learning Resource: States of Matter” and it was impressive to me. This learning resource is designed to provide middle school students with basic knowledge about matter to effectively help them in their future studies. It combines a lot of interaction between classmates and it is really related to the real world.
This learning resource is logically designed. At the beginning, it introduces the basic characteristics of matter and the clear development reasons. In addition, the target learners are also accurately identified, as they designed a suitable learning approach for the target student group. It also uses simulations and quizzes to allow students to effectively use and test what they have learned.
You also may want to use some interactive tools to actively engage students in learning. Combining it with daily life can make students remember and deeply understand the knowledge. Moreover, it ensures accessibility for students from different backgrounds.
Additionally, in my opinion, perhaps you might consider expanding the types of questions such as open-ended questions, in-class discussions, and group projects to provide a more comprehensive assessment for learners. For example, you can divide learners into several groups, and ask them to explain the process of changing the state of matter in any way, such as a cartoon, mind maps or videos.
I once did a similar project in a biology class to show cell division. I chose to make cupcakes and painted the process with cream on each cupcake, and I deepened my understanding of the content through the project. This allows students to not only express their understanding of what they have learned through their creativity, but also learn from each other through the discussion with group members.
Overall, it is a well-designed interactive learning resource. I’m looking forward to seeing the final draft!
I recently saw the draft and was able to learn a lot through it.
The complete learning resource on the states of matter is a wonderful instructional tool designed specifically for middle school pupils. It goes expertly into fundamental principles, presenting matter as entities with mass and space occupancy that exist as solids, liquids, and gasses. The logic for the resource is persuasive, catering to various learning styles and connecting academic theory with real-world applications.
Using a constructivist approach, the resource encourages active participation through experiments, conversations, and problem-solving, resulting in a deep knowledge rather than mechanical memory. It matches wonderfully with the inquiry-based technique, encouraging students to investigate and discover the qualities and changes of matter.
In my opinion, the educational content, which explains the differences between solids, liquids, and gasses, is straightforward and succinct. The interactive video portions, along with thought-provoking questions, help to improve understanding. Furthermore, the material efficiently dispels myths, correcting assumptions concerning particle mobility in solids and gas mass.
I certainly believe that this resource delivers core information beautifully, preparing young learners for higher scientific ideas while connecting the topic to real-world circumstances. It is a valuable resource for middle school pupils starting their academic careers.
[1] CERN. “A short history of the Web.” home.cern. home.cern/science/computing/birth-web/short-history-web (accessed Jul. 24, 2023).
[2] Tech Jury. “How many websites use JavaScript?” techjury.net. techjury.net/blog/javascript-usage-statistics/ (accessed Jul. 24, 2023).
[3] Vercel. “Github Contribution Graph Painter.” vercel.app. github-painter.vercel.app (accessed Jul. 24, 2023).
[4] Discord. “Discord Invitation Link.” discord.app. https://discord.com/invite/S52askGmrV (accessed Aug. 14, 2023).
[5] Matthew Trent. “I’m Matt, a Programmer.” matthewtrent.me. https://matthewtrent.me (accessed Jul. 24, 2023).
[6] Programming With Mosh. “HTML Tutorial for Beginners: HTML Crash Course.” youtube.com. https://www.youtube.com/watch?v=qz0aGYrrlhU (accessed Aug 13, 2023).
[7] W3Schools. “HTML Tutorial.” w3schools.com. https://w3schools.com/html (accessed Jul. 24, 2023).
[8] Code Beautify. “Best HTML Viewer, HTML Beautifier.” codebeautify.org. https://codebeautify.org/htmlviewer (accessed Jul. 24, 2023).
[9] Online Viewer. “HTML Online Viewer.” onlineviewer.net. https://html.onlineviewer.net/ (accessed Jul. 24, 2023).
[10] Uptrends. “6 internet fossil fuels - websites from the 90s that still work.” uptrends.com. https://blog.uptrends.com/internet/6-internet-fossils-websites-from-the-90s-that-still-work (accessed Jul. 24, 2023).
[11] Make Use. “12 Popular Websites From The 90s That Are Still Up And Running.” makeuseof.com. https://makeuseof.com/popular-90s-websites-running/ (accessed Jul. 24, 2023).
[12] Web Dev Simplified. “Learn CSS in 20 Minutes.” youtube.com. https://www.youtube.com/watch?v=1PnVor36_40 (accessed Aug 12, 2023).
[13] W3Schools. “CSS Tutorials.” w3schools.com. https://www.w3schools.com/css/default.asp (accessed Jul. 24, 2023).
[14] Bootstrap. “Build fast, responsive sites with Bootstrap.” getbootstrap.com. https://getbootstrap.com/ (accessed Jul. 24, 2023).
[15] Install SASS. “Install SASS.” sass-lang.com. https://sass-lang.com/install/ (accessed Jul. 24, 2023).
[16] Sheryians Coding School. “JavaScript Crash Course: Master the Basics in One Video! Ignite Your Front-End Mastery Series!” youtube.com. https://www.youtube.com/watch?v=htznIeWKgg8 (accessed Aug 12, 2023).
[17] W3Schools. “Exercise v3.0.” w3schools.com. https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_variables1 (accessed Jul. 24, 2023).
[18] W3Schools. “Multiply 10 with 5 and Alert the Result.” w3schools.com. https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_operators1 (accessed Jul. 24, 2023).
[19] W3Schools. “JS Functions.” w3schools.com. https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_functions1 (accessed Jul. 24, 2023).
[20] Pegah. “Review of Pod 4.” pegah.opened.ca. https://pegah.opened.ca/2023/08/14/review-of-pod-4/ (accessed Aug. 13, 2023).
[21] Google Docs. “ILR draft POD 6.” docs.google.com. https://docs.google.com/document/d/1xj6gAVorQCn5X6ngEX8fLl8-L70yv9B9/edit (accessed Aug 13, 2023).
[22] Canva. “STATES OF MATTER.” canva.com. https://www.canva.com/design/DAFrNT_UMK0/ypltdlS6Ei4fpwjqqJm-dw/view (accessed Aug 13, 2023).
To Top