Website Development Bootcamp


Introduction

It is a fully practical based Coding Bootcamp on Website Development where you will learn how to build a professional website.

Check the sample websites you will be able to build after completing this bootcamp.

Your Instructor

The instructor for this bootcamp is Budh Ram Gurung. He is a Teacher, educator, an avid Open Source Contributor, Full Stack Engineer, and a researcher.

He preferred to be called as BRG.

Although, having 9+ years of IT Industry experience, his passion is teaching and hence he built this website (BRG Trainings) to share his knowledge. During his professional tenure, he has worked in many different roles and gained wide range of experience from Full Stack Web Development, DevOps, Software Development, QA Automation, Digital Marketing and Team Management. Visit his personal website to know more.

What are you going to learn

After completion of this bootcamp, you should have knowledge on following things:

  • Good practical knowledge of HTML
  • Good practical knowledge of CSS
  • Good practical knowledge of JavaScript
  • Good practical knowledge of jQuery
  • Good practical knowledge of Bootstrap 4
  • Designing UI elements, like buttons, menus, widgets and others
  • Knowledge of building Website
  • Knowledge of making Website Responsive

Bonus Knowledge

  • Developer Profile and Website
  • Experience with Git and GitHub
  • Familiar with Project building process
  • Familiar with Website Deployment process
  • Knowledge of browser Developer Tools
  • Interview related questions
  • Industry Insights

Target Job Positions

After completion of this bootcamp, you should have enough technical knowledge to work in following positions:

  • Junior Web Developer
  • Junior UI Developer
  • Junior Front End Engineer
  • Freelance Theme Engineer
  • Freelance Web Developer

Detailed Curriculum

This coding bootcamp is structured into 5 phases. Following are the key phases in this bootcamp.

Phase Goal Session(s)
1 Preparation 1
2 Foundations 6
3 Bootstrap 4 and UI Elements 2
4 Build a Website from Scratch 2
5 Projects Building 1
1 session = (1.5 - 3 Hrs), 2 sessions per week, 6 weeks coaching, 2 weeks support, Total = 2 months.

Phase 1 - Preparation

This phase helps prepare students mentally and set up the development environment as well.

It includes:

  • Introduction of Instructor and Students
  • Brief of how the bootcamp will work
  • Introduction to the communication platforms
  • Web Introduction - how the web works
  • Shell or Terminal basic commands
  • Introduction the necessary tools required for this bootcamp
  • Git/GitHub workflow and basic commands
  • Software Development workflow in an IT company

Phase 2 - Foundations

This phase helps prepare students with fundamental concepts needed for the website development.

  • HTML Basics
  • Document Heading and Body
  • Block vs Inline elements
  • Tags that interact with Text
  • Links - standard, with image, new tab
  • Container tags: article, section and div
  • Page structure tags: nav, aside, header, main, footer
  • Form and its tags:
    • Input boxes: text, email, password, numbers, hidden, submit
    • Date time, color picker, range picker, telephone, URL
    • Text areas
    • Radio buttons (one option from list of options)
    • Check boxes (zero or more options)
    • Select boxes (one option from drop-down menu)
    • File uploads
    • Form validations
  • List: ul, ol, li
  • Tables
    • Rows, column headers, table content
    • Span columns and rows, rows heading
    • thead, tbody, tfoot
  • Multimedia tags: audio and video
  • iframe tag: src, srcdoc, sandbox, referrerpolicy
  • Accessibility: writing HTML for people with disabilities
  • Adding meta tags related to SEO

NOTE: More might be included as per need during class.

  • Introduction of CSS
  • Cascade Concepts: specificity, importance, inheritance
  • Viewport and Layout
  • Importing CSS
  • Selectors, attribute selectors
  • Pseudo Classes
  • Pseudo Elements
  • Colors: named colors, hex notation, HSL, HSLa, rgb, rgba
  • Units: px, em, rem, real-world units, relative units, viewport units, calc()
  • Backgrounds: color, image, url, clip, position, repeat, attachment etc
  • Custom properties: CSS Variable, variables scope
  • Fonts: family, weight, style, size
  • Custom Font: loading custom fonts using @font-face, font formats
  • Typography: text-transform, text-decoration, text-align, line-height etc
  • Border: style, color, width, border-radius, use image as border
  • Margin, Padding, Box-sizing
  • Display: block, inline, inline-block, none, grid, flex etc
  • Positioning: static, relative, absolute, fixed, sticky
  • Floating: left, right, none and clearing: left, right, none, both
  • Z-index
  • CSS Grid: display, grid-column, grid-row, grid-gap, grid-content
  • CSS Flexbox: flex-direction, justify-content, align-items, flex-wrap, flex-flow
  • CSS for table
  • Centering: horizontal, vertical, text centering, blocks centering
  • Responsive Design: media types and media queries
  • CSS Filters
  • Transforms: 2D transforms, 3D transforms
  • Transitions: liner, ease, ease-in, eas-out, ease-in-out
  • CSS Animations: properties you can animate
  • Normalizing CSS
  • CSS Error Handling
  • Vendor Prefixes: -webkit-, -moz-, -ms-, -o-

NOTE: More might be included as per need during class.

  • Introduction to JavaScript
  • JavaScript Basics: variables, data types, expressions
  • Variable scopes
  • Operators
  • Conditionals
  • Arrays: literal syntax, access element, methods
  • Loops: while, for, for..of
  • Functions: declaration, arrow function, function expression
  • Objects: literal syntax, new Object(), Object.create()
  • Object properties and methods
  • Classes
  • Asynchronous Programming and Callbacks, Promises
  • Document Object Model (HTML DOM)
    • document object and DOM Methods
    • Finding and accessing DOM elements
    • Changing the HTML element content
    • Changing the DOM HTML and CSS
    • DOM Events
    • EventListener and adding event handler
    • DOM Navigation
    • DOM Nodes: create element, insert element, remove and replace element
    • DOM Collection Object and NodeList object
  • Browser Object Model (HTML BOM)
    • The window object
    • The window screen
    • The window location
    • The window history
    • The window navigator
  • Timing Events: setTimeout(), setInterval(), clearTimeout(), clearInterval()
  • JavaScript Cookies

NOTE: More might be included as per need during class.

  • Introduction to jQuery
  • Finding elements: by id, tag name, class name and css selectors
  • Create, insert, remove and replace nodes
  • $(document).ready(), shorthand syntax, $(window).on("load")
  • jQuery and HTML Elements
  • jQuery and CSS
  • jQuery and DOM manipulations

NOTE: More might be included as per need during class.

Phase 3 - Bootstrap 4 and UI Elements

In this phase, students will learn about the popular CSS framework Bootstrap 4 and building UI elements.

It includes:

  • Bootstrap 4 Introduction
  • Adding and using Bootstrap 4 in HTML
  • Understanding Layout and Responsiveness: grid, media object
  • Content: Typography, Code, Images, Tables, Figures
  • Components: alerts, badges, buttons, card, carousel, collapse, dropdown, forms, input groups, jumbotron, modal, navs, navbar, scrollspy
  • Utilities: border, colors, display, embed, flex, float, position, sizing, shadows, margin, padding, text, vertical-align, visibility
  • Adding Icons

Phase 4 - Build a Website from Scratch

In this phase, students will learn how to build a website from scratch from creating mockup to a complete website.

It includes:

  • Design the mockup of the website
  • Building Navigation bar
  • Banner, Header or Hero section
  • About Section
  • Gallery Section
  • Blogs Section
  • Contact Section
  • Footer section
  • Designing About, Gallery, Blogs and contact pages
  • Make the Website Responsive
  • Working with browser developer Tools

Phase 5 - Projects Building

In this phase, students will try to build different type of websites from different domain.

This phase require you to use all the knowledge you acquired in previous phases and try to build the projects. The instructor will give initial guidelines and will be monitoring the project building process and review and help as per needed.


Students will build two or more from following different type of Websites:

  • A School website
  • A NGO Website
  • An e-commerce Website
  • An Agency Website
  • A Restaurant Website
  • A Photographer Website
  • A Village website
  • Web Developer Portfolio Website

What's next from here

After completion of this bootcamp, you can try following options based on your interests:

  • Build more projects and start your own Website Development startup
  • Build website templates or themes and sale
  • Go on to become Freelancer Website Designer and Developer
  • Join the next advanced Web Application Development Bootcamp on Ruby on Rails to advance on to the Full Stack Web Development path
  • Explore Front End world by learning UI frameworks like ReactJS, VueJS, NodeJs, etc
  • Go on to learn NodeJS and check MERN Stack
Remember! Learning is a continuous process. This bootcamp is just the beginning. Good luck!

Bootcamp Key Details

Format Online Interactive
Prerequisites Enthusiasm to learn. 1 to 3 hours of dedication post each session.
Fees Rs 7,000 5000 /- only
Duration 2 Months, 6 Weeks Coaching, 2 Weeks Support, 2 Sessions per week, 1.5 to 3 Hrs per session
Batch Size 15 students
Workflow Theory → Practical → Assignment → Feedback
Other Pair programming to resolve issues
Key Features Practical. Feedback Oriented. Result Oriented.
Support Two weeks Slack channel support to solve queries and other issues
Go to top