Mangcoding

icon chat
Mulida Asti - Wednesday, 26 February 2025 - 1 years ago

Raw Material: “Basic Web Programming for Beginners”

single image
Photo By Jackson Sophat On Unsplash

Below is the raw material for “Basic Web Programming for Beginners”, which I will write on this blog. Hopefully, it will be useful for fellow developers who are just starting to learn.

Note: This article is not structured. I have created and adjusted it based on the teaching materials I will deliver in class. I apologize for any missing topics. Thank you! (Available materials are marked with an underlined hyperlink).

Introduction to HTML

  • Definition of HTML
  • Development of HTML
  • Browsers
  • Editors
  • Learning Preparation
  • Introduction to Git

  • Basics of Git
  • Using Sublime
  • Basic HTML

  • Elements/Tags
  • Attributes
  • Headings
  • Paragraphs
  • Text Formatting
  • Lists
  • Hyperlinks
  • Images
  • Case Study
  • CSS

  • Definition of CSS
  • Inline CSS
  • Internal CSS
  • External CSS
  • CSS Selectors using ID, Class, and Tag
  • Advanced CSS Selectors
  • Advanced CSS Selectors Part 2
  • Inline & Block Elements
  • Differences between Block and Inline Elements in HTML
  • CSS Box Model
  • Case Study
  • Tables

  • Understanding Rows and Columns
  • Merging Cells
  • Applying CSS in Tables
  • Case Study
  • Forms

  • Definition of Forms
  • Form Elements
  • Form Attributes
  • Applying CSS in Forms
  • Case Study: Creating a Facebook Registration Page
  • Media

  • Audio/Video
  • Canvas
  • SVG
  • Case Study
  • Layouting

  • Introduction to Layout and Grid
  • HTML Tables
  • CSS Float Property
  • Case Study 1
  • CSS Frameworks
  • CSS Flexbox
  • Case Study 2
  • Responsive CSS

  • Understanding Responsive Web Design
  • Viewport and Grid View
  • Media Queries
  • Case Study
  • Template Creation

  • Introduction to Software Design
  • Design & Slicing
  • Writing HTML Code
  • Writing CSS Code
  • Responsive CSS
  • Publishing to Git Pages
  • CSS Tricks

  • Dropdown Menu
  • Using Google Fonts
  • Creating a Full-Width Background
  • Image Sprites
  • That is the RAW Material that Mangcoding can share. Hopefully, this article is useful and provides new knowledge for you. If you have any constructive criticism or suggestions, feel free to comment or send them via email and Mangcoding’s social media.

    Link Copied to Clipboard