What To Expect
This course is designed to be an introductory level course to frontend development with HTML, CSS, and JavaScript. The course covers how to create an HTML page using basic elements like div, h1, and p, the importance of semantic coding (using tags like and<header> and <title>) and how to use CSS to style the HTML document with colors, layouts, etc. In addition you will learn how you can use Javascript to make web pages dynamic through features like animation or user interaction. We will also cover frameworks, best practices, third part tools and collaboration.
Course objectives
• Breaking big problems down into small manageable task
• Helping you navigate the vast amount of FREE resources available to you.
• Helping you to understand the various paths and careers within software development.
• Helping you to understand how code translates into a usable application.
COURSE FORMAT
This course is offered in a virtual, synchronous platform with Teachable serving as the learning management system. Class sessions are held three times a week at night, which each session lasting a duration of three (3) hours. Regular attendance is required, and students are expected to be present in the learning environment by the scheduled starting time of the class. Additional course requirements and grading standards are communicated by the course instructor. This course is meant to be taught in a way that encourages students to be an active learner and active source of knowledge for other classmates, two skills that are absolutely essential to succeed in frontend web development.
The course instructional methodology is as follows :
• Demonstration
• Hands-on experience
• Assignments
• Projects
• Exams
WEEKLY COURSE TOPICS
Week 1 – Web Basic
• DNS Names and IP Addresses
• The Evolution of Web Development
• Introducing Codepen
• Languages of the Internet (HTML,
CSS, Javascript)
• How HTML and CSS work together
(Skeleton and Skin)
• The role of Javascript
• Using Google Chrome Like a Pro
• File Extensions and Directory
Structure
• Coding Challenge 1: Learning More
By Emulating pt 2
Week 2 – HTML
• Environment Setup
• HTML Structure
• Heading Tags
• Common Tags
Week 3 – Hyperlinks and Tags
• Clean Code and Comments
• Preformatted Text
• Hyperlinks
• Tags, Elements and Attributes
• Creating A Multipage Web Portfolio
Week 4 – HTML Markup and Images
• Character Code
• Markup (Structure and Styling of
characters)
• Images
Weeks 5 & 6 – HTML List, Forms and
Tables
• List
• Tables
• Forms
Week 7 – Intro to CSS
• Grouping
• CSS Selection
• Colors
• Borders and Box Model
• The Box Model
Week 8 – More CSS
• Text Properties
• Text Sizing and Positioning
• Tables
• Coding Challenge 3: Fixed Nav Bar
• Floats
• Coding Challenge 2: Your Own
Product Cards!
Weeks 9 & 10 – Advanced CSS
• Advanced CSS Part 1
• Advanced CSS Part 2
Week 11 – Javascript
• Intro to Javascript
• Basic Datatypes
• Variables
• Values
Week 12 – Javascript Continued
• Operators
• Pop-Ups
• Objects
• Arrays
• Control Flow Pt 1
Week 13 – Javascript Continued
• Control Flow Pt 2
• Functions
Weeks 14 & 15 – Javascript DOM
• Document Object Model
• Dynamic Webpages
Weeks 16 & 17: Version Control, Frameworks, Packages and Tools
• Github
• Frameworks
• Third Party Libraries
• Project Management with Trello
• Finding Inspiration with Dribbble
• Rapid – Low Resolution Mock Ups with
Balsamiq
• High Resolution Mocks Ups with
Figma
Week 18 – HTML and CSS EXTRAS
• Customizing VSCode and adding
Extensions
• The Black.Codes and Slack
• Even More HTML Elements
• Our First HTML Document!
• Introducing CSS: How the Web
Becomes Beautiful
• Centering Things
• Beautiful Web Typography
• BEM: Structuring Your CSS