HTML・CSS Writing 2022

How to write HTML / CSS / 2022 latest version
Introduction to HTML / CSS for Perl developers

An introduction to HTML / CSS for Perl web developers to learn how to write HTML / CSS in 2022. You can study with content that corresponds to the latest web design trends in 2022. Simple description, HTML5, CSS3 compatible, smartphone + IE11 support. Also introduced how to use jQuery, a JavaScript library for dynamic web design.

For first-time users

• Purpose of writing HTML / CSS
• How to learn web design for web design beginners
• Video introduction

HTML

• Introduction to HTML --Carefully selected HTML tags used in HTML5 practice

CSS (style sheet)

• Introduction to CSS-Introduction to CSS3-compatible stylesheets

Design fine adjustment

The default HTML and CSS have some parts that are difficult for users to use. Content related to fine-tuning the design.

• Wrap characters with pre tag to start a new line

Character code

• Specify the HTML character code

color

• Let's understand how to specify the color

Background

• How to set diagonal stripes as background color
• Make the background glow when you hover over

characters

• Make the text glow when you mouse over

Image

• Adjusting the vertical position of the image --Technique to align the vertical position of the icon and the character

Font

• Font family setting sample site collection

Table

• Master how to create a table
• How to easily create a multi-column table on a PC and a single-column table on a smartphone

List

• Master how to create a list
• How to arrange product cards evenly spaced

Hyperlink

• How to fix the anchor shift with simple HTML and CSS when the header is fixed

Form

• Text field-Text input form part
• Password field-Password input form part
• Select field-Form part to select an item
• Textarea-Form part for multi-line text input
• Checkbox-Form part for multiple selection
• Radio buttons-Form parts for selecting items
• Create a non-submit button in the form

Sidebar

• Create a sidebar

Layout

• Introduction to flex layout
• Master multi-line flex layout
• Create a menu with a fixed length on one side

jQuery

• jQuery --A library that simplifies HTML / CSS operations in JavaScript

Map

• Embed google map in page

PowerPoint logo / icon collection

• PowerPoint logo icon collection

Smartphone compatible, responsive design

• Smartphone compatible viewport settings

iphone / safari

• Solved the problem that the characters of the phone number turned blue in iphone / safari
• Resolved the default design of text fields and buttons in iphone / safari
• Prevents automatic enlargement when filling out a form on iphone / safari

Design attitude

• When designing, go back to a 10 year old kid
• Can the character be read by a 75-year-old elderly person?

What's New

• What's New

HTML / CSS related course

This is a related course on HTML / CSS.

Introduction to Perl Programming

Perl programming is good at text processing. Learning Perl makes it easy to edit HTML.

• Perl Seminar-Introduction to Perl Programming

Website creation

Giblog, a website creation tool, is useful for creating websites.

• Create a website with Giblog

Web development environment construction

If you want to build a web development environment, there is a procedure for building an environment on Ubuntu, which is one of the Linux distributions.

• Building a web development environment on Ubuntu

Web application creation

If you want to create a web application that has a member registration function, there is a web application development course.

• Introduction to Perl Web App Development

HTML / CSS questions

There is a members-only Perl club forum where you can interact with your peers and ask HTML / CSS questions. You can also use Twitter's reply / direct message and Youtube's comment section.

• Perl Club Forum
• Twitter
• Youtube