HTML and CSS web design

HTML5, CSS3, and SCSS

Duration: 30 hours

Teaching Methodology: Hands on

Go to Contact US page Email Us. Chat with ETC using WhatsApp. Add to Waiting List under Web Design

DESCRIPTION

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Everything you need to know about HTML, and CSS are covered in this course.

The term SCSS stands for Sassy Cascading Style Sheets. It is basically a more advanced and evolved variant of the CSS language. Everything you need to know about SCSS will be covered in this course.

Benefits of taking this course:

  • Mastering HTML5, CSS3, and SCSS
  • Creating websites for all screen sizes
  • Writing clean, readable, organized, and maintainable code

AUDIENCE

Anyone who is interested in designing websites.

PREREQUISITES

Adobe Photoshop Essentials

HTML
CSS
SCSS
Web Design

COURSE CONTENTS

01 - INTRODUCTION

  • The right way to start typing fast
  • Overview on how the web works
  • Creating a hello world webpage
  • Setting up visual studio code
  • Installing Live Server extension for VSC

02 - BASICS OF HTML5

  • How is HTML structured
  • Rules of the HTML syntax
  • Common HTML elements
  • Creating multiple pages
  • Linking to other pages
  • Adding images
  • Adding social media links, and icons

03 - STYLING and CSS3

  • Introduction to CSS3 syntax
  • Inline styling
  • Common CSS styles
  • Creating an Internal style sheet
  • CSS selectors (tags, ids, and classes…)
  • Creating an external style sheet

04 - Tables

  • Creating tables
  • Styling tables
  • Customizing tables

05 - Setting up the layout

  • Setting width, and height to elements
  • Spacing, and positioning elements
  • Dealing, with overflown elements
  • Adding scrollbar to elements
  • Creating a user-friendly drop-down menu

06 - MAKING THE DESIGN RESPONSIVE

  • Using display flex
  • Using display gird

07 - Typography

  • Styling texts
  • Adding shadow effect to text
  • Using online fonts
  • Downloading, and using free to use fonts

8 - Advanced responsive design:

  • Creating mobile friendly interface
  • Creating responsive texts

09 - Creating a form

  • Creating input fields
  • Creating checkboxes
  • Adding submit button to a form

10 - Animation

  • Hover effect animations
  • Transition animations
  • Keyframe animations

11 - Advanced CSS

  • CSS variables
  • CSS functions

12 - SCSS

  • Introduction SCSS
  • Setting up the SCSS compiler
  • SCSS variables
  • SCSS functions