Web Design & Development (Fall 2022)

Intro to The Course

This course is about all elements needed to successfully design and development of web pages and websites. From creating file and folder to commonly used Internet coding languages, students will gain an overall understanding of web development including tools like VS Code, Git and Github.

• Total Classes: 08 - 10
• Time Slots: Saturday ( 3.20-5.20 ) & Wednesday ( 11.45 - 2.10 )
• Room Number: 723 (Practice Lab 7)

Instructors

• Shahidul Alam @shz-code

Facebook ID: https://www.facebook.com/fb.shahidul.alam

Contact Number: 01766409973

---

• Samiul Alom @SamiulAlom

Facebook ID: https://www.facebook.com/profile.php?id=100081681342690

Contact Number: 01641621311

Support & Materials

Join our

• Messenger Group.
• Facebook Group.
• Google Classroom code tnrviu6.

Course Outcome

• Fundamentals of web design and how website works.
• Ability to make cool websites with modern approach and best practices.
• Ability to use Git and Github and also other useful tools.
• Get known to your community.
• Ability to read documentation.

Tools

• Primary Code Editor VS Code
• Version Control System Git & GitHub
• File Sharing Platform File.IO
• CSS Framework Bootstrap 5.2

Course Outline

• Orientation session

Class 1:

• Orientation session.
• Idea about - web designing, web development.
• Basic ideas on - domain, hosting, programming language, local server.
• Discuss on how the course will be conducted.
  • Quiz
  • Practices
  • Projects
• Discuss on what we will be learning in course
  • HTML
  • CSS
  • Bootstrap
  • JavaScript (Basics)
• Learning to use the tools of web development
  • Code editor (vs code)
  • Git and GitHub (intro)
• Fundamentals of web design & development
  • HTML
  • CSS
  • JavaScript
  • HTML page basic structure
  • Comments, Starting HTML Page, Head, Body
• Basic HTML tags
  • Header (h1-h6)
  • Paragraph (p)
  • Bold (b)
  • Italic (i)
  • Subscript (sub)
  • Superscript (sup)
  • Underline (u)
  • Details & summary (details, summary)
  • Address (address)
  • Quotation, cite (blockquote, cite)
  • Abbreviation (abbr)
  • Span (span)
  • Div (div)
• Quiz 1 (Online)

Class 2:

• Tag Attributes
  • Style attribute
• Basic HTML tags
  • Image (img)
    • Src
    • Alt
    • Height
    • Width
  • Anchor (a)
    • Mail Anchor
    • Call Anchor
    • Target
  • Header (header)
  • Footer (footer)
  • Main (main)
  • Aside (aside)
  • Navigation tag (nav)
• Style tag (style)
• Script tag (script)
• File Routing (a,img,style,script)
• Font tag (font)
• HTML Entities, Symbol
• List tag (ul, ol ,li)
• iFrame
• Audio
• Table
  • Tr
  • Td
  • Th
  • Thead
  • Tbody
  • Colspan
  • Rowspan
• Quiz 2 (Online)

Class 3:

• HTML grouping
• HTML form
  • Input
  • Type
  • Name
  • Placeholder
  • Value
  • Button
    • Type
• How to and Where to CSS code, Comments in CSS, Converting Style Attribute to CSS
• Class and ID
• Background Image, Background Repeat, Background Position, Background Color
• Padding, Margin
• Border in CSS, Box Shadow, Opacity
• Designing Button using CSS
• Flex-Box
• Project 1 Setup
• Quiz 3 (Online)

Class 4:

• Project 1
• Responsive web design & developer tools intro
• Quiz 4 (Online)

Class 5:

• Make project 1 responsive & practice websites.
• Quiz 5 (Online)

Class 6:

• CSS grid property.
• Project 2
• Quiz 6 (Online)

Class 7:

• Bootstrap Crash Class
• Bootstrap Project 3
• Quiz 7 (Online)

Class 8:

• Writing JavaScript Code, Comments, Simple Variable, Variable Types
• JS Operators, Simple Function, Parameter, Arguments
• If Else Statement, Handling Multiple Condition, Conditional Operators
• Get Element by ID, Get Element by Tag Name, Get Element by Class
• Switch Case, For Loop, EVAL Function
• Quiz 8 (Online)

Bonus Topics:

• Git & GitHub Basics using VS Code (What and How, setting up profile, Making Repository, Staging, Commit, GitHub Pages).
• Chrome Developer Tools.
• VS code customization.