Learn to Build iOS apps, Android apps, Games and Websites!

Explore building a minimalist one-page website by using div containers, assigning ids like top and page, creating a logo area with a logo div, and adding an h1 heading.

Add an image within a new content div to structure a webpage, using an image source and a simple three-column layout beneath a header and logo.

Set the body css: apply a pure white background, set font family to saun saraf, and set font size to 20px with color #333333.

Add a banner with a new div and set its class to banner, then tune css margins and dimensions (width and height) to control image display and framing.

Learn to build a three-column web layout with CSS by setting widths, overflow hidden, padding, and floats, then add placeholder text to refine the design.

Adjust font size and boldness to resize logos and text, rename elements to dark coffee, and apply large, bold styles in css with pixels and centimeter units.

Set the page background in CSS by styling the body with an orange color, refine toward a gray and white scheme, and adjust the font family and 20-pixel font size.

adjust the logo to sit flush by removing the white background and letter spacing, set the logo to 1000 pixels, and test with graphics before adding vector icons.

Learn to add font awesome icons by defining font-face and font-family, and embedding web icons in your site.

Learn how to center icons in multiple columns by applying text align center and block display, then build and format a multi-column layout with logo icons across six columns.

Change the header2 text styling by adding 10 px padding, choosing a font size of 35 px, and adjusting letter spacing with a negative 2 px value.

Set the page header to 1000px width with 50px margins, apply auto layout, and adjust the text color to a darker gray for contrast, ensuring the page works before styling.

Add a splash of color to a page by using span tags in HTML, applying rgba off-white values to headers and elements for a cohesive look.

Experiment with a new color theme by adjusting the website's background and text contrast. Explore medium light and dark combinations, or inverted schemes, to make the design pop.

Learn to structure a web layout by adding div tags, assigning IDs for a six-column grid, and populating each column with headings and paragraphs of Latin text.

Style header text in css using font-family, font weights, text transform, margins, color codes, and center alignment; tune h1 color to orange and adjust letter spacing for h1 and h2.

Learn to create six CSS columns by applying overflow hidden, setting widths, padding, and margins, then duplicating styles for each column to achieve a neat six-column layout.

Set dimensions and spacing for web divs by applying a 1000px width, overflow hidden, zero margins, and 30px padding, then replicate the styling across the page for a consistent background.

Duplicate and adjust div tags to create full-width paragraph sections, set the first and last sections to full width, and preview a seamless background across the page.

Learn to add font awesome svg graphics by setting font-family to font awesome, defining content, sizing to 150px, centering text, and applying an orange color.

Explore a range of icons and items, copy and paste selections, and compare different icon options while reviewing fonts and color schemes, including orange on dark gray.

Adjust the paragraph text by setting font size to 24 pixels for improved readability and clean formatting of the company statement, your name, and the closing statement.

Add a second span tag, assign an id, and adjust its background and text color to improve contrast and make elements pop for web development and game design contexts.

Master building the video-background website by constructing the HTML structure with divs, an id, a header, a container class, and a logo content section.

Practice adding text elements by creating headers, paragraphs, and horizontal rules, assigning IDs, and using Latin text to structure a simple web output.

Add a video background with a container at 100 percent width and height, center the video via left:50% and top:50% and translate(-50%, -50%), and set z-index for cross-browser compatibility.

Explore container css by styling a content area to 600px wide with overflow hidden, zero margins, and padding of 180px by 30px, then observe the title’s placement.

Add a div tag with an id to create a background area, then style it in CSS with text background and white color, using 30-pixel padding to refine the look.

Fix the stretched background video by applying fixed positioning so it stays over content, then adjust the title color and other text colors to finish the styling.

Select a background color using rgb values and adjust transparency to make the text pop. Try a brick-like rgb 166,42,25 with about 0.7 transparency for balanced contrast.

Experiment with the paragraph div text color, testing dark gray, light gray, and brownish hues to balance readability with the brick background, aiming for a middle gray that looks good.

Explore selecting website colors by adjusting the title and temp title colors, experimenting with background transparency, and applying color codes and span tags in CSS to enhance contrast and readability.

Add and tune the HR code by setting the top horizontal rule’s height, border, and background, adjust body padding for balance, and align with editorial guidance.

Create a dark, readable background with a simple color palette and off-black tones. Learn sprite layering, color choices and gradients, and locking the background layer in Construct.

Add sprites on layered stages, name the main and background layers, apply neon pink visuals, resize to 200 by 200, and drag objects into a box to plan efficiently.

Clone and label colorful blocks, then drag them into the correct box to build a simple six-block game with a neon on black aesthetic.

Add drag blocks and clone block types, resizing them to about 130 by 130 for mobile use. Use keyboard shortcuts to boost productivity and maintain consistent naming during production.

Add the drag and drop behavior to a ball, using a touch object to support touch and mouse input across mobile and desktop devices.

Learn to implement drop logic by creating a global score, organizing drag blocks, and handling collisions between colored blocks to add to the score or destroy blocks.

Implement the continuation mechanic by creating objects and dragging blue blocks with random positions, then introduce a green block to complete the extended run, framed as a clear tutorial.

Learn to implement an order mechanic by using drag objects in a drag family, triggering collisions to randomize or replace objects, and guiding players through color ordering.

Learn to add a randomize feature to a game by introducing a delay before respawning items, using a global wait variable and dynamic timing with random respawn times.

Create a reshuffle meter bar that slowly depletes in the game loop by subtracting from meter size each tick and updating the bar width; when it hits zero, items reshuffle.

Implement a timer-driven GUI bar that decreases its width by 10 percent every ten seconds, resets at zero, and restarts by destroying and recreating the reshuffle meter.

Rotate game blocks and set an initial angle to 325 degrees to create a dynamic layout. Use rotation with an every-tick update for smooth animation, emphasizing efficiency.

Add a cycles mechanic with a cycles remaining counter and a cycle number set to nine, decrement each iteration, display remaining cycles, and implement reset when zero.

Teach a color collection quest: grab purple, blue, green, orange, and yellow within 10 seconds for a bonus; track is_collected with instance variables, update score by 10, and reset game.

Transform game visuals by replacing square blocks with circles using Photoshop, save color assets as circular graphics, and optimize workflow with keyboard shortcuts to enhance game aesthetics.

Learn to add animation to the dots with a function that scales each dot from 0.1 to 1 using an instance variable to control the growth during reshuffles.

Add animations to all bubbles by implementing a grow circles function that updates each bubble's scale on random spawn, ensuring a shared scale variable and cohesive visuals.

Add animation to another part of the game by syncing drag-and-drop with corresponding colors, and manage scale on collision using the family scale property set to 0.25.

Add the drag and drop behavior to the drag family. Set the dragged item's scale to one so the circle stays the same size on touch screens.

Create a game over screen layout and game over sheet to manage end-of-game UI, and display the score and best score using set text.

Add game over logic by checking the cycle number and switching to the game over screen, then design and clone play again and social buttons in photoshop.

Learn to implement the play again button and best score logic in your game. Reset global variables like cycle number and score to support consistent best score tracking.

Learn how to post to Twitter from your app by copying code, adding a hashtag with %23, ensuring quotes, and understanding login and cross-platform API considerations.

Launch a beginner-friendly avoidance game by creating a landscape project, design a monochrome background with a sprite player, and implement square obstacles to dodge around the screen.

Set up a game player that follows mouse and touch input by syncing position to mouse x/y and touch x/y, with bounds, and optional cursor styles for multiple platforms.

Create a player death routine using a function, manage the is alive state, pause gameplay with a wait, and reset layout and bullet speed for seamless restarts.

Learn to implement a score in Construct 2 by creating a score variable, displaying it with a text layer, updating it at intervals, and resetting on player death.

Add sine waves to introduce difficulty by randomizing magnitude and period, and apply these values at start and on create for varied, escalating challenge.

Rotate the player on death, fine-tune spin degrees, fade objects, and restart the layout to reset the scene.

Launch a new project to build a simple reaction timer game in landscape mode, set up background and text layers, and center a large text box at 960.

Implement touch interactions to score points, update on-screen text with a score variable, and refine frame-based logic and delays, while testing early to prevent bugs.

Implement feedback when users select the wrong box by switching to an incorrect logic group, tracking is_correct, and using animations to indicate wrong selections.

Add logic to reset the progress bar width to 800 on right button clicks, stop on wrong selections, and fine-tune the timing to provide a balanced difficulty for players.

Add a menu screen, title screen, and full-screen flow for a three-screen game, enabling navigation and sharing scores via game center or tweeting.

Enable four-direction controls for a game by mapping w a s d (and arrows) to up, down, left, right, and tuning max speed, acceleration, and deceleration while bounding the player.

Add stars as a sprite, 10 pixels and lighter. Configure bullet behavior with speed and angle (180) and push stars behind the player using z-order, like in old arcade games.

Spawn random stars by setting their speed between 900 and 4500, and create new stars every three seconds at random offscreen positions.

Add a kill star sprite to destroy stars on collision and prevent lag. Randomize star sizes and apply 50 percent opacity for a background, space like effect.

Add a projectile by creating a bullet, coloring with an eyedropper, and resizing to 15 by 15. Spawn the projectile on space key press with proper acceleration and layer placement.

Implement projectile logic by rotating enemies, managing hit points, processing collisions to reduce HP, destroying projectiles on impact and enemies at zero HP, and adjusting rotation speed to slow enemies.

Learn to add the score by creating a score variable, incrementing it when enemies are destroyed, and updating the on-screen text to show the current score.

Implement reset logic to restart the layout on collision, using an is alive variable to pause enemies, wait three seconds, call reset, and reset the score to zero.

Begin a rotational shooter project by setting up an hd landscape scene, configuring window size, adding background and player sprites, adjusting sizes, and centering the player.

Rotate the player sprite toward the mouse position with a mouse feature and a 20-degree adjustment, then spawn enemies that move toward the center as you blast them.

Add a 20 by 20 projectile sprite with a bullet feature, spawning from an image point outside the player on left-click. Set speed to 500 and destroy it outside layout.

Build and manage item and enemy spawn locations by cloning objects at zero-based indices, set a capacity of 50, and hide these regions at start by setting opacity to zero.

Spawn 100 by 100 enemies in several colors including green, light blue, orange, purple, and yellow. Randomize color on creation, update the enemy color and frame, and stop the animation.

Spawn items from locations every second by randomly selecting a spawn location from zero to seven, using a global spawn location variable, and spawning an enemy on layer 1.

Introduce an enemy spawn time variable and set it to one second, then restart the game on player collision and destroy enemies outside the layout to prevent issues.

Set a local enemy speed variable and assign per-spawn speeds at locations 1 and 5. Move enemies forward with speed and scale all enemies by tying changes to enemy.speed.