CS9 – Basic HTML and CSS

Timestamps

01:09 HTML
09:01 CSS

 

Lesson Notes

In this Lesson: we are going to discuss all about basic

  • HTML
  • CSS

 

As a Web Designer, we don’t necessarily need much in-depth knowledge on coding because page builders like Elementor, Brizy or Divi make it easy for us to design a website. However, being able to understand at least how HTML and CSS coding is done, gives you an advantage to be able to customize a page when needed. Using HTML and CSS is easy because we can easily find the code that we need just by searching for it on Google. Like this website w3schools.com, here, you can learn about the different types of online coding and programming languages. In this lesson, I’m going to demonstrate to you in actual, how to do HTML and CSS coding and how you can apply it in WordPress.

 

What is HTML

HTML stands for Hyper Text Markup Language. This is the standard markup language for creating Web pages. 

An HTML element is defined by a start tag, some content, and an end tag:

We can write a simple webpage by writing this HTML code in a notepad:

 

When you save the file as .html, you will be able to open it in a browser and you were able to create a local webpage. You can view the source of a webpage by inspecting it (right-click). You will be able to see all the codes that were used to build the webpage.

 

Let’s learn some basic HTML tags: When creating an HTML document, these are the fundamental codes you need to have.

 

Please note that every WordPress theme already contains the codes like doctype html, head, title and body, so we don’t need to write those codes anymore when applying HTML in a WordPress page.

Now let’s learn some basic HTML tags that we can add inside the body. When you go to edit a page or post with a text editor, you can be able to see and edit the HTML codes of the page or post by clicking on the Text tab. For pages edited with Elementor, you will see it when you have inserted a text editor element in your page. Here are some basic HTML tags that we can use

 

So those are some basic HTML elements that you can apply in WordPress. Now let’s learn about CSS.

 

What is CSS

CSS stands for Cascading Style Sheets. Coming from the word style, it is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more. CSS can be added to HTML documents in 3 ways:

 

In WordPress, we can add inline CSS styles in our Editor or by adding it in the Appearance – Customize – Additional CSS. Let’s learn about the different types of CSS styles and apply it as Inline CSS in our page.

Basic CSS Styling properties

  • background-color – defines the background color for an HTML element
  • color – defines the text color for an HTML element
  • font-family – defines the font to be used for an HTML element
  • font-size – defines the text size for an HTML element
  • text-align – defines the horizontal text alignment for an HTML element
  • border – defines a border around an HTML element
  • padding – defines a padding (space) between the text and the border
  • margin – defines a margin (space) outside the border
  • line-height – used to set the line height of a text

 

This time, let’s learn how to add CSS in the Appearance customizer. Instead of adding inline style in our html tags, we may add a class or the id attribute. This is better than inline css because in this way, we can make our page load faster by lessening the codes in the page. The more codes we put to a page the slower it will load.

Using the Class Attribute: The class attribute is often used to point to a class name in a style sheet.

You may also add a class or id name in Elementor by going to the element settings – Advanced setting.

The difference between Class and ID is that a class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page. So it’s better to use class instead of ID

 

Portfolio

  1. Create a sample page in WordPress and add contents using HTML
  2. Add styling to the HTML elements. You may use inline styling or use CSS class and add in the Appearance customizer

Send the link of the page you have created with HTML and CSS.

Email Subject: WD – Portfolio 9

 

PORTFOLIO SUBMISSION GUIDES:

1. Video-On-Demand (VOD) Access
Submit your portfolios to courses@surgedigital.agency.
You can submit individually per coaching session or submit all required portfolios as one, in one email (attach your Google Drive).

2. VOD with Class Coaching
Send your portfolios to courses@surgedigital.agency.
Please submit individually per coaching session.

3. VOD with Mentoring
Send your portfolios to courses@surgedigital.agency.
Please submit individually per coaching session.

4. Premium Members
Submit your portfolios to courses@surgedigital.agency.
Please submit all required portfolios as one, in one email (attach your Google Drive).

 

CONTACT US!

For Technical Issues: members@surgedigital.agency

For Submission and Certificate: courses@surgedigital.agency

For any Concerns or Questions: info@thesurgemarketplace.com