The Weekend Project ×

Home Course Course Registration About Us

The Weekend Project

Profile

WEB DEVELOPMENT

Fundamentals - I

This internship is designed for college students to learn the fundamentals of web development. The program focuses on HTM L, CSS, JavaScript, Bootstrap, PH P basics,image optimization, and deploying a complete static website to a live server.

Syllabus

Details

  • 48

    Days

  • 1

    Level

  • 8

    Modules

  • 3

    Live Project

  • Understand the structure of an HTML document (doctype, head, body).
  • Learn and use HTML5 semantic tags like <header>, <footer>, <article>, <section>, <nav>.
  • Understand the purpose of forms and how to create them using <form>, <input>, <textarea>, <select>, <button>.
  • Learn HTML attributes such as id, class, name, placeholder, required, and type.
  • Understand how to structure content for accessibility (labels, fieldsets, legends).
  • Learn how to link CSS and JavaScript to HTML documents.
  • Practice creating simple webpages with headings, paragraphs, lists, images, links, and tables.
  • Understand what CSS is and how it is applied to HTML (inline, internal, external).
  • Learn about CSS selectors, properties, and values to style elements.
  • Understand the Box Model: content, padding, border, and margin.
  • Learn to control element dimensions, spacing, and alignment using width, height, padding, margin, and border.
  • Apply typography styles: font-family, font-size, font-weight, line-height, and text-align.
  • Use colors, backgrounds, and borders to improve page design.
  • Learn basic positioning: static, relative, absolute, fixed, and z-index.
  • Understand the basics of responsive web design and mobile-first principles.
  • Learn to use CSS Flexbox to create flexible, responsive layouts.
  • Learn CSS Grid to design complex, two-dimensional layouts easily.
  • Apply media queries to make your web pages look great on different screen sizes.
  • Use icons and icon fonts (like Font Awesome) to enhance user interfaces.
  • Learn to incorporate custom web fonts and control typography for better design.
  • Combine Flexbox, Grid, and responsive techniques for modern, adaptable layouts.
  • Understand the Bootstrap grid system and how to create responsive layouts easily.
  • Learn how to use Bootstrap’s container, row, and column classes for layout structure.
  • Apply different column widths, offsets, and nesting for advanced layouts.
  • Explore built-in Bootstrap components like buttons, cards, navbars, modals, alerts, and forms.
  • Customize Bootstrap components using utility classes for spacing, colors, and typography.
  • Learn how to make responsive navigation bars and dropdowns using Bootstrap components.
  • Combine grid system with components to build professional and mobile-friendly web pages quickly.
  • Understand the fundamentals of JavaScript, including variables, data types, operators, and control flow.
  • Learn how to write functions, work with arrays and objects, and manipulate data efficiently.
  • Understand the Document Object Model (DOM) and how HTML elements can be accessed and modified dynamically.
  • Use JavaScript to select, add, remove, and update HTML elements on the page.
  • Learn how to handle user interactions using events like click, mouseover, keypress, and form submissions.
  • Understand event propagation, bubbling, and delegation for efficient event handling.
  • Learn to create interactive web pages by combining DOM manipulation with event listeners.
  • Debug JavaScript code using browser developer tools effectively.
  • Understand PHP syntax, variables, data types, operators, and control structures (if, switch, loops).
  • Learn how to create and use functions, arrays, and associative arrays in PHP.
  • Handle HTML form submissions using GET and POST methods securely.
  • Validate and sanitize user input to prevent security issues like XSS and SQL injection.
  • Upload and optimize images, including resizing and file type management, using PHP.
  • Learn the basics of MySQL databases: creating databases, tables, and performing CRUD operations (Create, Read, Update, Delete).
  • Connect PHP with MySQL using PDO or MySQLi and execute queries safely.
  • Understand database relationships and basic query optimization for performance.
  • Plan and design a complete static website using HTML5 and CSS3.
  • Implement semantic HTML tags to structure content properly.
  • Use CSS for layout, styling, typography, and color schemes.
  • Make the website responsive using Flexbox, Grid, and media queries.
  • Integrate icons, fonts, and images for visual enhancement.
  • Add interactive elements using basic JavaScript (menus, sliders, form validation).
  • Test the website on multiple devices and browsers for compatibility.
  • Optimize images and code for faster page load performance.
  • Deploy the website to a live server or GitHub Pages.
  • Demonstrate the final project with proper documentation and portfolio-ready presentation.
  • Understand different types of hosting (shared, VPS, cloud) and domain registration.
  • Deploy websites to live servers using FTP, cPanel, or GitHub Pages.
  • Use version control and Git to manage website updates efficiently.
  • Optimize websites for search engines (SEO basics, meta tags, alt text, headings).
  • Implement proper URL structures and sitemap for better indexing.
  • Monitor website performance and fix broken links or errors.
  • Learn basic analytics to track visitor traffic and engagement.