WordPress Web Design and Advanced Theme Development

Explore Photoshop, Adobe's premier tool for web graphics and image editing, and learn the standard interface, navigation, left-hand tools, and how to open images and unlock layers.

Master the rectangular and elliptical marquee tools to create precise selections, fill with color or gradient, organize selections on layers, and copy elements from complex images.

Learn to create custom shapes and precisely select items from complex documents using polygon, magnetic, and standard lasso tools, with polygon lasso recommended for best accuracy.

Master the magic wand for precise selections, learn crop and perspective crop tools, and slice an image into parts. Combine eyedropper sampling with the paint bucket to apply colors.

learn to remove spots and red-eye with the spot healing brush, healing brush, patch tool, and content aware features for clean portrait edits.

Explore the brush tool, pencil tool, color replacement tool, and mixer brush to paint on images, adjust colors, and refine selections with contiguous, discontiguous, and find options.

Learn to use the clone stamp, pattern stamp, history brush, and art history brush in photoshop to clone objects, create patterns, and selectively restore or remove elements.

Learn to use the eraser tool, background eraser, and magic eraser to remove colors and backgrounds, with undo support and color-based selective erasing.

Explore how to use the paint bucket and gradient tools to fill layers with solid colors or patterns, create custom patterns, and adjust gradients for varied effects.

Learn to use blur, sharpen, and smudge tools in Photoshop to selectively edit images, resize brushes, and undo changes.

Learn to use the dodge, burn, and sponge tools in Photoshop to brighten highlighted areas, darken overall regions, and convert images to greyscale.

Learn how to use the pen tool to select elements and shapes, add and remove anchor points, and refine selections in image editing for web designing.

Explore the text tool to type on shapes and adjust font size, color, and font style with new properties. Select the tool, start typing, and write on your designs.

Explore shape tools to create custom shapes for designs, color with the paint bucket, and use shortcuts to transform into circles, ovals, lines, including creating a perfect circle.

Learn to navigate large Photoshop documents with the hand tool to pan and the rotate view tool to change angles. Then select and transform elements to reposition them.

Explore Adobe Fireworks, a compact program designed for web graphics creation. Learn its web graphics focus, simple interface, and how it differs from Photoshop for image editing.

learn the principles of web design by building a prototype, gaining client approval, and translating it into a living website through hands-on coding.

Explore user experience as a two-way design focus that highlights the needs of your website, illustrated by Facebook, Netflix, Instagram, and BBC, with signup, free trials, and paid memberships.

Explore color management and typography to create consistent, readable WordPress designs, using a four to five color palette and uniform call-to-action styles with thoughtful line height.

Discover how icons function as fonts, enabling scalable, non-destructive adjustments when resizing. Download and compare popular icon fonts, then learn to implement them in your projects for richer visuals.

Design a website header in Photoshop by setting up the document, resizing images, crafting navigation and tagline, refining typography, and adding a call-to-action button.

Maintain the original design when converting templates to HTML/CSS by preserving margins and spacing, including a 27-pixel left margin and logo placement.

Design the specialties section for a WordPress theme by arranging whitespace, icons, and text over a background image, measuring gaps and selecting colors for mobile-ready layouts.

Design the packages section using fireworks. Align text and create boxes with pixel-perfect spacing for the live site.

Design the packages section by creating colored boxes for starter, professional, and business packages, using fireworks tools, exact dimensions, color codes, and precise spacing to align text and buttons.

Design your portfolio section by adjusting layout, measuring gaps, and aligning boxes. Import background and dummy images, refine text, and update colors to finalize the portfolio page.

Design the About Me section using a background color, image, and text with precise alignment, spacing, line height, and space between words in the new WordPress theme.

Design the contact section by drawing a box and adjusting whitespace with page ruler. Set color and text, create name, email, and message fields with a get in touch button.

Design the footer section by sizing layout boxes, matching colors, and placing icons and text. Measure height, align spacing, and address typography and copyright information.

Design a blog page layout by configuring content blocks, spacing, and typography, setting pixel dimensions and background color, adding dummy text, and including a read more button.

Design the blog page in WordPress by laying out blocks, widget areas, and color schemes. Arrange spacing and alignment to create readable content and a balanced layout.

Design the WordPress contact us page by reusing home page elements, adjusting the background, button text, and text areas, and set an 80-pixel rectangle with a chosen color.

Celebrate completing the current section and preview the next lecture on responsive website design, interviews, and the system architecture within WordPress advanced theme development.

Discover how a responsive grid system keeps WordPress site content readable on mobile and lowers bounce rates, with downloadable resources in the course materials.

Set up your working environment and refresh the project folder structure for WordPress theme development, preparing assets such as images and CSS folders, in anticipation of starting coding next lecture.

Install brackets plugins and extensions, download essential assets (fonts, icon fonts, images), import css and project files, and prepare your site files as coding starts in the next lecture.

Plug in all css and JavaScript files for the WordPress theme, using link tags, fonts from Google, and script sources to complete the theme setup.

Bring in an additional CSS file to load ionicon fonts and insert an icon between the code forms, completing the link tab for WordPress advanced theme development.

Convert the header section into HTML and CSS pt.1 demonstrates creating an image slider, importing images, declaring global rules in a stylesheet, adjusting layout, and activating the slider with JavaScript.

Convert the header section into HTML and CSS, building a responsive navigation with home, blog, and contact us links, using percentage widths and uppercase styling.

learn to convert the header section into html and css, implement a call-to-action, adjust padding and colors, and refine the header styling for a wordpress theme.

Convert the specialties section into an HTML and CSS layout with responsive columns, uppercase headings, centered text, padding, and a fixed, centered background image for each item.

Convert the specialties section into HTML and CSS by applying class-based styling, colors, and responsive column layouts, and preview changes on live and development sites for WordPress themes.

Fix the packages section by setting its height to auto, adding extra padding, and reuse CSS to style list items and icons for the WordPress theme.

Design and style the packages section in a WordPress theme, adjusting box sizing, colors, text alignment, padding, and white space to achieve a clean, production site layout.

Convert the portfolio section into HTML and CSS by building a styled, responsive layout with a section tag, named classes, background textures, image assets, and anchor links.

Convert the about me section into a responsive html and css layout, including image integration, icon usage, color and spacing adjustments, and a styled, centered presentation for a WordPress theme.

Create and style the contact me section using HTML and CSS, apply a linear gradient over a background image, and build a form with name, email, and message fields.

Learn to code a responsive footer section in html and css, using a footer tag, a grid layout, borders, colors, and icons for a WordPress theme.

Create and style WordPress blog and contact us pages, applying templates, implementing WordPress functionality, and coding new pages for flexible blog design.

Install and configure the xampp web server on your local machine to run WordPress, start the apache server and the database, and create a new database on localhost for development.

Install WordPress on a local XAMPP server by downloading WordPress, moving it to the htdocs folder, and configuring the database before finishing setup and logging in.

Explore the difference between static hardcoded information and dynamic, database-driven content powered by PHP, and learn how dynamic data updates automatically for robust WordPress themes.

Write your very first PHP script in the WordPress design course by using opening and closing tags, echoing hello world inside an h1, then refresh the browser to view it.

Learn how to write PHP code with the opening and closing PHP tags, explore short form tags, and configure short_open_tag in php.ini for live testing.

Explore different PHP syntax options, including the standard PHP tags and the short echo method, and learn about deprecated short tags since PHP 7 for printing variables.

Master php comments in code blocks by applying single line // and multi line /* ... */ syntax to document echo statements and code functionality.

Explore PHP comment styles—hash, slash, and C-style multi-line comments—along with PHPDoc blocks for API documentation, and see how comments don’t affect output, as hello world renders.

Explore PHP variables, including declaring with a dollar sign, using echo to print strings, and concatenating values with the dot operator to build dynamic web content.

Explore PHP variable types, including scalar, composite, and resources, and learn that scalar values include boolean, integer, float, and string, with composite covering objects and arrays.

Learn how local variables in PHP exist inside a function's scope and cannot be accessed outside, demonstrated with a function that echoes a locally defined variable.

Explore variable parameters in a PHP function, seeing how a parameter is defined and assigned, then returned and used to compute results like 10 times 20 equals 200.

Learn how to declare and access global variables in PHP, use the global keyword across functions, and share values between included files and functions.

Explore PHP static variables and see how a function with a static variable preserves state across calls, incrementing from 0 to 1, 2, 3, unlike regular variables.