HTML and CSS web design

HTML5, CSS3, and SCSS - Training Course

Learn to design professional front-end websites using HTML5, CSS3, and SCSS at ETC Lebanon.

Duration: 30 hours

Teaching Methodology: Hands-on

Course Schedule: Schedule

Fees: $300

Course Mode: Blended - Face-to-face or online via Zoom

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

DESCRIPTION

This course on HTML and CSS teaches you how to create front-end web designs. HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout for various devices.

The term SCSS stands for Sassy Cascading Style Sheets. It is a more advanced and evolved variant of the CSS language.

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