Build Amazing Websites with HTML, CSS, Sass, NPM & Flexbox

BY
Eduonix

Become a front-end developer by designing and creating professional websites using Flexbox, Grid, and 2 Web Projects.

Mode

Online

Fees

₹ 199 995

Quick Facts

particular details
Medium of instructions English
Mode of learning Self study
Mode of Delivery Video and Text Based

Course overview

Build Amazing Websites with HTML, CSS, Sass, NPM & Flexbox online certification is created by Juan E Galvan - Web Developers, Entrepreneur and Instructor and presented by Eduonix, a training and skills development organization founded with a vision to provide world-class training content, pedagogy, and best learning practices.

Build Amazing Websites with HTML, CSS, Sass, NPM & Flexbox online course will train the learners to construct quality websites and become a front end developer, as well as to land their first job as a Web Developer or acquire their first Web Design Client even if they have no prior experience and expertise. The course aims to provide learners with the education they need to learn the fundamentals of design using HTML, CSS, Sass, and a range of other applications.

Build Amazing Websites with HTML, CSS, Sass, NPM & Flexbox syllabus is divided into 5 sections where learners will be taught about web development, building website using HTML and CSS, effects and animations with JQuery, SASS, NPM, building website using SASS and CSS, advanced responsive design, Flexbox, building website using Flexbox, and CSS Grid. The course also covers topics where learners will be taught about the recruitment process as web developers, opportunities as freelancers, personal branding and networking, etc all at a very minimal cost.

The highlights

  • Self-paced course
  • Complete online programme
  • English videos with subtitles
  • 29.81 hours of pre-recorded video content
  • 126 online lectures
  • 30-day money-back guarantee
  • Accessible on portable devices

Program offerings

  • Self-paced course
  • English videos with subtitles
  • Pre-recorded video content
  • 126 online lectures
  • 30-day money-back guarantee
  • Accessible on portable devices

Course and certificate fees

Fees information
₹ 199  ₹995

Build Amazing Websites with HTML CSS Sass NPM and Flexbox Fees Structure

CourseAmount
Build Amazing Websites with HTML CSS Sass NPM and Flexbox
Rs 995


certificate availability

No

What you will learn

Knowledge of css Web application development skills

After completing the Build Amazing Websites with HTML, CSS, Sass, NPM & Flexbox certification course, learners will be able to create incredible websites that are professional, appealing, and intuitive, design a website from the scratch. Candidates will also be skilled to create great graphics and features using modern CSS methods and working on projects in Sass like global variables, CSS architecture, media query management, etc. The knowledge of web design fundamentals will also be learnt by the individuals.

The syllabus

Section 1: Course Introduction

  • HTML and CSS Course Overview 
  • Who is this for 
  • Web Developer Marketplace 
  • Web Developer Job Opportunities
  • 4 Skills of Successful Web Developer
  • Different Types of Web Developers
  • The Course Projects
  • Quiz: Course Intro Quiz

Section 2: Intro to HTML

  • HTML Quick Section Overview
  • What is HTML?
  • Environment Setup - installing Sublime Text
  • Structure of an HTML Document
  • HTML Heading and Paragraph Elements
  • HTML Imaged and Attributes
  • HTML Links
  • Quiz: HTML Quiz

Section 3: Styling with CSS

  • CSS Quick Section Overview
  • Intro to CSS - Why use CSS?
  • Inserting CSS into Code
  • Colors in CSS
  • CSS Selectors
  • CSS Properties - background, font, and border properties
  • CSS Box Model - intro to div element
  • Making Simple Box Model Layouts - using div elements
  • Incorporating Box Model into a Blog page
  • Relative vs. Absolute Positioning
  • Debugging your Code using Browser Tools
  • Quiz: CSS Quiz

Section 4: Basics of Web Design

  • Working with Fonts and Icons
  • Working with Colors
  • Working with Images
  • Whitespaces, Layout & User Experience (UX)
  • Secret to Making Great Websites
  • Quiz: Basics of Web Design Quiz

Section 5: Building a Website From Scratch

  • Rules to Design a Good Website
  • Project Requirements - Making Digital Services Agency Website
  • Overview of the Digisolve Project
  • Digisolve Project - Getting Started
  • Setting Up Fluid Grid
  • Building the Webpage Header
  • Building the More Info Button
  • Building the Logo + Menu
  • Building the About Us Page
  • Building the Portfolio Section
  • Building the Services Page
  • Building the Featured Clients Page
  • Building the Testimonials Section
  • Building the Popular Packages Page
  • Popular Packages Continued
  • Building the Contact Form
  • Building the Webpage Footer

Section 6: Making the Page Responsive

  • Using Media Queries - Part 1
  • Using Media Queries - Part 2
  • Browser Compatibility

Section 7: Adding Effects and Animation with jQuery

  • Intro to JQuery
  • Creating Sticky Navigation
  • Scrolling to target elements
  • Adding Animations without coding!
  • Adding Animations Continued

Section 8: Optimizing and Launching the Website

  • Optimizing Website Performance
  • Image Optimization
  • Minifying the Code
  • Launching the WebPage
  • SEO Mini Course

Section 9: CSS Under the Hood

  • How CSS works (Part 1)
  • How CSS works (Part 2)
  • How the Cascade Works
  • How CSS Calculates pixel values and renders a website

Section 10: Intro to SASS and NPM OFFICIAL

  • What is SASS
  • SASS Basic Principles - variables, nesting
  • SASS Basic Principles - mixins, extends, functions
  • Command line basics
  • What is NPM
  • Installing and Setting up SASS and NPM

Section 11: Best CSS Practices

  • How to Plan out your CSS
  • The BEM Model
  • An Ideal Folder and File Structure for a CSS Project
  • Different Types of Layouts

Section 12: Website Project Country Club Site

  • Lakeview Project Overview
  • Setting Up The Project
  • Creating Background Image for Header
  • Automatic page reload with NPM and live-server
  • Typography for Header
  • Creating Buttons for Header
  • Creating a Fluid Grid from Scratch
  • Building the About Section Part 1
  • Building the About Section Part 2
  • Building the About Section Part 3
  • Building The Club Amenities Part 1
  • Building The Club Amenities Part 2
  • Building The Contact Form Part 1
  • Building The Contact Form Part 2
  • Building The Contact Form Part 3
  • Building Membership Plan Part 1
  • Building Membership Plan Part 2
  • Building Membership Plan Part 3
  • Building The Testimonials Section Part 1
  • Building The Testimonials Section Part 2
  • Building The Testimonials Section Part 3

Section 13: Advanced Responsive Design

  • Media Quieries with SASS Part 1
  • Media Quieries with SASS Part 2
  • Media Quieries with SASS Part 3
  • Media Quieries with SASS Part 4
  • Making images responsive and optimized
  • Density Switching Using CDN
  • Ensuring Browser Support
  • Mobile First vs. Desktop First Design

Section 14: Flexbox

  • Intro To Flexbox Part 1
  • Intro To Flexbox Part 2
  • Project Overview for "Bizwizz" website
  • Setting up the "Bizwizz" Project
  • Creating the Header Section
  • Creating the Animated Button
  • Creating SVG Waves
  • Creating the Services Section
  • Downloading and using SVG icons
  • Creating the Meet Our Team Section
  • Creating an Image Gallery
  • Creating the Testimonials Section Part 1
  • Creating the Testimonials Section Part 2
  • Creating the Testimonials Section Part 3
  • Creating the Contact Section
  • Creating the CTA Section
  • Creating the Footer
  • Making the Page Responsive

Section 15: Starting a career As a Web Developer

  • Creating a Web Developer Resume
  • Contacting Recruiters
  • Getting Started with Freelancing
  • Personal Branding
  • Networking Do's and Don'ts

Instructors

Mr Juan E Galvan
Instructor
Freelancer

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Download the Careers360 App on your Android phone

Regular exam updates, QnA, Predictors, College Applications & E-books now on your Mobile

Careers360 App
150M+ Students
30,000+ Colleges
500+ Exams
1500+ E-books