The Complete Web Developer Bootcamp - Beginner to Expert

Learn to build a blogging platform with Ruby on Rails and explore how blog software and its components work behind the scenes.

Navigate the console as your command center; sign in, start the virtual IDE, explore the file system, and use PWT, ls, and cd, plus ruby -v and rails -v checks.

Generate the default skeleton of a Ruby on Rails app with rails new, then install gems via bundle install and start the rails server to view the home page.

Learn how to start, view, and stop the real Rails server on port 3000 from the blog directory, monitor activity in the console, and use essential shortcuts.

Scaffold the blog feature with Rails to create posts with titles and body text, run a database migration, and practice saving, viewing, editing, and deleting posts.

Configure the home page to show the blog index, integrate bootstrap via CDN, and apply bootstrap classes (container, jumbotron) in Rails views while disabling scaffold CSS to refine styling.

Leverage the Bootstrap library to enhance the interface by applying button classes like btn-info, btn-warning, and btn-danger, and use the table class to lay out blog posts.

Learn to build and style web forms with bootstrap, grouping fields with form-group and using form-control inputs, create blog post forms with dates, and craft mobile-friendly buttons.

Learn to display blog posts in a Rails app by editing the index and show views and formatting creation dates with to_date, plus Bootstrap styling.

Explore what happens behind the scenes when you load a web page: the browser sends an HTP request to a server, receives an HTP response with HTML, and renders it.

Discover how HTML forms the frame and content of a web page. See how CSS paints the design, layout, and styling that bring the page to life.

Explore Sublime Text as a powerful, free evaluation editor for Windows or Mac, and practice HTML, CSS, and JavaScript using browser tools like JSFiddle, CodePad, and CodePen.

Set up Sublime Text, create a new HTML file named index.html, save it in a new desktop folder, and view your first HTML page in a browser offline.

Explore basic HTML document structure using opening and closing tags, including doctype declaration and title tag in the head, and see how content in head differs from content in body.

Discover how HTML structures content with paragraphs and headings, from p tags to h1–h6, while CSS shapes the page's look and feel beyond the bare bones.

Learn to create and nest HTML lists, including unordered and ordered lists with list items, use opening and closing tags, and style them with CSS for horizontal navigation.

Learn how to display images with the html image tag, specify the src attribute, and resize using height, while noting self-closing and br tags.

Explore how tables organize content in rows and columns using table, row, and data tags, then contrast with division tag layouts for box-structured pages.

explore html forms, including form tags, action and method attributes, input types (text, password, checkbox, radio, submit), textarea, select, labels, and name and value attributes for server processing.

Learn how links connect web pages with anchor tags and href, enabling navigation between pages and internal and external sites.

Explore the division tag and the span tag to structure web pages, using id and class attributes to create headers, sections, and forms, and to control layout with css.

Use HTML comments to add notes to your code and disable rendering. Learn the syntax <!-- and --> and how comments can span lines and stay hidden in the browser.

Launch a fast, one-page Rails site by creating a blank app, adding a parallax HTML template to the public folder, and running bundle install and Rails server.

Learn how cascading style sheets bring color and life to web pages by styling HTML content, and how layout, positioning, and basic styling choices create visually appealing pages.

Learn how to add CSS to HTML documents using inline styles, style tags, and external stylesheets, with external style.css as the clean, preferred approach.

Master the basics of HTML structure and CSS styling, including doctype, html, head, body, and linking a style.css. Learn CSS selectors and h1 styling with color and borders.

Learn to apply the CSS color property to HTML elements using selectors like h1 and p, explore hex values and rgb, and use Photoshop or color.adobe.com to pick hex codes.

Explore how to style text with CSS, including color, alignment, decoration, and font properties, and learn how to load custom fonts from Google Fonts with fallbacks.

Explore how to style lists with the ul selector, remove bullets using list-style-type: none, and build horizontal navigation bars with floating. Engage with interactive code examples to see real-time results.

Explore how nesting creates parent and child containers in HTML, and control layout with the display property using block and inline values, plus visibility and display none.

Explore the Chrome inspector tool to view HTML and CSS, analyze how sites render, and safely experiment with live style changes like font size and color in your browser.

Master how margin and padding control spacing through the CSS box model, and distinguish padding from margin around elements. Explore shorthand values and a CSS reset concept.

Learn to style with CSS using selectors, classes, and IDs to target h1 elements and apply color and text rules, while understanding single-use IDs and multiple classes.

Explore how CSS selectors target elements by tag, class, and id, with grouping, nesting, descendant and adjacent selectors, and practical chaining examples from the W3Schools reference.

Learn to use css float to create horizontal page layouts by floating elements left or right, visualize with borders on divs, and apply a clear fix to prevent collapsing.

Explore how float right and float left shape page layouts, then master relative, absolute, and fixed positioning with parent and child divs, including practical tips and bootstrap as a helper.

Explore essential CSS properties to modernize pages, including borders, border-radius, shadows, and transitions; learn precise selectors, hover effects, display choices, and practical tips from W3Schools and gradient and box-shadow generators.

Explore how CSS media queries detect device width to deliver responsive web pages that look good on phones, tablets, and desktops while leveraging Bootstrap's grid system.

Import Bootstrap via CDN, apply the CSS file, and use Bootstrap's container, grid system, Jumbotron, and prebuilt buttons to create responsive, clean web pages.

Learn JavaScript to create animations and interactive experiences on web pages, replacing Flash, study the language fundamentals, then manipulate page elements to enable dynamic user interactions.

Set up your environment with Google Chrome and Sublime Text, then load and run JavaScript in HTML pages using external files, inline scripts, or the browser console.

Explore how to declare and use variables in javascript, label code, store strings and numbers, and reuse values with initialization, assignment, and alert outputs.

Explore how strings work in JavaScript by using quotes in the browser console via inspect element, concatenate with plus, manage spaces, and check string length.

JavaScript performs basic math with plus, asterisk for multiplication, and division, and stores results in variables. Follow the order of operations and note you can't add strings and numbers.

Learn booleans as the true/false data type in JavaScript, including equality, strict equality, and not equal, with numbers and strings, then apply to real-world tasks like checking for an H1 tag.

Master control flow with if statements and else branches using boolean conditions, and learn the syntax of if (condition) { code } else { code }.

Explore Javascript comments with forward slashes to annotate code, in editors and not executed. Use // for single-line and /* ... */ for multiline comments, and keep semicolons in mind.

Explore JavaScript loops by examining the while and for loops, their conditions, booleans, and increments. See examples that log to the console and demonstrate incrementing x from 1 to 9.

Learn how to create and manipulate arrays in JavaScript, store lists of items, push and pop elements, access elements by index, and use length to loop through them.

Discover how to use functions in JavaScript to manage reusable blocks of code. Learn function declaration, invocation, camel case naming, and returning values with arguments and console logging.

Learn how JavaScript objects organize code with properties and methods, create objects using curly braces, access values with dot notation, and invoke methods to perform actions.

Explore JavaScript objects as collections of properties and methods, and learn to use prototypes as blueprints for creating multiple user objects with shared behavior, including a hello method.

Learn the DOM and the document object model, and how JavaScript manipulates HTML to create browser interactions. Target elements like h1 and respond to hover and scroll.

Target elements on a page with JavaScript by selecting via id, class, or tag name using methods like getElementById, getElementsByClassName, or querySelector, then apply dynamic interactions.

Learn to select elements by id, class name, tag name, or the universal query selector, and apply changes by adding CSS classes rather than inline styles.

Discover how to build interactivity with JavaScript events and addEventListener, select elements with querySelector, and dynamically add classes to respond to clicks, focus, hover, and color transitions.

Explore asynchronous web updates with ajax, using XMLHttpRequest to load server data without refreshing the page, and simplify this workflow with jQuery for event handling and ajax tasks.

Add jQuery to a document via a CDN, import the library, and use the $ selector with CSS selectors to target elements by tag or class, returning arrays.

Explore how jQuery simplifies selecting page elements using css selectors and manipulating classes, from plain JavaScript methods like document.getElementById and querySelector to add class and style changes.

Learn to select elements with the jQuery $ syntax, attach events like click and hover with callbacks, and modify styles or classes using the add class method and CSS rules.

Discover how to use the this keyword in jQuery to target only the clicked element, attach a click event, and add a border class.

Master jQuery's document ready to ensure code runs after the page loads, using $(document).ready to wrap logic and avoid global variables for robust, scalable web pages.

Understand how to load and use third-party jQuery plugins, such as waypoints, by loading them after jQuery to ensure compatibility and enable infinite scroll and scroll-triggered events.

Explore jQuery effects to create interactive web pages, including hide, fade in, fade out, click events, and chained animations, with Ajax shorthands for dynamic loading.

Explore the Ruby programming language with its clean syntax and practical use. Learn how Ruby powers server-side development with Ruby on Rails to build dynamic web applications.

Explore ruby basics in the ruby console, create ruby files in the root directory with touch, and run them with ruby filename.rb to execute code.

Learn basic numbers and strings in Ruby, perform arithmetic with integers and floats, and output results with puts or print, including string concatenation.

Explore variables in Ruby, labeling memory, storing numbers and strings, assigning with =, reassigning, and using string interpellation to embed variables in strings.

Explore booleans in Ruby by testing true and false values, using comparison operators to produce true or false, and applying logical operators like and, or, and not to combine conditions.

Explore control flow in Ruby by using if and else to route data, evaluate booleans, and apply comparison operators. Learn about unless and the ternary operator for concise conditional logic.

Learn to create and manipulate Ruby arrays, using literals or Array.new, add and remove elements with push, pop, and shift, access items by zero-based indexing, and nest arrays.

Discover how hashes in Ruby work as dictionary-like lists with key-value pairs, symbols, and hash rockets. Create, access, and list keys and values from hashes using literals and basic methods.

Explore iterators in Ruby by using each to loop arrays and hashes with temporary variables and blocks. Learn how map creates new arrays and compare hash syntax options.

Explore methods, or functions, as reusable blocks of code; learn the syntax, how to define and call them, and how to pass parameters and use string interpolation to produce output.

Explore Ruby classes as blueprints for objects, showing how to define a class, create objects with new, and use methods to encapsulate data like product prices.

Explore class attributes and the initialize method to create objects with instance variables like color and age, using dot new to instantiate the Animal blueprint and store values via initialization.

Explore inheritance by modeling a parent animal and a dog subclass to reuse code, initialize attributes, and add dog-specific methods like bark, with real-world examples like computers and Rails apps.

Build a saas-style membership site with free and pro plans, sign up, authentication, user profiles, and e-commerce using Stripe for payments.

Explore how the client-server model uses HTTP requests and responses to render web pages, and how Ruby on Rails applies the MVC pattern with routes, controllers, models, and views.

Begin a Rails project by using nitrous to access a remote development box in your browser, run rails new, and review the generated skeleton in the workspace.

Learn to set up git for version control by configuring global user name and email, initializing a repository, staging files, and making the initial commit.

Create a free GitHub account, authorize Nitrous, and add your SSH public key in GitHub settings to enable communication between both tools.

Create a new repository on GitHub and back up your code by pushing to origin master. Understand public versus private repositories and configure the remote origin to enable seamless collaboration.

Learn how to deploy a Rails app to the web with Heroku, push code via Git and GitHub, and configure production gems with bundle install for production.

Set up a free heroku account, deploy your code to a production server with git push master, and publish a live app while syncing changes with GitHub.

Preview your Rails app locally by starting the server with bundle exec rails server, then inspect the app on port 3000 before deploying to Heroku production.

Create a Rails home page by generating a pages controller, a home view, and a routes entry, then deploy the updated page to Heroku.

Add an about page to a Rails app by updating routes, creating a pages controller action, adding a view, and testing with the server, then commit and push the changes.

Add the bootstrap library to a Rails app by introducing the bootstrap sass gem, running bundle install, updating gem and lock files, and pushing changes on a new branch.

Activate Bootstrap in a Rails app by importing styles through Sass. Rename the asset file to application.css.scss, commit changes, create development branch, and push to origin.

Import bootstrap and add a top navigation bar to a rails app, exploring layout changes, responsive breakpoints, and the bootstrap JavaScript plugin.

Add bootstrap javascript to the navigation bar by updating assets/javascript/application, save and test at breakpoints, and use Chrome device emulation for mobile views; branch layout_improvements, commit, and push to origin.

Learn how Rails uses ERB and link_to in application.html.erb to generate anchor tags and replace hard coded paths with route helpers like about_path.

Learn how Rails routes and path prefixes like root_path and about_path enable dynamic, programmatic links between pages, demonstrated by rake routes output and updating the application layout.

Improve site layout with Bootstrap container and text-center, update the home and about pages using the application layout and yield, and apply jumbotron styling for a responsive, centered header.

Learn how to enhance a Rails site's navigation bar with Font Awesome icons, rename the site to deathmatch, and wire the logo and title to the home page.

Explore customizing a Rails app navigation bar with bootstrap class swaps and a gradient, and understand how the asset pipeline bundles CSS and JavaScript for production to boost speed.

Learn to build a fully functioning contact form system that saves messages to a database and sends email notifications, enabling messaging features and form data handling in web apps.

Create a contacts table in Rails by generating a migration, adding name, email, and comments (as text) with time stamps, and running the migration to persist form data.

Create a contact model file in the Rails app, defining a contact object with name, email, and comments; save, commit, and push to back up the code.

Learn to create a contacts controller in a Rails app, naming conventions for plural controllers and singular models, and understand Ruby classes and inheritance to organize code and commit changes.

Add resources :contacts to the config/routes.rb file to generate contact routes, then run rake routes to view URLs like /contacts and /contacts/new.

Build a front-end contact form in rails by creating a view file in the contacts folder, wiring it to the controller, and styling with bootstrap form groups, controls, and grid.

Explore how a browser request to /contacts/new is routed by Rails to the contacts controller. Create a blank contact object in the Rails console, fill in name and email.

Add a link to the navigation bar that points to the contact page, leveraging Rails routes and the new_contact_path to update the navbar.

Learn how a Rails contact form posts to /contacts, routes map to the create action, and strong parameters whitelist fields to save a new contact in the database.

The create action handles form submission by posting to /contacts, whitelisting parameters, creating a contact object, saving it to the database, and reloading the form on success.

Learn how to implement flash messages in Rails by defining flash keys, rendering them in the application layout with Bootstrap alerts, and displaying success or error notices after form submissions.

Learn to add presence validations for name and email in a Rails model to prevent blank submissions, and display clear flash messages using Bootstrap alert styles.

Explore how forms submit data to servers, store it in databases, and use RESTful Rails with four verbs—get, post, put/patch, delete—to manage resources via routes, controllers, models, and views.

Explore how a Rails app handles the contact form from get requests to the new and create actions, saving submissions to the database and validating name and email.

Learn how to implement emails from a Rails app using Action Mailer, wiring a contact form to send messages to your own address, with a mailer class and defaults.

Create a mailer view by adding a contact_mailer folder and a contact_email.html, then configure the email body to include the user's name, email, and comments.

Trigger emails by wiring the contact controller to send via the mailer after a successful save, passing name, email, and body to the mailer's contact_email method and delivering the template.

Push the latest code to Heroku, configure the SendGrid starter to enable production email sending, then test the contact mailer by checking your inbox.

Enable user sign up, login, and logout with the devise gem and offer a basic free plan and a paid monthly pro plan with access to members' contact info.

Add user authentication to a Rails app by integrating the Devise gem, generating a user model, migrating the database, and enabling sign up, log in, and log out.

Apply bootstrap styling to devise forms by editing devise views, updating registrations and sessions forms with form-group and form-control classes, and verify routes and commit changes to git.

Upgrade the navigation bar by adding sign in, sign up, and sign out links, using devise routes like new user session path and new user registration path.

Explore relational databases through Rails associations, linking users, status posts, profiles, and profile pictures with belongs to, has one, and has many; model dev match with free and paid plans.

Create a plans database table and plan model to support membership tiers, defining name and price, and seed a free and a paid plan using Rails migrations and Active Record.

Learn to associate users with membership plans in Rails using has_many and belongs_to. Add a plan_id foreign key via migration so each user belongs to a free or paid plan.

Set up a two-column homepage with bootstrap grid, add sign-up buttons for free and pro plans linked to devise forms, including pro credit card payment.

Pass plan identifiers via query string parameters in a Rails app to show credit card fields for paid plans while keeping basic signups free.

Switch between a basic sign-up form and a pro account with credit card fields using Rails partials, conditional rendering, and plan parameters in the query string.

Learn Stripe for payment processing via its API, enabling your site to communicate with Stripe's servers and earn money in your sleep.

Learn how to integrate Stripe for secure credit card payments in a Ruby app by installing Stripe and Figaro gems, configuring test keys with Figaro, and managing plans in Stripe.

Explains a Stripe-based signup flow for basic and pro memberships, using JavaScript to tokenize card data, inject it into a hidden field, and Stripe to handle payments and recurring billing.

Learn to implement hidden fields in Rails signup forms to pass the chosen plan (basic or pro) to the server, and distinguish forms with IDs while using query strings.

Implement stripe js on the client: load stripe, use publishable key, collect card details with jquery, tokenize to a card token, inject as hidden field, then submit to the server.

Develop a Stripe server-side integration by overriding devise registrations to conditionally save users with plan IDs, create Stripe customers, store the Stripe customer token, and adjust routes and migrations.

Enhance the subscription service by styling Devise alerts with Bootstrap for a sign-up notice. Enforce plan selection via a Rails before filter on Devise new action, then test and push.

Deploy a Strype-integrated app to heroku, merge development into master, migrate the database, create basic and pro plans, and configure environment variables for production payments.

Explore how the Stripe integration handles plan selection, client-side tokenization, and conditional server-side saves, creating a Stripe customer and storing its id while keeping credit card data off our servers.

Create and edit user profiles, upload profile pictures, and share profile information with the community. Deploy the app to Heroku to view it on production servers.

Create a profile model with belongs to and has one relationship, migrate to add a profiles table with a user id, and define fields like first name and job title.

Learn to set up nested profile resources under users in Rails, generate routes, create a profiles controller, and build create and edit pages for user profiles.

Create a dynamic Rails profile form for the logged-in user using current_user and nested routes, ensuring each user edits only their own profile via parameters hash.

Create a user profile form in a Rails app using Bootstrap grid and Rails form helpers; configure a singular resource and wire to the profiles controller create action.

Define the profile create action to build and save the profile from form data for the logged-in user using strong parameters to whitelist fields.

Create the users show action and view to display any user's profile. Load the user by id from the url and render a dynamic show template.

Build a barebones user show page in rails by querying a user by id and outputting profile attributes. Conditionally display pro-only contact details based on the user's plan.

Improve the new action in the profile's controller by using a generic profile object, prevent unlinking user associations, and adjust home page links for signed-in users.

Hide signup links when a user is signed in and show profile options instead. Use devise helpers like user_signed_in? and current_user to link to the user profile page.

Learn to enable user profile editing in a Rails app by building an edit action, reusing a form via a partial, wiring routes, and applying the dry principle.

Wire the edit profile form to the Rails update action in the profiles controller, using update_attributes to apply changes and redirect to the user’s profile with a success flash.

Secure user pages by requiring authentication for profile actions with devise's authenticate_user!, using before_action and current_user checks to prevent viewing or editing other profiles and redirect unauthorized users to root.

Integrate the paperclip gem to enable avatar uploads for profiles and add an avatar column to the profiles table via a migration.

Implement image uploads for user profiles in Rails using the paperclip gem. Add an avatar field and multipart forms, and whitelist the avatar param for future S3 storage on Heroku.

Build a polished user profile page by applying bootstrap grid for avatar and details, and use rails helpers to show conditional font awesome icons for developer, entrepreneur, or investor roles.

Learn to style a Rails user profile with custom css classes, bootstrap colors, responsive grid tweaks, pro features, placeholders, and refactoring for reuse.

Wire up the community index page by creating a users index action, building the index view, and wiring the home button to the users path with Rails and Bootstrap.

Design the community page to list users with profiles using Rails and Active Record. Style with Bootstrap, avatars, and thumbnails, and link usernames to profile pages.

Enhance the community page by displaying a pro badge for pro accounts, enable conditional rendering by plan id, and add a bootstrap-styled my account page and navigation.

Improve the about and contact pages by adding welcoming copy, center text, and update the community page to require profiles for visibility in the Deathmatch community.

Deploy the app to Heroku by merging development into master, pushing to origin, and running rake db:migrate, then test payments via Stripe and set up a custom domain.

Celebrate reaching end of the first half of this boot camp and your progress, then complete remaining resources to apply your skills to top companies and advanced web technologies.