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.

Select a coffee bean image from a public domain source, choose a black-and-white photo, copy it into your project, and apply a gray monochrome theme.

Set up a three-column web layout by creating divs for the main page, column 1, and content, then add headings and paragraphs to structure the content.

Copy and paste latin text into three columns using divs, then implement CSS to make the columns render correctly.

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

Learn to style h1 and h2 headings with css by applying impact font, normal weight, uppercase transform, and zero margins and padding for a darker look.

Edit the header logo by setting line height to 150 pixels, adjusting letter spacing from 10 to 50 (including minus options), and increasing font size.

Format the header area with overflow hidden, resize the image to 600 pixels, and set the header to 1000 by 150 pixels with margin 0 auto and padding 0 10.

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.

Fix the image by adding an image tag and sizing to a thousand pixels, then build a one-page site with a gray theme and Google Maps and coffee purchase links.

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.

This lecture guides you to add links to a simple coffee website, including maps, an Amazon product, and a deal site, in a bold off-black and white design using css.

learn to build a minimalist website by structuring the page with divs for page, header, and logo, adding a header and a temp logo heading, and experimenting with colors.

Add six columns by creating divs with ids and inserting a heading and short paragraph in each. Copy this structure to build columns 2 through 6 and begin css styling.

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.

Style the header by choosing a Gill Sans font, applying bold and uppercase, removing margins and padding, and centering white color; adjust line height and letter spacing for the logo.

Create a six-column layout by configuring column blocks with overflow hidden, set width to 1000px and padding to 30px, then float left and duplicate items to fill the grid.

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.

Add a Font Awesome item by setting the font family to Font Awesome, paste a code from the site, and adjust the font size to 150 to 200 pixels.

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.

Choose and place relevant font awesome icons to theme a logo-focused website, testing icons for compatibility, and use icons to convey branding messages and drive marketing impact.

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.

This lecture teaches creating a bigger website by adding many div tags, assigning ids such as page, hatter, Nancy, and logo, and placing a logo element within the structure.

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.

Learn to style the body in CSS by applying a #3b3b3b off-black background, an off-white text color using RGBA, and a 20px font with a specified font family.

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.

Add div section formatting by testing and styling the first and second sections with background color, copy-pasting block styles, and verifying the css layout.

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.

Apply a full-width background by adding a new div for the six-column layout and updating CSS to stretch the background to the page end.

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.

Edit the header by adding a logo and a 150 px high, 1000 px wide line; set font size to 8em, center with auto, and add 30 px padding.

Add font awesome by pasting the font-face code, then insert font awesome icons into HTML using paragraph tags in the first column, so icons like heartbeat display on 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.

Learn to refine h2 typography in web development by adjusting spacing and font size, handling header length and center alignment, and enhancing text with css to make headers pop.

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 span to the title to apply color styling, name the section mammoth construction, and experiment with white color for contrast between dark and white text.

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.

Add another div tag with a regular background and orange title text, and use white text for the body to complete the tutorial.

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.

Embed a video in HTML, place it at the bottom of the page, set the source, and add a looping audio element as groundwork for the next lesson.

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.

Apply body and header CSS to style a page: set font family and a 20-pixel font size, uppercase transform, center text, adjust letter spacing, and remove margins and padding.

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.

Adjust font sizes and padding to fine-tune page presentation, experimenting with values like 5.0 to 6.0 for headings, adding 30 pixels of padding and a horizontal rule to structure content.

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.

Adjust the top padding to 100 and explore a different color scheme that works with this background, including red, a color you should know how to use.

Create a drag and drop game with Construct 2, exploring templates for cross-device layouts. Set a landscape 1920x1080 layout and study full-screen scaling with letterbox before adding objects.

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.

Test the game by running it in a browser, adjust layout and background for contrast, and drag colors to boxes while exploring simple scaling options.

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.

Learn to implement drag and drop behavior that places items in the correct box, and handle wrong drops by repositioning the piece randomly, with object replacement and a tutorial-friendly workflow.

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.

Create a hud layer with a white score text object, choose a font such as Impact or Bangers, and update it via the event sheet to display the score.

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.

Clone an object, create a bonus text label like 'bonus plus 10', position it on the screen, and use waits and moves to display and hide it during gameplay.

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.

Enhance game UI by adding rounded borders: create 200 by 200 blocks, use the rounded rectangle tool, adjust radius, fill colors, and keep layers editable for refinement.

Center and reposition the graphics user interface elements, implement a reshuffle trigger, and reveal a bonus plus 10 while testing with calculated half-screen coordinates for cleaner visuals.

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.

Implement a browser feature to open web pages from a button, enabling in-app access to sites, App Store pages, games pages, or sales pages on iPhone or desktop.

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.

Add a menu screen to your game by creating a 1920 by 2080 layout with a background and three buttons for play, more games, and social links.

Create a visual tutorial on the main screen by animating circles and a rotating game title on the menu, guiding users with visuals rather than text.

Spawn purple, yellow, blue, green, and orange blocks, rotate 90 degrees, and move forward to collide with the goal. Wait three seconds, then duplicate the sequence to reveal the tutorial.

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.

Implement an avoid logic mechanic by spawning objects at a timer, setting their angle to 90 for downward movement, and using a global avoid spawn time variable to adjust difficulty.

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 add a score in a mobile game by creating a score variable, updating it every three seconds, displaying it with a text layer, and resetting on player death.

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.

Tidy the project by grouping items into sections like score difficulty counter and mobile/desktop controls, delete duplicates, and keep system items and functions at the top for readability.

This simple game progressively gets harder and faster, with a shape change to a circle and a darker background to boost contrast, while inviting you to modify and improve it.

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.

Set up a block, adjust size and margins, snap to a 100 by 100 grid, clone and delete blocks, and animate from white to pastel green to pastel red.

Stop the start-of-layout animation, clone and move blocks, replace one with block 2, and use a global variable block select to randomly pick between blocks at startup.

Explore using a global block variable to select the active box, set frames for two blocks, and implement point scoring based on green blocks, with a timer.

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.

Reset the game by adding a three-second wait and a reset function to restart the layout, then reset scores and randomize box selections while testing a new difficulty counter.

Create a yellow progress bar using a sprite, sized 800 by 20, disable snap to grid, and shrink its width over three seconds with a timer, then reset at zero.

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.

Learn to build a retro brown side-scrolling shooter by setting up a landscape HD project, configuring background and player layers, and adjusting sprite sizes and colors.

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.

Learn to add an enemy sprite, tailor color from beige to orange, set its size, and implement motion with bullet and sine behaviors, tuning angle, period, and magnitude.

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.

Add particle effects to create explosions, adjust speed, size, grow rate, and acceleration, set a 360-degree spray cone, enable one-shot bursts, and fine-tune with randomisers while avoiding lag.

Explore two practical methods to trigger particle explosions when an enemy is destroyed, spawning an explosion object or using on-destroy logic, with timing, fading, and layering considerations.

spawn enemies every second by creating enemy objects at random x and y positions on the system, assign the enemy layer, and set hit points to three.

Fix rotation problem by making enemy rotation speed local and set it to 8; subtract 2.5 on collision and adjust spawn time to two seconds, test early and often.

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.

Create a final challenge that makes the space shooter progressively harder by making enemies bigger or faster, while ensuring the score resets to zero at startup.

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.

Rotate the enemy toward the player and move it forward each tick, enabling automatic tracking, life checks, and organized spawn locations for cleaner gameplay flow.

Handle collision between the projectile and the enemy, then destroy the projectile and the enemy. Create a global variable for enemy speed and set it to eight.

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.

Learn how to implement a simple scoring system in a game, including creating a global score variable, incrementing on enemy destruction, and updating on-screen text.

Create a green particle effect and clone it to blue, pink, orange, purple, and yellow; set the spray cone to 360 and enable a one-shot explosion.

Add a sub condition to the enemy destroy logic to spawn an object on layer 0 or 1 and trigger a green, blue, pink, orange, purple, and yellow particle effect.

Add diverse enemy movement patterns by implementing different movement styles and spawn options, such as all at once or two at a time, to create varied game states.