Scribd Logo
Upload

Welcome to Scribd!

  • Instructor Syllabus Summary HTML CSS 2018.docx 2 1 1 1

    Uploaded by

    james russell west brook
    16 views4 pages

    Original Title

    Instructor Syllabus Summary HTML CSS 2018.Docx 2 1 1 1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    16 views4 pages

    Instructor Syllabus Summary HTML CSS 2018.docx 2 1 1 1

    Uploaded by

    james russell west brook

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 4

    2018 Beginner Course Syllabus - HTML, CSS & JavaScript (Summary)

    The course ​aims to provide a basic overview of the technologies used, along with the tools and
    resources to discover more.
    The ​focus of this course is learning the basics of how and why things work and to provide the
    basis to build upon in future courses. We will ​not be able to cover everything in great depth or
    comprehensive detail.
    Sessions will be as ​hands-on and practical ​as possible. The notes provided will give you and the
    students a good resource to read through and base your lessons on, but slides will be provided
    to you which you can use to conduct your classes - try to be as interactive as possible.
    The course syllabus is laid out below.

    Pre-course Preparation:​ Welcome


    ● Welcome to web dev & Code First: Girls community
    ● Basic intro to web languages with mention of HTML, CSS, JS (jQuery) & how they are
    related (i.e. web pages & web servers)
    ○ Not expected to understand the syntax, but we will demonstrate what each
    language does to a web page
    ● Introduction to the tech community, resources & how to study, developer news
    ○ open-source, collaboration (GitHub), stack overflow, w3 schools for online
    references
    ○ How can I quickly get help? how can I meet other developers?
    ○ What can these skills prepare me for? where do I go after this course?
    ● To Do 1: Create a github account, sign up for GitHub Student Developer pack
    ● To Do 2: installing software: Chrome, GitHub Desktop Client
    (​https://desktop.github.com/​), Atom / Sublime Text
    ● To Do 3: GA Dash 1

    Session 1: ​Getting going + HTML


    ● Software installation troubleshooting (10 minutes)
    ● Intro to webpages & web servers (10-15 mins)
    ● Creating a HTML page (15 mins)
    ● HTML syntax - use a demo to talk through it (10-15 mins)

    Copyright 2018 Entrepreneur First CIC (T/A Code First Girls) - ​Not to be circulated without prior consent from Code First: Girls
    ● Homework: Internet video, GA Dash 2, create your own website locally, read something
    on CSS

    Session 2: ​CSS
    ● mention using it in <head> tags, but get them to use CSS in a separate file.
    ● CSS, ​Selectors and Attributes, ​Stylesheets
    ● Competition: Explain competition criteria, ask everyone to form teams by week 3 and
    brainstorm ideas - collaborate on Fb/Slack.
    ● Homework: GA Dash 3, Why do software developers collaborate, and what tools are
    available for them to do so easily?

    Session 3:​ ​User Experience & the course competition (UX)


    ● What is UX? What is it not?
    ● Who is responsible for UX?
    ● Why does UX matter?
    ● UX and analytics
    ● Course competition arrangements and criteria
    ● Competition: Spend 10 mins at the end of the session ask the participants to get into
    their teams. Find teams for those who do not yet have a team. Write down names of
    teams and ideas. Explain competition criteria again to students (outlined below)
    ● Homework: Start working on your websites!

    Session 4: GitHub & Version Control, Git


    How to use GitHub - what is version control? & Q&A (basic concepts, commits, pulls, forks, etc)
    (10 mins)
    ● Version control and using GitHub
    ● Create your group repository
    ● Publishing on GitHub Pages (​https://pages.github.com/​)
    ● Conflict scenario / resolving conflicts
    ● Homework: Create GitHub repository, work on websites in teams
     
    Session 5: ​ ​Bootstrap
    ● What’s hard about CSS?
    ● Using Twitter Bootstrap to improve presentation of webpages
    ● Bootstrap layout
    ● More Bootstrap (eg. typography, blockquotes, badges and buttons)
    ● Modifying Bootstrap
    ● Homework: make your website responsive

    Copyright 2018 Entrepreneur First CIC (T/A Code First Girls) - ​Not to be circulated without prior consent from Code First: Girls
    Session 6​:​ ​JavaScript & jQuery
    ● Intro to JS - how JS came about
    ● Getting started with JS and jQuery
    ● Getting jQuery into your website
    ● Using jQuery to manipulate CSS

    Session 7​:​ ​Optional extra material / Working on websites in class


    ● 1 hour spent on optional extra materials, eg Google Analytics, Google Forms, domain
    names for GitHub Pages
    ● 1 hour work on group projects for the CF:G Competition in class with help from
    instructors

    Session 8​:​ ​Course Competition:​ ​Presenting final projects


    ● Spend the first 30 minutes finalising project websites.
    ● Spend at least 1 hour on group presentations (5-10 mins/group).
    ● Instructors to choose a winner and announce it at the end of the session.

    Competition Guidelines
    The CF:G competition is a chance for students to put into practice the skills learnt on the
    course. Students can work individually or in groups of 2-3 to create a landing page for a
    website. Aim to form teams by Week 3.

    The criteria for the competition are here:


    ● A visually appealing design - good use of CSS and HTML elements, Twitter Bootstrap
    ● Good formatting
    ○ Code split into the appropriate files
    ○ Files indented properly
    ● A live website (Github page, Heroku or own domain)
    ● Extras e.g:
    ○ A contact form (for example name and email)
    ○ Social buttons
    ○ Widgets
    ○ As many different HTML elements you can manage
    Interactive elements (like forms) on the website don’t need to be functional, but should
    be present if they need to be for the visual aspect of the design.
    ● (optional) Good organisation
    ○ Version control using GitHub
    ○ Sensible commit messages

    Copyright 2018 Entrepreneur First CIC (T/A Code First Girls) - ​Not to be circulated without prior consent from Code First: Girls
    Some of the winning entries from last term's competition can be found ​here​.
    There'll be prizes of Amazon vouchers for the winning team!

    Copyright 2018 Entrepreneur First CIC (T/A Code First Girls) - ​Not to be circulated without prior consent from Code First: Girls

    You might also like