CSS Images

Image - CSS Images
Image – CSS Images

Use CSS Images to adjust borders, margins, and padding to highlight images and separating them from the neighboring text. Align images and have the text surround it. Move images, rotate, and insert them in non-rectangular frames. Add a background image and see the tile effect repeating horizontally and vertically. Add Responsive images that look great on a variety of screen sizes and devices. Solve problems associated with varying resolutions. Specify a set of images based on the pixel density of the display device. Find out how modern browser tools contribute to check how responsive designs work. Choose the ‘srcset’ and ‘size’ attributes. Browsers can then accurately select the correct image for devices. Also, use the attributes to make a responsive web design. The tools for making images and CSS must be supported with a constructive visual layout.

Continue reading “CSS Images”

HTML Images

Image - HTML Images
Image – HTML Images

In HTML Images know what the different image formats are? Insert images on web pages and view them on different devices. File formats such as GIF and SVG are line art whereas JPEG is for photos. SVG is the ultimate choice when it comes to drawing an icon or a logo. The optimization process for images is called compression.

The essentials of placing an image on a web page are the <img> element and the ‘src’ attribute. Some of your website users may be visually impaired. The images can be made accessible to them by using the ‘alt’ attribute (alternate text). The ‘alt’ text provides a description for such users who cannot see the screen. These users can access through a screen reader. Rightclick on any image and find out the width and height from the image info. Resize dimensions to the right size if needed by using the width and height attributes. To refresh the basics of HTML, click on ‘Introduction to HTML‘.

Continue reading “HTML Images”

Javascript Basics

Image - JavaScript Basics
Image – JavaScript Basics

In Javascript basics, understand how websites load and are grouped into three layers. The first layer is the website content with the HTML that wraps around it. Next comes the CSS which styles the HTML for presentation. The third interacts with HTML and CSS to change what the user can see and do inside a website. The first two layers loads when the page loads. When and after the page is loading the third layer runs in the background continuously. Javascript can make changes to a website without refreshing the browser. HTML & CSS cannot do everything but writing Javascript helps to add features such as web forms, shopping carts, interactive maps, calendar and more to your website. In programming, making decisions with the code is called Control flow. Work your way through the basics and get a grasp on Control Flow, Conditionals, Functions, and Arrays & Loops.

Continue reading “Javascript Basics”

PHP Programming Basics

Image: PHP Programming Basics
Image: PHP Programming Basics

PHP is a server-side programming language. To parse PHP code set up a local environment such as XAMPP to run Apache server PHP on your local machine and use MySQL database. In PHP Programming Basics, embed PHP code into an HTML page and output dynamic text. Review the basics – PHP data types, such as variables, strings, and arrays. Different control structures in PHP, such as expressions and loops, give control over how the code executes. Even though PHP has many built-in functions, you can define your own custom functions. The code becomes reusable and helps prevent bugs.

Continue reading “PHP Programming Basics”


Image - CSS for HTML
Image – CSS for HTML

Go through Introduction to HTML, before starting with ‘CSS for HTML’. CSS is a must for front end web developers. Cascading Style Sheets works with HTML to enhance its look in the browser. CSS is continuously progressing that call for even more greater control of the presentation of web pages. Understand the CSS box model and layout concepts. Set margin and paddings and position elements. Work with fonts and colors and structure webpages. Create CSS code, background images, add classes, IDs, float, layers, embedded style sheets, external style sheets, and more. Use media queries to adapt content for different web device sizes. Improve your CSS with free tools such as Code Pen, Chrome Dev tools or the Chrome Plugin- Pesticide.

Continue reading “CSS for HTML”

Regex Basics

Image - Regex Basics
Image – Regex Basics

Regex Basics starts with symbols and basic syntax to find and manipulate text. Use character sets and repetition expressions to create flexible matching patterns. The Regex engine parses text to find matches and utilizes greedy and lazy strategies. Capture text and lazy strategies as it finds matches. Refer back to it later by using backreferences. Discover look around assertions to create complex matching patterns. Complex Regex can search for anything such as email addresses, phone numbers, URLs, prices, zip code, etc. Build step by step and explore some of the common and useful Regular Expressions. Write Regular Expressions for pattern matching, text manipulation, and parsing data. In JavaScript, it can be an object. Regex comes in different flavors based on the programming language or the application. The PCRE-version stands for Perl Compatible Regular Expressions. It is credited for popularizing the usage of RegEx. PCRE is also used in PHP.

Continue reading “Regex Basics”

Brackets Code Editor

1 - Image - Brackets Code Editor
1 – Image – Brackets Code Editor

Brackets Code Editor is open source for Web Designers by Adobe. Download and Install Brackets. The ‘Live Code Preview’ automatically updates files without having to write any code. Use brackets to edit documents. The ‘Inline Editor’ edits multiple files and supports preprocessors. As you use the ‘Inline Editor’ to see the code applied to a particular element or class you get a view of the LESS or SCSS files with the processed CSS files. Many APIs can hook into brackets to create custom scripts or brackets plugins. Make your brackets experience better with extensions. Install and remove plugins and themes. To add extensions use the Extension Manager to install update packages. In the Bracket’s toolbar access it by selecting File > Extension Manager. Optimized for HTML, CSS, JavaScript, Brackets can be used on a Mac, Windows, and Linux.

Continue reading “Brackets Code Editor”