Course syllabus
Welcome!
Welcome to this course at Dalarna University! We are excited to have you join us on this educational
journey where you will explore the fundamental principles and techniques of responsive web design.
Throughout this course, you will gain experience with HTML, CSS, and various techniques and common
practices that are essential for creating responsive and user-friendly websites.
This course is structured to provide you with a comprehensive understanding of both theoretical concepts and
practical applications. We encourage you to actively participate in lectures and exercises, complete lessons
diligently, and collaborate effectively with your peers. Your success in this course will be determined by
your engagement and effort, so be prepared to immerse yourself fully from the very start.
The Udemy course
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
is listed as essential literature for the course. The cost of this course varies significantly due to Udemy's
frequent special sales. It is advisable for students to purchase the course when the price drops below $20.
(Only watch the chapter "How CSS Works: A Look Behind the Scenes". This chapter makes out the core of what you'll
need to know when taking the quiz "Rendering Process and Cascade". You do not need to watch the final video
"Implementing BEM in the Natours Project". The other chapters in the Udemy course will be perfect as a next step
after completing this course.)
The book "Responsive Web Design with HTML5 and CSS (Fourth edition)" is relevant to the course, though no specific
part in it will be referenced during the course. However, it serves as an essential backbone for understanding the
key concepts. It is highly recommended for students who need alternative ways to take in information beyond the
provided resources and activities.
Remember to check the announcements regularly to stay updated on all activities and requirements. If you have any
questions or need assistance, please do not hesitate to reach out to us through the communication
channels provided at the bottom of this page. See
Contact.
This course begins immediately at a high pace with no room for procrastination. If you fall behind, it will be
challenging to catch up. It's essential to stay engaged and keep up with the coursework from the start to ensure
you can follow along and succeed.
Let's make this a productive and enjoyable learning experience. Welcome aboard, and let's get started with the screen recorded
Course Room Introduction.
Get ready with the correct software and file structure, by following along with the playlist
Getting Ready.
If you want to review the course evauluation from the previous course instance, read the following PDF:
Course Evaluation.
CURRICULUM
This curriculum serves as the central hub for the entire course, detailing both the examination tasks and the structured
weekly activities.
Examination Tasks
Each examined task offers three attempts during this course instance. The closing dates (deadlines)
for these attempts are detailed inside of each clickable attempt. If a student fails all three attempts,
they will be directed to the next instance of the course. A failure to submit is counted as a missed attempt.
To submit your work or access a quiz, click on the appropriate 'Attempt' for that task.
1
2
3.
Deadlines for all attempts are consistently set at
.
Access to an attempt is granted either at
or one minute after the deadline of the previous attempt, which would be at
.
Left-click on "Instructions and Files" at the bottom of each row. Files belonging to the task are stored on my
Google Drive. Left-click on the
icon found in the bottom right corner of each task instruction to get to the appropriate files. If there is no
icon, there are no files.
Examination tasks must be fully adhered to for approval, unless otherwise stated.
Pairs are created manually by students signing up for a pair themselves.
Project groups will be formed based on each student's performance in the tasks leading up to the project.
These tasks will be weighted as follows for group selection:
- HTML and Semantics (2 points)
- Layout Techniques with CSS (4 points)
- Accessibility (1 points)
- Rendering Process and Cascade (3 points)
TasksAttempts
HTML and Semantics
Ladok: HTML and Semantics
Credits: 1.0 Credits
Percent of Credits: 100%
Grading Schema: U-G
Difficulty: ★☆☆☆☆
Submission Format: Code
Collaboration Mode: Pair
Grading Type: Manual
Instructions and Files
- Watch this screen recording.
- After downloading the assignment file, make a copy and rename it using your unique pair group number (e.g., pair_7.html).
- The task involves identifying and substituting HTML elements with appropriate semantic alternatives. You should replace elements while retaining the original structure; no elements should be removed. Change both the opening and closing tags to a suitable semantic tag (e.g., h1, section, header, footer, a, p). There is only one correct solution to this assignment. For assistance, refer to the " Help" video in this playlist dedicated to this assignment. Ensure you follow each step carefully to meet the assignment requirements.
- Make sure all original elements are present in their correct semantic forms at the end of the process. Use the original version that you copied at the beginning to compare with your final version and ensure you have not accidentally removed any elements or altered the nested order of the elements.
- The assignment should be submitted once per pair, with the single submission covering both students.
Layout Techniques with CSS
Ladok: Layout Techniques with CSS
Credits: 1.5 Credits
Percent of Credits: 100%
Grading Schema: U-G
Difficulty: ★★★★☆
Submission Format: Code
Collaboration Mode: Pair
Grading Type: Manual
Instructions and Files
Objective
Create a responsive replica of the reference website. The reference is included with the folder you may
download under the headline "Files" below. To see how it works and for more instructions, watch the
full playlist
with instructions and walkthrough on YouTube.
Criteria
Download and work with the "LT_h44nnnnn_and_h44nnnnn" folder included under "Files" as the
foundation for this assignment. This folder already contains all the required files and links.
The structure and naming conventions of the folders and files within are correctly set up and
must not be changed.
Replica of Reference
-
Ensure your replica matches the reference closely. Pay special attention to
these points (watch the recording for more details):
- The order of the items within the segments must match the reference.
- Text that is bolder in the reference must also be bolder in your design.
- The items within the segments must cover the same place and space as in the reference.
- All gaps, both vertical and horizontal, must be the same size visually and in units.
- The space between the three segments (flex, grid, and grid-area) should remain as in the reference.
- The total width of the children within each segment (flex, grid, and grid-area) must add up so that both sides of each row align with the visual black border of the main element.
- The design must be responsive between screen widths of 500px to 1280px.
Limited Set of Declarations, Queries, and Properties
Each of the three files contains rules specified as comments at the top of the document.
These rules are slightly different for each file and outline:
- Mandatory declarations
- Permitted media queries
- Allowed properties
You must adhere to the rules stated within those files.
Allowed Changes
You are allowed to change and submit only the following files:
- flexbox.css (Location: "LT_h44nnnnn_and_h44nnnnn/css/flexbox.css")
- css-grid.css (Location: "LT_h44nnnnn_and_h44nnnnn/css/css-grid.css")
- css-grid-area.css (Location: "LT_h44nnnnn_and_h44nnnnn/css/css-grid-area.css")
- overlay.js (only if you have watched the video and understand its usage)
Target of Declarations (Selectors) per CSS File
- flexbox.css: Target only the "flex" div and its content within `index.html`. (No exceptions.)
- css-grid.css: Target only the "grid" div and its content within `index.html`. (No exceptions.)
- css-grid-area.css: Target only the "grid-area" div and its content within `index.html`. (No exceptions.)
Submission Procedure
Adhere strictly to the procedure detailed below:
- Make a copy of the entire outer folder "LT_h44nnnnn_and_h44nnnnn" (for backup reasons in case you do not pass).
- After making a backup, remove everything inside the original outer folder except the css-folder that contains all the files you have been working on. (Do not remove anything from the backup folder.)
- Rename the original outer folder "LT_h44nnnnn_and_h44nnnnn" by replacing the "h44nnnnn" parts with your respective usernames provided upon registration.
- Ensure that:
- The original outer folder has been renamed as instructed above.
- The css-folder is the only remaining folder within the original outer folder.
- The css-folder contains the three files you have been working on.
- Select the original outer folder.
- Zip the folder. (No other compression formats are acceptable other than zip. Formats such as rar and 7zip are not allowed and will not be graded.)
- Upload this zipped folder to the correct attempt in the Canvas Course Room.
- Click Submit.
Feedback Template
This assignment features an integrated feedback system, offering both a reference image overlay and a
rules check. Students can access these tools at any time. If a student doesn't successfully complete
the assignment, no additional feedback will be provided except for excerpts from the examples below.
The feedback will be concise and may include one or more of the points listed below.
Reference
The replica does not adequately replicate the reference in the segments and breakpoints specified
below. To deduce which error(s) you could have made in each segment, refer to the headline "Replica
of Reference" in the instructions.
500 px to 767 px:
- Flexbox
- CSS-Grid
- CSS-Grid-Area
768 px to 1023 px
- Flexbox
- CSS-Grid
- CSS-Grid-Area
1024 px to 1280 px
- Flexbox
- CSS-Grid
- CSS-Grid-Area
Mandatory Declaration
- In the flexbox section, keywords other than "flex" have been used.
- In the CSS-grid or CSS-grid-area sections, keywords other than "grid" have been used.
Media Queries
- Missing media queries, insufficient media queries, or the use of prohibited media queries.
Properties
Unapproved properties have been used in the:
- Flexbox segment
- CSS-Grid segment
- CSS-Grid-Area segment
Additional Possible Feedback
- The uploaded folder isn't named appropriately.
- The uploaded folder has the wrong type of zip-format.
- The uploaded folder ends with two or more zip folder.zip.zip
- The uploaded folder doesn't contain a css-folder with all the three css-files within.
- The uploaded folder contains more files than should have been included.
VERY IMPORTANT
The feedback provided above is the only feedback students will receive for this assignment. This
approach encourages students to identify their own mistakes and seek out the necessary information
to complete the assignment successfully. It is designed to discourage students from submitting
knowingly incorrect work just to receive corrective feedback. Instead, students are encouraged to
invest time in learning instead.
Accessibility
Ladok: Accessibility
Credits: 0.5 Credits
Percent of Credits: 100%
Grading Schema: U-G
Difficulty: ★☆☆☆☆
Submission Format: Quiz
Collaboration Mode: Individual
Grading Type: Automatic
Instructions and Files
Objective
This is a multi-choice quiz with 8 (eight) questions, where each question will present you with between two or
more possible choices. Carefully read each question and select the answer you believe to be correct
(Only one is correct). Ensure you understand the question fully before making your selection.
Attempts and Deadlines
You will have a maximum of three attempts for this quiz during this course instance. Each attempt has a deadline,
but as long as you make the attempt before that deadline, you may do so at your convenience. No more than a total
of three attempts will be available.
Criteria
- To pass, you must correctly answer 8 out of 8 questions. In other words, you need a score of 100% or higher to pass.
- Once you have received 8 points on an attempt, there is no additional value in making more attempts.
- If you score 8, you've passed. Do not ask the teacher if you have interpreted this correctly. A score of 8 or 100% means you've passed, while anything else means you've failed.
- Once you've completed the quiz, your answers will be evaluated automatically, and you'll receive the result of your performance instantly.
Answers to the Questions
You will find the answers to the questions in quiz on the pages linked below:
- Accessibility Legislation and Digg's Regulations
- Other Legal Requirements for Digital Accessibility
- Overview of EN 301 549 and WCAG Standards
- Application Areas and Entities Covered by Accessibility Law
- Web Guidelines Overview
- Make Visible What is in Focus - Web Accessibility Guideline
- Provide Suggestions for Correcting Errors - Web Accessibility Guideline
- Specify Purpose of Form Fields in Code - Web Accessibility Guideline
- Swedish Law on Digital Accessibility (SFS 2018:1937)
- W3C Web Content Accessibility Guidelines (WCAG)
- W3C Accessible Rich Internet Applications (ARIA)
Rendering Process and Cascade
Ladok: Rendering Process and Cascade
Credits: 1.5 Credits
Percent of Credits: 100%
Grading Schema: U-G
Difficulty: ★★★☆☆
Submission Format: Quiz
Collaboration Mode: Individual
Grading Type: Automatic
Instructions and Files
Objective
This is a multiple-choice quiz consisting of 15 questions. Each question will offer two or more possible
answer choices.
Carefully read each question and select the answer you believe to be correct (only one answer is
correct). Ensure you fully understand the question before making your selection.
You have 15 minutes to complete this quiz. Once you've completed the quiz, your answers will be evaluated
automatically, and you'll receive the result of your performance instantly. See "Grading" below for details.
There is a 3-minute Practice Quiz
available for those of you who want to become familiar with the quiz system. The questions in the practice
quiz are entirely unrelated to the course content, but the mechanics are similar. Please note that the difficulty
of the practice quiz questions is significantly different from those in the actual quiz. The real quiz is more
demanding, and the questions require more time to answer.
Attempts and Deadlines
You will have a maximum of three attempts for this quiz during this course instance. Each attempt has a deadline,
but as long as you make the attempt before that deadline, you may do so at your convenience. No more than a total of
three attempts will be available.
Criteria
- To pass, you must correctly answer 9 or more out of 15 questions. In other words, you need a score of 60% or higher to pass.
- Once you score 9 or more, there's no additional value in making more attempts.
- If you score 9 or more, you have passed. Do not ask the teacher if you have interpreted this correctly. A score of 9 or more means you pass, while anything less means you fail.
Related Study Material
- Schmedtmann, J. (2022, June 1). Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://www.udemy.com/course/advanced-css-and-sass/ . Instructions: Be sure to watch and understand the chapter "How CSS Works: A Look Behind the Scenes". You do not need to see the last video in that chapter "Implementing BEM in the Natours Project"
- Lectures, lessons, resources and links from the first two weeks.
Group Decisions
Ladok: Project
Credits: 3.0 Credits
Percent of Credits: 5%
Grading Schema: U-G
Difficulty: ★☆☆☆☆
Submission Format: Document
Collaboration Mode: Group
Grading Type: Manual
Instructions and Files
Read Immediately
Individual
If you've decided to complete the entire project on your own, you may do so, but you must email the teacher and your assigned group (if you have one) before the end of the week. You should skip the "Group Decisions" and the "Author Statement" altogether. But the rest of the project is exactly the same and not reduced in any way.Group
Meet with the rest of your group immediately after the project start-up. It is crucial that you do so, since you'll need to submit the group's decisions before the deadline at the end of this week. Follow the instructions below in the given order.Instructions
As you come together in your group for the first time, it is essential that you follow the
instructions outlined below. Each step must be completed in the precise order given to ensure that
the process is effective and runs smoothly. Please make sure that everyone participates and that
the instructions are carried out with care and attention to detail. Begin!
- Download the "Group Decisions" document from my Google Drive.
- Read the entire document together. Build a team from the very start by fostering openness to questions, discussion, and collaboration while reading it. These early stages of collaboration are a crucial part of team building. This is where confidence and joy are built.
- List the time of the meeting and the names of all attendees in the appropriate sections of the "Group Decisions" document.
- Watch the entire playlist Project Walkthrough together.
- After having viewed the project walkthrough above you go ahead and read the Collaboration Rules , Project Instructions and the Author Statement Instructions and take not of all the deadlines (Close) in the home page of the course room.
-
Watch the entire complementary instructions in the playlist
Group Decisions
and adhere to the instructions presented within the playlist as well as the written ones, for example:
- Complete the necessary details as requested.
- Elect a group leader who will maintain communication with me.
- Schedule routine weekly meetings for the group.
- Allocate subtask responsibilities, ensuring that each subtask is assigned to only one student, with explicit deadlines (specific date and time) for completion.
- Upon saving the document you'll make sure to rename the file to "project_group_00_decisions.docx", replacing "00" with your actual project group number. Both docx and doc will be allowed as file-formats.
- The group leader is responsible for submitting the document containing the group's decisions on Canvas.
Collaboration Rules
Although one person may primarily be responsible for a task or subtask, all group members are accountable for
the final outcome. When a group member completes their assigned task, it is imperative for the other members
to verify its accuracy and fully understand both its structure and functionality.
Upon completing their task, a group member is expected to assist others until the project is entirely finished.
If a member is not actively contributing, this should be reported to the teacher via email well in advance of
the final week of the project.
It is essential to plan to be available to each other during "Höstlovet." Please note that, despite the absence
or minimal scheduling of classes during this period, studies are expected to continue on with the project.
Officially, students do not observe holidays, except for red days and weekends, which are considered free days.
Standard working hours are to be from 08:00 a.m. to 05:00 p.m. on weekdays. Deviating from these hours is
permissible only if all group members consent. If a student agrees to work beyond these hours, they must
accept the implications such a schedule may have on their personal life. All members in the group must agree
or else the group is required to plan their time within the working hours defined above.
Project
Ladok: Project
Credits: 3.0 Credits
Percent of Credits: 85%
Grading Schema: U-G
Difficulty: ★★★★★
Submission Format: Code
Collaboration Mode: Group
Grading Type: Manual
Instructions and Files
Objective
Create a responsive replica of five structures. The replicas should be based on references that can be switched on
when using Live Server within Visual Studio Code, the same as with the Layout Assignment earlier in the course. Each
structure must adhere to the principles of responsive design, ensuring compatibility across various devices and screen
sizes, ranging from mobile phones to desktops. The designs should utilize modern CSS techniques to achieve a fluid and
adaptive layout. Furthermore, attention to detail is paramount in demonstrating a deep understanding of structure and
styling concepts. Additionally, incorporate best practices for semantic HTML to ensure that the structures are not only
visually appealing but also accessible and SEO-friendly.
Before You Begin
Pay Attention
- Before reading on, it is crucial that you all understand the instructions found on this page are complemented by the playlist Project Walkthrough. If you haven't seen it yet, please do so first. This document provides instructions not given in that playlist and vice versa.
- It is also important for students to recognize that they may not know enough to manage the project initially. Students are expected to learn more in order to successfully complete the project. If you'll follow this link to a composite playlist, you'll find tutorials that will help you understand most or all of the necessary concepts.
- Finally, if you find yourself in need of assistance, you may find it helpful to watch the following Project Assistance playlist. It is there to help you get on track.
Interpretation of the Project Instructions
The project instructions should be interpreted as a checklist of rules; each item must be checked off. Initially, there will be general rules applicable to all project components. This will be followed by specific instructions for each component. Additionally, both the general and component-specific rules will be followed by a number to indicate which of the following three course learning outcomes they correspond to:- [1] use a selection of HTML elements to structure information on a website.
- [2] apply CSS techniques to design responsive web components for a website.
- [3] use common tools and working methods in web development work.
Instructions / Checklists
Rules Applying To All
- Use the "project_group_00" folder included in this download as the foundation for this assignment. This folder already contains all the required files and links. The structure and naming conventions of the folders and files within are also correctly set up. [3]
- For Card, Thumbnail, Detailed List, CTA, Accordion, Form and Subgrid you need to replicate the reference designs available within the project, which you can toggle on and off. [2]
- Adopt a mobile-first design approach, starting with designs for mobile devices and then progressively adapting them for larger screen sizes. [3]
- Ensure that all designs are visually appealing from a width of 392px to 1280px. [2]
- Write all CSS within the student.css file. [3]
- Use the intended layer for each separate component in student.css. [3]
- Only CSS-nesting is allowed when writing your CSS. It's crucial to apply CSS-Nesting correctly throughout. [2]
- No component should contain rulesets that targets anything outside the scope of that component. [3]
- All components developed for this project must be designed for scalability and reusability in other projects. This means they should be as independent as possible from the rest of the code in this current project. Think about naming conventions. [3]
-
Only changes to these files are allowed (Apart from the files mentioned below, no more changes may be made to anything
else in the project): [3]
- account.html (Location: in the root-folder)
- student.css (Location: styles)
- member.js (Location: js)
-
After submission, you may be called upon and required to present the entire project to the teacher. During this
presentation, you will need to justify and explain your coding decisions based on your understanding of: [1] [2] [3]
- The overall process in the rendering tree for HTML and CSS, with examples of how your components are processed and rendered in a browser.
- The CSS cascade and its consideration in your component creation.
- The impact of unit conversion on creating responsive web designs for your components.
- The use of HTML elements within your components.
- Your application of the existing grid system.
- CSS layout techniques employed within your components.
- The integration of your components within the existing CSS architecture.
Additional Rules for Card
- For placing and sizing the Card component on the web page, you must utilize the existing grid system. [3]
- The existing grid system (grid.css) is not allowed to control anything inside the Card component. [3]
- The Card component may not have margins or sizes set on its outermost element. [3]
- All HTML coding must be semantically accurate. Misuse of elements such as for example div, span, section, and article are not acceptable. [1]
- The same classes should be used on all three cards (no card1, card2 or such). [3]
- The premade utility-classes should at a minimum be used to set the background colors on the cards, this may not be done inside the CSS written exclusively for the Card component. [3]
- Use utility-classes and/or the Card component inside student.css to accurately position the icon on the Card. [3]
Additional Rules for Thumbnail
- To display the thumbnails on the page, you need to utilize the member.js file. [3]
- No changes are allowed inside the members.html file. [3]
- For placing and sizing the Thumbnail component on the web page, you must utilize the existing grid system. [3]
- The existing grid system (grid.css) is not allowed to control anything inside the Thumbnail component. [3]
- The Thumbnail component may not have margins or sizes set on its outermost element. [3]
- The hover state demonstrated in the reference for screen widths of 768px and above must be functional for all thumbnails starting from a screen width of 768px. [2]
-
All images used in the thumbnails must be responsive. The lecture on responsive images covered several key
concepts, which should be applied to the images within the thumbnails: [2]
- Bare minimum requirements.
- Aspect ratio considerations.
- Backup solutions.
- Width switching techniques.
- Control over image layout.
- Media conditions.
- Default settings for unmet conditions.
- Art direction and/or file format support.
- Alignment with CSS layout rules (they must match with the existing grid).
The student take notice of the:
- Amount of images per row in the gallery
- Space to the left and right of the gallery
- Gaps in between the images per row in the gallery
- border to the left and right of each image per row
Additional Rules for Accordion, Detailed List and CTA
- These are three separate components even though their nested inside each other and must be separated as such in the student.css file. [3]
- Absolutely no changes are allowed inside the services.html file. [3]
- Only container queries (@container). No media queries (@media) nor any additional use of the classes inside grid.css are allowed to create the responsive behaviour seen in the reference. [2]
Additional Rules for Form
- Only container queries (@container). No media queries (@media) nor any additional use of the classes inside grid.css are allowed to create the responsive behaviour seen in the reference. [2]
- Absolutely no changes are allowed inside the sign_up.html file. [3]
- The help class must have exactly the same declarations as the sr-only class that has alreay been defined in the project. [3]
Additional Rules for Subgrid
- Absolutely no changes are allowed inside the home.html file. [3]
- The Subgrid should be constructed to enable student utilization of the subgrid. The outermost element is designated as "subgrid" and establishes a grid within which the "d" class can activate a subgrid for its children. [2]
-
The d class must have the following declarations but will of course need more: [2]
- grid-template-columns: subgrid;
- grid-template-rows: subgrid;
Submission Criteria
Crucial Adjustment Before Going Any Further
Whether you're using Windows or Mac, you might not be aware that you're not seeing all file extensions.
To ensure you can successfully complete the task, it's important to check that you can see all file
extensions. There are requirements that you name everything strictly according to rules.
One Project, Not Multiple
Make sure the entire groups work exists within this folder. A submission where all five structures
have been separated into different projects would not be acceptable and would not be graded.
Submission Procedure
- The whole group is responsible for the submission and must be gathered and view the entire submission procedure even though only one student will be submitting for the whole group.
- Create a folder called “project_group_00”, replacing "00" with your actual project group number (For example project_group_09 or project_group_16).
-
Copy the following three files from your project and paste them into the empty folder you just
created:
- account.html
- student.css
- members.js
- If you performed the previous step correctly, you'll now have a folder containing only the above-mentioned files and nothing more. These files should be the only ones you've made changes to during the project.
- Select the project folder that by now is named in accordance with instructions. Zip the project. (No other compression formats are acceptable then zip. For example, formats such as rar and 7zip aren't allowed).
- Navigate to the Canvas course room. Proceed to the available Attempt in the Table named "Examination Tasks". Click on that Attempt.
- Create a folder called “project_group_00”, replacing "00" with your actual project group number (For example project_group_09 or project_group_16).
- Upload the zipped project file. Since you've followed the steps under the headline “Crucial Adjustment Before Going Further” you can now see a file that ends in .zip not .zip.zip. The latter is not ok and will not be graded.
- Click Submit
All the above must be done before the deadlines outlined inside the Canvas course room.
Should you upload more than once, Canvas will automatically append a number to the end of your
file name. Please feel assured that this is standard procedure and entirely acceptable.
Author Statement
Ladok: Project
Credits: 3.0 Credits
Percent of Credits: 10%
Grading Schema: U-G
Difficulty: ★☆☆☆☆
Submission Format: Data
Collaboration Mode: Individual
Grading Type: Manual
Instructions and Files
Introduction
Purpose of Author Statement
As part of the project submission process, each group member is required to complete an Author Statement that they'll must submit individually. The purpose of this statement is to provide a clear and honest account of each member's contributions to the project. It ensures transparency and accountability, allowing the examiner to understand who was responsible for which parts of the project and to what extent each member contributed.Private & Confidential
The Author Statement is confidential and should not be shared with anyone except for me. It plays a crucial role in the fair assessment of individual efforts within a group project, helping to recognize and reward the work of all group members accurately.Instructions
Preparing the Document
- Before doing the next step on this list, you should watch the Author Statement recording on YouTube.
- Download the Author Statement template provided under the heading "Files" below.
- Open the file and immediately save it with a new filename that replaces "firstname" and "lastname" with your first name and last name. (Ex. project_author_statement_alexander_karlsson.xlsx)
- In the column "Project Group", enter your project group number (only the number) in as many rows as there are members in your group, starting from cell A5.
- In the column "Submitted By", under the subcolumn "First Name," enter your first name in as many rows as there are members in your group, starting from cell B5.
- In the column "Submitted By", under the subcolumn "Last Name," enter your last name in as many rows as there are members in your group, starting from cell C5.
- In the column "Group Member", under the subcolumn "First Name," enter your first name in cell D5.
- In the column "Group Member", under the subcolumn "Last Name," enter your last name in cell E5.
- In the column "Group Member", under the subcolumn "First Name," enter the first name of each group member, starting from cell D6 and continuing to cell D7, D8, or D9, depending on when you've entered the last group member's name.
- In the column "Group Member", under the subcolumn "Last Name," enter the last name of each group member, starting from cell E6 and continuing to cell E7, E8, or E9, depending on when you've entered the last group member's name.
- Verify the spelling of each group member's first and last names with the names listed in Canvas.
Mindset before Estimation
The next step is to estimate the amount of work you and each group member individually contributed to each subtask. Before doing so, be sure to read the following bullet points:- Ensure that your estimates are fair based on your own experience. Your estimates should not reflect grudges or disagreements. The focus should be on actual contributions to each subtask, nothing else.
- Your estimates of contributions should not be discussed and agreed upon collectively in the group. The final Author Statement should provide a clear and precise representation of each member's contributions through the lens of each individual, not the group.
- The Author Statement should be regarded as confidential and may not be shared with anyone except the teachers. It plays a crucial role in the fair assessment of individual efforts within a group project, helping to recognize and reward the work of all group members accurately.
Clear Connection to Group Decisions
When completing the Group Decisions document, routines and deadlines for each subtask were established. This enabled all members of the project group to monitor each other's progress. These routines and deadlines will also be reflected in the Author Statement, ensuring accountability and transparency. This can be seen through the lens of your estimations. You may alse have noticed that each task is broken down into a series of numbered subtasks. These same numbers are also used in the Author Statement for clarity and consistency. So to identify which each number corresponds to you must open the Group Decisions document.How to Estimate
- Use a scale where 1 represents 100% (you or a group member did all the work for that subtask) and 0 represents 0% (you or a group member did none of the work for that subtask). Any number in between 1 and 0 is perfectly acceptable, reflecting the collaborative nature of the project. When typing values between 1 and 0, consider if you have a Swedish version of Excel or not. This is important because one uses a comma (,) as a decimal separator and the other uses a dot (.) as a decimal separator. Use whichever works.
- An empty cell does not mean the same as zero. It will be regarded as a failed submission if cells are left empty when there is a group member representing that same row.
- On the 10th row, you'll initially see a series of zeros. These are calculated totals of each subtask. No subtask should ever have a contribution higher than 100%. In this case, 1 represents a 100% contribution. It should never be less than 100% unless absolutely no effort was made to complete the task. Therefore, when you estimate, the 0 in the 10th row of that subtask should always be 1 if any effort was made to complete the subtask. It can never be higher than 1 and should only ever be 0 if no effort was made to complete it. Failure to comply with these rules will be regarded as a failed submission.
- Only when all subtasks have a value between 0 and 1 for each student, and all subtasks that anyone has contributed to have a 1 in their totals on the 10th row, are you ready to submit.
More on Grading
Grades may take up to 15 working days to be issued from the submission deadline, rather than from
the time of submission.
If Canvas notifies a student of comments on their submission but they cannot view them, it is because
the teacher has graded the submission but will post all grades after completing the grading for all
students.
Early Submissions
If a student submits an attempt well before its deadline, the teacher may grade it earlier. Once graded,
that attempt is counted as an attempt, and additional submissions into that attempt folder will not be
graded. This means the student loses potential time they could have used to improve their chances of
achieving a higher grade.
Students will know if their submission has been graded, as they will either receive a grade or be
notified that it has been graded. In the latter case, students may not see the grade immediately if the
teacher has chosen to publish the results later for all students.
Late Submissions
If a student, group, or pair is late by one second or more and cannot submit their work for the
intended attempt, the following rules apply:
- A missed or late attempt is regarded as a used attempt and will not be graded or considered, even if it is late by as little as one second.
- The submission is regarded as an attempt for the folder it is submitted to, as long as that attempt folder is available and the attempt has not been graded. For example, if students try to submit to Attempt 1 but are late and the folder is no longer available, they may submit to the Attempt 2 folder and notify the teacher. The teacher will refer to this text: "The submission can no longer be counted as Attempt 1, even though it is just a little late." The student should then submit their work to Attempt 2 before its deadline.
Activities & Resources
The "Activities" column specifies the activities expected to be completed during the week (excluding examination
tasks; for those, see the table titled Examination
Tasks). The lists in the Activities column are numbered to indicate the order in which the content should
be undertaken, ensuring that students are adequately prepared and in sync with the course schedule. The calendar
icon 📅 indicates scheduled live events, while the red circle 🔴 signifies content that has been
recorded and is available for viewing but is not scheduled.
Resource links lead to a Google Drive folder containing files and links pertinent to the week's activities.
It is important to note that no submissions are detailed in the table below; these are instead listed in the
table titled Examination Tasks provided above. This crucial point bears repeating to ensure it is not overlooked.
Week | Activities | Resources |
---|---|---|
4 |
| |
5 |
| |
6 | ||
7 |
| |
8 | ||
9 |
| |
10 |
| |
11 |
| |
12 |
| |
13 |
|
More on Activities
Activity | Description |
---|---|
Lecture (Föreläsning) | This is likely the activity most students are familiar with. The teacher speaks, and the students take notes. Students may also follow along with the teacher's actions, although it is not required. Lectures may conclude with a suggestion for students to practice using provided examples. |
Lesson (Lektion) | This activity is similar to a lecture in that the teacher speaks, but the focus is more on the teacher showing and the students following along by doing the same as the teacher. |
Exercise (Övning) | In this activity, the teacher may initially introduce an exercise for about 15 minutes and then leave the students to complete the exercise while walking around, assisting the students, and answering questions. From time to time, the teacher will pause the exercise if an answer to a question is particularly helpful for all attending students. Then the exercise continues. The goal is not to complete the exercise immediately but to guide students in the right direction for independent continuation. |
Q&A (Frågestund) | This activity focuses on addressing student questions and clarifying requirements. |
POLICIES
Collaboration Policies
Collaboration is a key component of this course. You will participate in group and pair work to
foster teamwork and collective problem-solving skills. Detailed rules on how to collaborate with
your peers are provided below:
- Work distribution among students in a group or pair must be equitable.
- If any member feels they are falling behind despite active participation, the group must pause and ensure that this individual attains the same level of understanding as the rest.
- No single individual should dominate or carry out the majority of the work alone.
- No one should rely on others to do their share of the work.
Study Policies
The following study policies are established to guide students in their academic journey throughout
this course. These policies are designed to ensure that students maintain a high level of personal
responsibility and preparedness, both individually and within group or pair settings:
- Significant portions of this course demand that students take personal responsibility for their learning. The same goes when they are part of a group or pair.
- Students are often expected to have completed readings and/or lessons before scheduled instructional sessions. The same goes when they are part of a group or pair.
Material Importance Policy
Some students make incorrect assumptions regarding the course material. Therefore, the text below is
here to clarify:
- Regardless of whether the course materials/literature are hosted within Canvas or linked from an external site outside of Canvas, both sources should be considered equally essential for the successful completion of the course.
Conflicting Information Policy
If there is conflicting information, follow this priority order:
- Course Room Announcements
- TimeEdit
- Course Handbook in the Course Room
AI USE POLICIES
Purpose of AI Tools in Learning
AI tools can enhance your learning when used responsibly:
- If you're confused about a topic, AI can provide alternative explanations or examples.
- AI can help you brainstorm ideas for projects or assignments, boosting creativity.
- Use AI for coding practice by seeking exercises or challenges to enhance your skills.
It's important to approach AI as a supplement to your learning, not a replacement for lectures, readings,
or hands-on practice. While AI can assist with concept clarification and provide creative inspiration, it
should not be used as a shortcut to bypass core learning materials. Engaging with the readings, lectures,
and hands-on tasks is essential for building a deep understanding and mastering the foundational skills
required for success.
Why Misusing AI is Counterproductive
Misusing AI tools can have negative consequences:
- Relying on AI prevents you from developing a deep understanding of responsive web design concepts, which is essential for your projects and future career.
- You may struggle with practical applications during the course and in real-world scenarios if you haven't built a solid foundation.
- Without firsthand experience, you'll find it challenging to debug or optimize your code effectively.
- Misrepresenting AI-generated work as your own violates academic integrity policies and can have serious consequences.
Maximizing the Benefits of AI
Here are ways to make the most of AI tools to enhance your learning:
- Use AI to explore multiple solutions to a problem you've attempted, comparing them to your approach.
- After learning a concept, explain it to the AI and see if it can pose challenging questions back to you.
- Use AI to learn about the latest trends and updates in responsive web design, beyond what's covered in the course.
Guidelines and Examples
Guidelines for Appropriate Use
The following guidelines will help you ensure the responsible use of AI in your learning process:
- Supplement, Don't Replace
- Do: Use AI to clarify concepts after you've attended lectures and done the readings.
- Don't: Skip lectures or readings and rely solely on AI summaries.
- Active Learning
- Do: Attempt assignments on your own before seeking AI assistance.
- Don't: Use AI to complete assignments without making an effort to understand them.
- Original Work
- Do: Incorporate AI suggestions into your work in your own words and with proper understanding.
- Don't: Copy and paste AI-generated content directly into your assignments.
- Attribution
- Do: Acknowledge significant AI contributions in your projects.
- Don't: Present AI-generated ideas as entirely your own without any modification or understanding.
Examples to Illustrate Use
To clarify how to properly use AI tools, here are some examples:
- Appropriate Use
- Scenario 1: You're stuck on making a flexbox layout responsive. After trying on your own, you ask the AI for tips on using media queries with flexbox. You apply this knowledge to fix your code, ensuring you understand each step.
- Scenario 2: You need inspiration for a website design. You use AI to generate ideas for color schemes or layouts and then create your own unique design based on that inspiration.
- Inappropriate Use
- Scenario 1: Completing Assignments Without Effort. You input the assignment prompt into the AI and submit the generated code without trying to understand or modify it.
- Scenario 2: Bypassing Learning Materials. Instead of reading the course materials, you ask the AI for summaries and rely solely on those for exams and assignments.
CONTACT
IMPORTANT: To ensure your messages are responded to, please do not use the
Canvas mail function or any personal email addresses for communication. It is crucial that you use only the
official email address provided to you upon your registration at Dalarna University. Messages sent through any
other means will not be acknowledged.
The Support Café over Zoom
(open weekdays 8.00 a.m. to 4.00 p.m.) assists with questions related to the Dalarna University's digital learning environment like
Canvas, Zoom, Play Portal and Sunet Survey.
Please, contact the staff through the email addresses provided below:
Name | Role | |
---|---|---|
Alexander Karlsson | alk@du.se | Teacher, Examiner and Coordinator |
Yurong Zhu | yzh@du.se | Teacher |
Mustafa Al-Hammadi | mum@du.se | Teacher |