Home
Courses
Blogs
Books
Internship
Services
Quizzes chevron_right Abouts chevron_right Contact T&C chevron_right Privacy Policy chevron_right Refunds Policy chevron_right
Login
Signup

Adding Styles Using CSS

Dear Sciaku Learner you are not logged in or not enrolled in this course.

Please Click on login or enroll now button.

If you have any query feel free to chat us!

Happy Coding! Happy Learning!

Lecture 36:- Adding Styles Using CSS

CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a HTML document. CSS can be used to control the layout, font, color, and other visual aspects of a web page.
CSS can be added to a HTML document in three ways:
1. Inline Styles: Inline styles are added directly to HTML elements using the style attribute. For example:
cssCopy code
<p style="color: blue;">This is a blue paragraph.</p>
1. Internal Styles: Internal styles are defined within the <head> section of a HTML document using the <style> tag. For example:
phpCopy code
<head> <style> p { color: blue; } </style> </head> <body> <p>This is a blue paragraph.</p> </body>
1. External Styles: External styles are stored in a separate .css file and are linked to the HTML document using the <link> tag. For example:
phpCopy code
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p class="blue">This is a blue paragraph.</p> </body>
The content of style.css file:
cssCopy code
.blue { color: blue; }
In CSS, styles are applied to HTML elements using selectors. Selectors can be based on the element type (e.g. p), class (e.g. .blue), or ID (e.g. #red). For example:
cssCopy code
p { color: blue; } .blue { color: blue; } #red { color: red; }
CSS can also be used to control the layout of a web page using the display, float, position, and flex properties. For example:
cssCopy code
header { background-color: lightgray; display: flex; justify-content: space-between; align-items: center; padding: 20px; } main { display: flex; justify-content: center; } aside { width: 200px; background-color: lightgray; padding: 20px; } footer { background-color: lightgray; text-align: center; padding: 20px; }

1. Getting Started with Basics

1. Welcome to Course
2. History Of Web
3. Client Server Architecture
4. Frontend And Backend
5. What Happens When You Visit a Website

2. Intro to HTML

1. Intro To Html
2. Creating First HTML Page
3. HTML Page Structure
4. What We Plan to Build
5. Title Tag
6. Basic HTML Tags
7. Unordered Lists
8. Ordered Lists
9. Adding Lists to Blog page
10. Adding Image to Blog Page
11. Adding Header To Blog Page
12. Learning Anchor Tag Part 1
13. Learning Anchor Tag Part 2

3. More On Html

1. Div Tag
2. Semantic Tags
3. Adding Internal Links to Web Page
4. Block vs Inline Elements
5. Text Formatting Tags
6. Special Characters
7. Adding Tables
8. More Attributes and Tags Related To Table

4. Forms

1. Creating a Simple Form
2. More Input Types
3. Attributes of form elements
4. Radio button and Checkbox
5. Select, Textarea and Button
6. Form Attributes
7. Media Tags
8. Favicon and Meta Tags

5. Intro To CSS

1. CSS Introduction
2. Blog Page Structure
3. Adding Styles Using CSS
4. Adding Styles Using External CSS
5. Preference of Rules
6. Chrome Dev Tools
7. Class Selector
8. ID Selector
9. Specificity of Selectors
10. Grouping and Nesting of CSS Selectors

6. Styling With CSS

1. Adding Color
2. CSS Units
3. How to Add Border to an Element
4. Text Styling
5. Adding Background to an Element
6. Margins
7. Padding
8. Display Property
9. Aside Section of Blog Page
10. Position Property
11. Box Model
12. Min Max Width

7. Starting With Resume Project

1. Resume Project Intro
2. HTML Structure Of Resume Project
3. Adding Header Background Image
4. Navigation
5. Adding Social Icons
6. About Section

8. Flex

1. Flex Intro
2. Flex direction
3. Flex Wrap
4. Flex Grow and Flex Shrink
5. Flex justify content
6. Align Content
7. Converting Resume Code to Flex
8. Resume Skills section and Heading
9. Creating Skill indicators

9. Completing Resume

1. Overflow-Wrap
2. Gradients
3. Link Related Pseudo Classes
4. Lightbox Animation
5. Pseudo Elements
6. Using Before and After Pseudo elements
7. Work Experience Section - 1
8. Work Experience Section - 2

10. Responsive Designs

1. What and Why of Responsive Designs
2. Different ways to make Responsive.
3. Measurement Units for Responsive Designs
4. Viewport Meta Tag
5. Media Queries
6. Desktop First vs Mobile First
7. Desktop First vs Mobile First
8. Responsiveness Check on Resume
9. Media Queries on Resume

11. Animations And 3d Space

1. Transitions and Transforms
2. Creating a Simple Animation
3. Animation Property
4. Multiple Animations
5. Animate.css
6. Starting with 3D Cube Animation
7. Building Second Face of Cube

12. Bootstrap

1. What are Frontend Frameworks
2. Getting Started with Bootstrap
3. Adding Bootstrap to your Project
4. Bootstrap Breakpoints
5. Bootstrap Grid System
6. Code Using Bootstrap Grid System
7. Margin and Display Utilities
8. Other Utility Classes
9. Bootstrap Components
10. Modals
11. Collapse Component
12. Nav
13. Navbar
14. Jumbotron Template

13. Major Project 1

1. Web Design Process
2. CSS Variables
3. CSS Variables Scope
4. Project Demo Video

14. Git

1. What is Git
2. Git Commits
3. Git Commits Part 2
4. Git Understanding Branches
5. Git Making Branches
6. Git Merging Branches
7. Git Conflicts in Branches
8. Git Understanding Workflows
9. Pushing to github.com
10. Github With a Team Member
11. Git - Multiple Teams - Forking
12. Completing with PR Open Source Contribution
13. Pull Requests and Workflows of Large Teams

15. Starting with JavaScript

1. Intro to Javascript
2. History of JavaScript
3. Chrome Dev Tools
4. Variables
5. Null vs Undefined
6. Type of Operator
7. Operators
8. Type Coercion - Some Unexpected Answers
9. ==vs==
10. Conditionals
11. Loops

16. JavaScript - Functions and Array

1. Functions
2. Variable Length Arguments
3. Function Hoisting
4. Functions and Scope
5. Function within Function
6. Function Expressions
7. Function Declaration vs Expressions
8. Passing function as arguments
9. Arrays
10. Functions on Arrays
11. Splice function
12. Iterating over arrays

17. Objects and Timing Events

1. Objects
2. Square Bracket Notation
3. Deleting Properties
4. How are Objects Stored
5. Iterating Over Objects
6. Nested Objects
7. Arrays and Objects
8. Iterating over array using for in
9. Timing Events
10. Countdown Timer

18. Understanding DOM

1. DOM
2. Accessing DOM
3. Fetching Elements
4. Event Handling
5. Script Tag
6. External JS File
7. Other Mouse and Keyboard Events
8. Propagation of Event
9. Strict Mode
10. More on Strict Mode

19. Calculator Project

1. VS Code
2. Calculator Demo
3. Hint - Calculator

20. Mini Project Using JavaScript

1. Const
2. Let
3. Let vs Var
4. For of loop
5. Smooth Scroll Demo
6. Smooth Scroll Hint 1
7. Smooth Scroll Hint 2
8. Smooth Scroll Solution
9. Another Approach to Write Code
10. Skill Bar Demo
11. Moving Ahead with Skill Bar Auto Fill
12. Competing Skill Bar Auto Fill
13. Counter Demo
14. Counter Hint

21. Closures

1. Revisiting Old Concepts - Window Object
2. Revisiting Old Concepts - Scopes
3. Avoid Global Variables
4. IIFE
5. Let vs IIFE
6. Closures
7. More on Closures
8. Closures and let
9. Let in for loops
10. Arrow Functions
11. Bindings in Arrow Function

22. Constructors And Prototypes

1. Intro to Lecture
2. This Keyword
3. This in Strict Mode
4. Function to create Objects
5. Constructor
6. Adding Behaviour to Objects
7. What is a Prototype
8. Why Prototypes
9. More Properties around Prototype
10. Objects
11. object vs Object()
12. Class
13. Class Expressions and Hoisting
14. Inheritance Using Classes

23. Project - Ping Pong Game

24. Jquery

1. Introduction to JQuery
2. Writing Code Using Jquery
3. Modifying CSS Using Query
4. Event Handling Using JQuery
5. Explore JQuery

25. Ajax

1. Client Server Communication
2. Ajax - Understanding the Name
3. HTTP
4. API & JSON
5. Ajax Request
6. Ajax Request With jQuery
7. Handling Errors
8. Courses Api
9. Authenticated Api Requests - NASA Api
10. Notes - Ajax

26. Promises

1. What is a Promise
2. Passing Parameters to Resolve Reject
3. Chaining Requests

27. Nodejs - The Beginning

1. Introduction to the course
2. Getting Our Tools Right!
3. Setting Up The Tools
4. The Terminal
5. Hello Node.js
6. Modules
7. Summarizing It

28. Node.js Writing - Our First Server

1. Server - What & How
2. Setting Up Our First Node.js Server
3. Serving a Response to the Browser
4. Understanding Responses
5. Serving HTML!
6. Reading and Serving HTML From a File
7. Nodemon, Automatic Server Restarts
8. Extending to Multiple Pages
9. Linking Pages & Mini Assignment
10. Summarizing!

29. My First Express App - A List Of Contacts!

1. Web Frameworks - A Quick Introduction
2. Understanding MVC Models, Views, Controllers
3. Why Express.js
4. Setting Up Express Server
5. Returning Response From The Server
6. HTTP Requests
7. Template Engines - What
8. Template Engines - Some Examples
9. Setting Up A Template Engine
10. A Quick Revision
11. Debugging Basics
12. Rendering Our First Page
13. Playing With EJS
14. Locals In Views
15. Summarizing

30. My First Express App - Continued

1. Introduction
2. Creating A Contact List
3. Sending Data To The Server
4. Parsing Form Data - Introduction
5. Parsing Form Data - Storing The Contact
6. Middleware - What and How
7. Accessing Static Files
8. Styling Our App
9. A Quick Revision
10. Query & String Parameters - Beginning
11. Query & String Parameters - Details
12. Deleting A Contact
13. Summarizing

31. My First Express App - Intro To Databases

1. Databases - An Introduction
2. SQL & NoSQL Databases
3. Why MongoDB
4. MongoDB Terms
5. Installing MongoDB, Robo3T and mongo
6. Connecting to MongoDB using mongoosejs
7. Creating the DB Schema
8. Populating the DB
9. Fetching Data from DB
10. Deleting From DB
11. Summarizing

32. Beginning The Major Project 1

1. Introduction
2. Setting Up Directory Structure
3. Starting Express
4. Adding Git and NPM Start
5. Setup the Express Router
6. Create a Controller
7. Create Another Controller and Router
8. Assignment adding more routes and controllers
9. Install EJS and Setup View Engine
10. Create a view for home
11. Summary

33. Major Project -1

34. Manual Authentication

1. Introduction
2. Setting up User Schema
3. Rendering Pages for Sign up and Sign in
4. Creating Forms for Sign up and Sign in
5. Explaining Cookies
6. Creating and Altering a Cookie
7. User Sign Up
8. User Sign In
9. Show Details of Signed in User
10. Summarizing Manual Authentication

35. Authentication Using Passport js

1. Introduction
2. Glancing through and Installing Passportjs
3. Setting up Passport.js
4. Express sessions and using passport for Authentication
5. Setting current authenticated user
6. Passing User data to views and restricting page access
7. Setting up Mongo store for session cookies
8. Creating Sign out
9. Summarizing

36. SASS

1. Introduction
2. SCSS or SASS
3. Setting up SCSS
4. Using SCSS + Mini Assignment
5. Summarizing

37. Database Relations (Posts, Comments)

1. Introduction
2. Node.js - Explaining 1-1 and 1-M
3. Creating Schema for Posts
4. Saving Posts to the DB
5. Display Posts and related User
6. Check Authentication on Creating Post
7. Creating Schema for Comments
8. Adding Comments to the DB
9. Nested Population - Display Comment and Related User
10. Learning storage in SQL databases
11. Summarizing

38. Deleting And Updating Objects in Database + Distributing Views

1. Introduction
2. Deleting a Post (Authorized)
3. Deleting a Comment (Authorized)
4. Distributing the Code into Partials
5. User profile links
6. Updating a User's Profile
7. Improving SCSS of Home Page
8. Summary

39. Async Await + Error Handling

1. Introduction
2. Converting to Async Await
3. Converting more code to Async Await
4. Flash Messages - Introduction
5. Creating Flash Messages
6. Introducing Noty
7. Adding Flash Messages to more Actiions
8. Summarizing

40. Converting To Ajax

1. Introduction
2. Creating a Post - Sending Data
3. Creating a Post - Receiving Data
4. Deleting a Post
5. Task
6. Summary

41. File Upload

1. Introduction to Uploading Files
2. Uploading Files - How Does It Work
3. Installing Multer + Documentation
4. Configuring Multer for User Avatar
5. Saving File from Params
6. Showing the Avatar, Connecting the Dot
7. Edge Case - Replacing an Avatar
8. Summarizing File Uploads

42. APIs (Making APIs And JWT Authentication)

1. Introduction - APIs - Why and What
2. The Postman
3. Setting Up The Directory Structure
4. Rendering an API
5. Playing with APIs
6. Authentication With APIs - JWT
7. Setting Up Passport JWT
8. Creating a Token
9. Authentication and Authorization
10. Summarizing APIs

43. Social Authentication (Mini Lecture)

1. Introduction - Social Authentication - Why
2. Creating Credentials on Google
3. Social Authentication - How does it work
4. Setting up Passport - Google - oAuth
5. Using Google Auth - With a Link
6. Summarizing Google Sign In

44. Parallel Jobs + Mailer

1. Introduction - Mailers
2. Setting up Nodemailer
3. Sending Our First Email via SMTP
4. Send HTML Template Emails
5. Introduction to Delayed Jobs
6. Installing an understanding Kue
7. Setting up Kue and Using it
8. Forgot Password
9. Summarizing Mailers and Delayed Jobs

45. Friends + Likes

1. Introduction - New Relationships In Databases
2. Polymorphic Relations
3. Schema Setup - Likes
4. Actions and Routes - Likes
5. Code Activity Solution - Making Likes Functional
6. Making Friendships
7. Understanding the Code - Friendships
8. Summarizing Relationships

46. Chatting Engine

1. Introduction - Server Side Events
2. Reaching Sockets
3. Understanding the Chat Box
4. Setting Up Socket.io
5. Beginning the Initial Connection
6. Time to Create and Join Chat Rooms
7. Finally, Let's Send and Receive Message
8. Summarizing Chat Engine and Sockets

47. GULP - Getting Deployment Ready

1. Introduction to Production Environment
2. Beginning Creating Environment
3. Environment Variables - Production Environment
4. Logging For Production
5. Understanding Gulp - CSS Minification
6. Completing Gulp - JS and Image Minification
7. View Helpers
8. Summarizing Production Setup

48. Deployment

1. Deployment - Introduction to Production
2. AWS - Introduction + Launching Our First Match
3. SSH - Setting Up The Machine
4. Pulling the Code
5. NGINX
6. Masking the Domain On Our IP
7. Summarizing It All

49. Beginning The Major Project - 2

1. Major Project -2 Introduction
2. Understanding Partials in Views
3. Understanding Layouts in Views
4. Implementing Partials
5. Creating a Layout
6. Setting Up Static Files Access
7. Static Files For Pages
8. Linking our MongoDB using Mongoose
9. Summary of this full stack web development course

2 Comments

niteshguptav63 Nov 17, 2024 at 1:39 PM

I am not able to access videos from second class and further. I have already completed first class

niteshguptav63 Nov 16, 2024 at 10:56 AM

When will I get my course?

admin79 Nov 17, 2024 at 1:29 PM

Now, Your query was resolved.

Frequently Asked Questions About Sciaku Courses & Services

Quick answers to common questions about our courses, quizzes, and learning platform

How do I register on Sciaku.com?

Course Related 1 min read

expand_more

To register on Sciaku.com, click on the "Signup" button on the homepage, fill in the required information, and create your account. Once registered, you can log in using your credentials.

Still need help? Contact us

How can I enroll in a course on Sciaku.com?

Course Related 1 min read

expand_more

After logging in, browse the available courses, and click on the desired course. On the course page, click the "Enroll" button. You'll gain access to the course materials and resources.

Still need help? Contact us

Are there free courses available on Sciaku.com?

Course Related 1 min read

expand_more

Yes, Sciaku.com offers a variety of free courses. You can explore and enroll in these courses without any payment.

Still need help? Contact us

How do I purchase a paid course on Sciaku.com?

Course Related 1 min read

expand_more

To purchase a paid course, click on the course you're interested in, and choose the "Purchase" option. Follow the on-screen instructions to complete the payment process securely.

Still need help? Contact us

What payment methods are accepted on Sciaku.com?

Course Related 1 min read

expand_more

Sciaku.com accepts various payment methods, including credit/debit cards and other secure online payment options. Ensure your preferred payment method is supported during the checkout process.

Still need help? Contact us

How will I access the course content after purchasing a course?

Course Related 1 min read

expand_more

Upon successful payment, you will be granted access to the course immediately. Simply log in to your account, go to the "My Courses" section, and start learning from the course materials.

Still need help? Contact us

How long do I have access to a purchased course on Sciaku.com?

Course Related 1 min read

expand_more

Once you've purchased a course, you'll have lifetime access to it. You can revisit the course materials and resources at any time.

Still need help? Contact us

How do I contact the admin for assistance or support?

Course Related 1 min read

expand_more

If you need assistance, contact our support team by navigating to the "Contact Us" page. Fill out the form, and our admin will respond to your inquiries promptly.

Still need help? Contact us

Can I get a refund for a course I've purchased?

Course Related 1 min read

expand_more

Refund policies may vary. Please refer to our "Refund Policy" page for detailed information on the conditions and process for obtaining a refund.

Still need help? Contact us

How does the admin grant access to a course after payment?

Course Related 1 min read

expand_more

Upon successful payment, our admin team will verify the transaction, and once confirmed, they will grant you access to the purchased course. This process is typically completed within a short period.

Still need help? Contact us

Didn't find what you're looking for?

help_center Contact Support

Sciaku (सियाकु)

Sciaku (सियाकु) provides you a technical and programming content like Java Programming, Python Programming, C Programming,Android Development, Web Development, etc. Learn how to make software, website, and applications here and also we have industrial internship for you.

Important Links

Useful links

Contact

G20, Gopal Vihar Colony, Noida Sector 2, Uttar Pradesh, India, 201301

[email protected]

Copyright © 2022-2025 Created by ❤️ Sciaku

Privacy Policy | Terms & Conditions | Refunds Policy

Free Technical | Programming Courses with Certificates | Sciaku

Logout

Explore Sciaku - Home

Discover Free Online Courses

Read Latest Tech Articles and Tutorials

Access Best Free Books and Resources

Internship

Login to Your Sciaku Account

Create a Sciaku Account

If you complete this course goto My learning.