0

A Three-Step Strategy to Extend HTML/CSS Learning Environments to Virtual Community Contexts

Summary

Interdisciplinary degree programmes often include computer programming lessons in which students are expected to acquire skills in using Command Line Interfaces (CLIs)- interfaces in which the user is expected to type written instructions-  to write scripts using language-specific commands, commonly known as coding. Social science students who take coding classes face several challenges, such as difficulty in getting accustomed to CLIs and inability to cope up with incremental knowledge. This can lead to frustration among students. Moreover, differences in skill acquisition is a challenge from the instructors’ point-of-view as it can affect the overall progress and effectiveness of the lesson. In this paper, I discuss these issues, and develop a three-step strategy to address them. Based of the constructivist learning approach and the notion of Communities of Practice, I suggest that, in addition to setting minimum threshold skill levels and using peer-learning sessions, extending classroom activities to online Question and Answer (Q&A) platforms (e.g, Stackoverflow) can not only help students to fix errors in their code but also to establish themselves in a community of professionals.

Introduction

Interdisciplinary degree programmes, such as digital media degrees, often include technical as well as theoretical aspects of knowledge that demand a broad range of skills from students. This is particularly the case with modules that include practice-oriented learning outcomes, such as the ability to display skills in using web coding or programming languages (e.g., Hyper Text Markup Language- HTML, Cascading Style Sheets- CSS, Python, and R). Coding classes in interdisciplinary degree programmes can be challenging for students who are not familiar with CLIs. Differences in skill levels can also pose challenges for instructors. Social science students who struggle in coding classes often seek assistance from instructors and/or teaching assistants during laboratory sessions or using e-mails. Individual support during lessons can affect the overall progress of the lesson. Moreover, providing support using email to fix coding errors is less effective, as coding is an iterative process that requires running different commands until the problem is solved. I suggest that online question and answer (Q&A) platforms, such as Stackoverflow (https://stackoverflow.com/), can be used to extend coding lessons to a virtual community context that can enable seamless interaction between instructors, teaching assistants, students, as well as other members of the platform who are interested in solving similar technical issues. This approach promotes ‘thinking together’ (Pyrko, Dörfler, & Eden, 2017), provides a sense of community and belonging (Ardichvili, 2008; Tsai, Laffey, & Hanuscin, 2010), and helps learn through trial and error (Thomas, 2005). Not only does this provide a practice-based community context for students to solve problems, it also helps them to acquire collective problem solving skills that are necessary for their professional development.

In this paper, I will discuss the utility of Stackoverflow in teaching HTML and CSS to social science students. This discussion will benefit my teaching activities in the BA in Digital Media programme at Middlesex University since I discuss this topic in the context of the DME 1002 (Social Media and the World Wide Web) module that I currently lead at Middlesex. This paper includes three sections. The first section discusses the problem in detail. In the second section, I will discuss elements of Stackoveflow and how the platform can benefit coding education. In the third section, I will develop a strategy to integrate Stackoverflow to modules that include a coding component[1].

[1] The UK Professional Standards Framework (Higher Education Academy, 2011) outlines three dimensions (Areas of Activity, Core Knowledge, and Professional Values). I will map the teaching practices and strategies that I discuss in this paper against the specific guidelines in these three dimensions (Areas of Activity- from A1 to A5, Core Knowledge- from K1 to K6, and Professional Values- from V1 to V6).

Teaching Context and the Problem

Interdisciplinary approach to teaching and learning, or “integration of knowledge from multiple disciplines in pursuit of an outcome that is not possible from a single disciplinary approach” (Holley, 2017) is becoming increasingly popular. Interdisciplinary education requires interacting with knowledge from different disciplines, and this pedagogical approach aligns with integrative learning that involves connecting knowledge and skills from multiple sources as well as practical application of theory in a range of settings (Holley, 2017). Many academic disciplines have embraced interdisciplinary, especially by integrating knowledge in Information and Communication Technologies (ICT) into their curricular. This is particularly the case with media studies. A new wave of media studies has introduced degree programmes that have integrated elements of ICT into their curricular, allowing media students to acquire a range of skills that can help them to extend media practice into Internet-based platforms. This poses a number of challenges to both teachers and students.

  1. Difficulty in Using CLIs

Students in humanities and social sciences often use software with GUIs, commonly known as point-and-click interfaces. For instance, media students often use media design software such as Adobe InDesign, Adobe Photoshop, Autodesk Maya, Houdini FX that provide visible options for media design. Starting from general software like MS Word, GUIs are more popular as they do not require written commands. Software with CLIs, on the other hand, require skills in writing accurate scripts, commonly known as coding. While students who specialize in fields represent the core discipline of computing, such as computer science, software engineering, and information science, are accustomed to use CLIs, many social science students struggle when they are introduced to CLIs. Therefore, many instructors in interdisciplinary ICT classrooms face the challenge of understanding each students progress in acquiring the ability to use CLIs.

  1. Inability to Cope Up with Incremental Knowledge

Learning how to code is an incremental process as the students need to build their knowledge gradually.  Regular attendance and keeping attention on the lesson is crucial as the students often require commands learned in previous sessions to learn or apply new commands. For example, students need to learn how to create a list using HTML before they apply CSS to convert the list into a navigation menu on a web page. It is quite common that those who miss lessons, come to the class late, or get distracted often need assistance to understand coding lessons. This results in students asking for individual support during the lessons, increased frustration, or even giving up their attempt to write functioning scripts.

  1. Differences in Skill Acquisition

A third problem related to the above A and B is that, due to difficulties in getting accustomed to CLIs and making gradual progress, interdisciplinary coding classes often have a mix of students with different speeds of skill acquisition. This issue gets exacerbated if computer laboratories are structured in a way that affects students’ attention on the instructor. Therefore, instructors often have to help those who struggle to understand techniques learned in previous classes. This has also resulted in overdependence on the instructors and other teaching staff. This is time consuming, and it also can result in frustration among students who put high effort or had coding lessons previously.

The above three problematic dimensions directly relate to several aspects in the UKPSF. First, instructors need to teach and support learning (A2[1]) and respect individual learners (V1[2]). However, excessive individual support during laboratory sessions affects the overall progress of the lesson although it helps students that need more guidance. Instructors are required to plan lessons and classroom sessions (A1[3]). However, given the wide range of skill levels that instructors have to adapt to, implementation of lesson plans can be challenging.     From an overall perspective, this affects how students learn, the third element in the Core Knowledge dimension of UKPSF (K3[4]).

3          Strategy Development: Constructivism and Communities of Practice as Conceptual Foundations

In this section, I will develop a strategy to address the above issues. This strategy involves providing guidance for students to reach a minimum threshold of skills and extend the classroom into a community of practice context that can help not only with fixing coding errors but also with professional tactics in the field. The suggested strategy, I argue, can benefit from two theoretical approaches: 1) constructivism, and 2) Communities of Practice (CoP).

The constructivist approach views learning as an individual experience in which individual learners construct meaning (Sullivan, n.d.). Sullivan notes that learners may develop different conclusions even though they have the same experience or exposure to an event or a concept. Several scholars have stressed the importance of constructivist thinking in STEM (Science, Technology, Engineering, and Mathematics) disciplines. Clements and Battista (1990), for example, argue that, as opposed to the conventional teaching approach that values established bundles of knowledge, constructivist instruction can help students to develop personal mathematical ideas. They argue that this approach does not encourage students to adopt someone else’s thinking although the teacher presents tasks related to sophisticated techniques. Kocadere and Ozgen  (2012) also argue that the constructivist approach can benefit design education as evidenced by a ‘constructivist Basic Design class’ that encouraged of new ways of thinking, creativity, and the importance of finding new solutions to different design problems.

Constructivist approach is of immense importance when developing a strategy to address the issues discussed in the previous section. Computer programming, as mentioned previously, is an iterative process. Although there are common practices, every programmer develops his/own ways of coding, and detecting and correcting errors. Arguably, conventional teacher-centred lectures can less effective in teaching computer programming. As students make progress, they encounter tasks that require logical thinking (e.g., writing functions using Python programming language) that needs a learning environment that inspires independent thinking and development. While a common set of principles should be provided to the students to ensure that core content is delivered, constructivist approach is a more effective approach for teaching computer programming.

Communities of Practice  are “groups of people who share a concern or a passion for something they do and learn how to do it better as they interact regularly”(Wenger & Trayner-Wenger, 2015, p.1). According to Wenger and Trayner-Wenger, CoPs are characterized by a shared domain of interest, active membership, and practice with shared repertoire of resources, such as tools, stories, experiences, and ways of addressing problems. According to Pyrko et al. (2017), the process of ‘thinking together’ can be identified as a key characteristic of CoPs. As the CoPs are primarily defined by the interaction among members, online platforms, such as Social Network Sites (SNS) can help members to sustain CoPs. Lewis, Koston, Quartley, and Adsit (2010), for instance, note that Web 2.0 tools have potential to improve collaboration and promote information exchange that can help promote CoPs. Similarly, Byington (2011) highlights that blogs can serve as platforms for interaction among members of CoPs. The online CoP perspective has been applied in educational settings in different contexts, such as music education (Fitzpatrick, 2014) and elementary science classes (Tsai et al., 2010).

I suggest that online  Q&A platforms, like Stackoverflow, can serve as effective teaching tools that can help create learning environments that blend constructivist and CoP approaches. This is consistent with the A1, A2, A4, K1, K2, and K4 elements of UKPSF. In the following section, I will discuss three steps that can help develop such an extended classroom experience.

4          Specific Tactics for Improving Effectiveness of Coding Lessons

The issues that coding instructors face (difficulty in Using CLIs, inability to cope up with incremental knowledge, differences in skill acquisition) can be addressed by ensuring that all the students acquire a minimum required level of expertise, proving extra challenges, as well as signposting students towards communities of professionals who use programming languages and function as CoPs. This will not only allow students to interact with a group of professional in their future fields of employment, but also help them learn common practices in the industry.

  1. Step 1: Establishment of Minimum Threshold Levels

Instruction-based sessions should be used in the beginning of coding modules/lessons to ensure that every student is equipped with basic techniques that help them to move toward more advanced, and independent, activities. Table 1 provides several learning outcomes that can be used to establish minimum threshold levels in HTML/CSS classes.

Table 1: Learning Outcomes for an Introduction to the CSS ID Selector Lesson

Language Learning Outcomes
HTML Upon successful completion of this lesson, you should be able to perform the following tasks:

 

1) demonstrate ability to use the div tag to define divisions/sections in HTML documents

2) demonstrate the ability to assign IDs to ‘divs’ in HTML pages

 

CSS Upon successful completion of this lesson, you should be able to demonstrate the following:

 

1) demonstrate the ability to use the CSS ID selector to select divisions/sections (defined using the HTML div tag) within HTML pages

2) demonstrate the ability to apply at least three style changes (e.g., height, background colour, margins) using CSS internal styling

 

 

The above minimum level will provide a clear idea for each student on what they should accomplish in the lesson. Setting clear goals in terms of learning outcomes is important as it marks boundaries for the lesson. This can be achieved by developing a formative assessment in which the students are required to demonstrate the ability to reach the minimum threshold levels. Moreover, it is important that the instructor demonstrates these techniques and provide step-by-step instructions for students to follow the lesson. This is consistent with the A1 criterion of the UKPSF.

  1. Step 2: Student-Centred Practice Sessions

The more formal first section discussed above should be followed by a peer-learning session in which the students observe each other’s work, understand difficult areas/techniques, and help each other to correct errors in their scripts. Error detection and correction is a crucial aspect of coding, and these peer-learning sessions are important as they provide opportunity for students to read the codes writing by their colleagues and detect and correct errors. Not only this will reduce the burden on the instructor, this will also help students to familiarize themselves with collaborative coding, which is a highly popular practice in the industry. For instance, popular specialist platforms, such as GitHub (www.github.com) promote collaboration among programmers. These practice sessions are consistent with A4 and K3 criteria of the UKPSF.  Arguably, these peer learning sessions promote constructivist learning since students experiment with the programming language and find their own ways of problem solving.

  1. Step 3: Stackoverflow

In the third step, student should be encouraged to ask their questions on online Q&A platforms, such as Stackoverflow and maintain their presence in those online communities. This can be started as a classroom exercise in which every student creates a Stackoverflow profile. The students should be asked to keep a log of challenges they face that can help formulate questions that are appropriate for posting. The instructor should demonstrate how to use Stackoverflow as part of the lecture. This demonstration should include several components: 1) how to post questions on Stackoverflow (e.g., how to post reproducible code, how to phrase the questions, and tagging), 2) how to answer and rate questions and answers, and 3) general etiquette (e.g., langue conventions).

This approach offers several benefits to the students. First, this will help them develop the habit of independent learning which is a core characteristic of a successful programmer. Second, online activity will extend the learning beyond the classroom as online interaction on sites like Stackoverflow is not limited to specific time frames. This will also help students to continue their practice after the lesson. Third, the students will be able to see how the professional solve similar problems. This is important as it can increase levels of confidence. Stackoverflow is currently the largest online community on programmers. According to the website (https://stackoverflow.com/company), the platform gets more than 50 million visitors per month and its average membership consists of 51000 developers. The website also highlights that more than 19 million answers have been given to almost 14 million questions asked on the platform. The platform is open for anyone interested in asking and/or answering questions related to computer programming.

The learning outcomes given below focus on basic HTML and CSS commands that can be used to structure and style a basic HTML page. Although this is simple exercise, this can lead to several questions that students may bring to the instructors. For example, some students may notice that their web pages have unnecessary white borders. My students have faced this problem often, and many students requested me to show them how to fix this issue individually. However, this is a question that the Stackoverflow community has already answered.

[1] Teach and/or support learning

[2] Respect individual learners and diverse learning communities

[3] Design and plan learning activities and/or programmes of study

[4] K3- How students learn, both generally and within their subject/ disciplinary area(s)

Asking questions of this nature on online platforms and getting solutions online will provide a sense of independence and achievement for students as they become less instructor dependent through this practice. Moreover, they learn several ‘soft skills’ that are useful for programmers. For example, the students will learn how to post reproducible code as part of their questions on online platforms. This is a useful professional skill. The Stackoverflow community provide guidelines on how to post reproducible code for newcomers. Long-term engagement on Stackoverflow will also help students to develop the ability to identify good practices as the platform members constantly rank/assess the questions and answers. For example the answer above (Figure 3b) has received 11 points (this rank may increase or decrease when users click the up or down arrow button on the left side of the question). The use of Stackoverflow as a teaching tool is consistent with the UKPSF Core Knowledge element related to the use and value of appropriate learning technologies (K4).

  1. Evaluation of Effectiveness

Evaluation of the effectiveness of the above interventions will be done in three steps: 1) assessment of formative coding exercises, 2) individual and group feedback, and 3) observation of individual engagement on Stackoverflow. These measures correspond with the steps suggested in the subtopics A, B, and C above. Students’ ability to reach the minimum threshold levels suggested above can be assessed by examining HTML/CSS documents submitted as part of a formative assessment. Functionality and clarity of code will be examined in this step to determine the progress made by each student in terms of applying HTML and CSS commands. In the second step, individual and group discussions will be used to identify the issues and challenges students face in coding lessons. These discussions should be held after at least four lectures/laboratory sessions as students need significant time to familiarize themselves with CLIs. In the third step, individual engagement on Stackoverflow will be assessed. Stackoverflow offers a range of criteria to assess the individual engagement both on the user as well as individual level. For instance, users will earn badges as they ask questions and contribute to the community by answering and rating questions. Moreover, Stackoverflow offers a number of simple metrics (e.g., reputation score, number of questions asked and answers provided, community rating for each question, and the impact made by each student). For students that have intermediate-level skills in coding, reaching established levels of engagement should be set as a minimum requirement (e.g, reaching an impact score of 200, asking at least five questions).

Conclusion

In this paper, I addressed the challenges faced by both students and instructors in interdisciplinary computer programming classes. The three-step strategy suggested here blends elements of constructivist teaching and Communities of Practice to enhance effectiveness of coding lessons. The steps suggested here demands independent effort, and therefore, the success of these steps depends on the extent to which students are willing to participate in peer-learning exercise and online communities.

References

Ardichvili, A. (2008). Learning and knowledge sharing in virtual communities of practice: Motivators, barriers, and enablers. Advances in Developing Human Resources, 10(4), 541–554. https://doi.org/10.1177/1523422308319536

Byington, T. A. (2011). Communities of Practice: Using Blogs to Increase Collaboration. Intervention in School and Clinic, 46(5), 280–291. https://doi.org/10.1177/1053451210395384

Clements, D. H., & Battista, M. T. (1990). Constructivist learning and teaching. The Arithmetic Teacher, 38(1), 34–35.

Fitzpatrick, K. R. (2014). Blogging through the music student teaching experience: Developing virtual communities of practice. Research Studies in Music Education, 36(1), 91–105. https://doi.org/10.1177/1321103X13509350

Higher Education Academy. (2011). The UK Professional Standards Framework for teaching and supporting learning in higher education. The UK Professional Standards Framework. https://doi.org/10.1017/CBO9781107415324.004

Holley, K. (2017). Interdisciplinary curriculum and learning in higher education. https://doi.org/10.1093/acrefore/9780190264093.013.138

Kocadere, S. A., & Ozgen, D. (2012). Assessment of basic design course in terms of constructivist learning theory. Procedia – Social and Behavioral Sciences, 51, 115–119. https://doi.org/10.1016/j.sbspro.2012.08.128

Lewis, L. A. lalewis buffalo edu, Koston, Z., Quartley, M., & Adsit, J. (2010). Virtual Communities of Practice: Bridging research and practice using Web 2.0. Journal of Educational Technology Systems, 39(2), 155–161. https://doi.org/10.2190/ET.39.2.e

Pyrko, I., Dörfler, V., & Eden, C. (2017). Thinking together: What makes Communities of Practice work? Human Relations, 70(4), 389–409. https://doi.org/10.1177/0018726716661040

Sullivan, L. E. (n.d.). Constructivist learning theory. In The Sage Glossary of the Social and Behavioral Sciences.

Thomas, A. (2005). Children online: Learning in a virtual community of practice. E-Learning and Digital Media, 2(1), 27–38. https://doi.org/10.2304/elea.2005.2.1.3

Tsai, I.-C., Laffey, J. M., & Hanuscin, D. (2010). Effectiveness of an online community of practice for learning to teach elementary science. Journal of Educational Computing Research, 43(2), 225–258. https://doi.org/10.2190/EC.43.2.e

Wenger, E., & Trayner-Wenger, B. (2015). Communities of practice: A brief introduction. https://doi.org/10.2277/0521663636

https://stackoverflow.com/company Accessed on January 20, 2017.

Chamil Rathnayake

Traversing Bits

Leave a Reply

Your email address will not be published. Required fields are marked *