-
Introduction to the BootCamp 3
-
What you will learn 05 minLecture1.1
-
Teaching Methodology 05 minLecture1.2
-
Starting with Networks 03 minLecture1.3
-
-
Understanding The Internet 14
-
What is the Internet? 02 minLecture2.1
-
A Simple Computer Network 03 minLecture2.2
-
From Simple Network to the Internet 06 minLecture2.3
-
Understanding Internet Protocols 05 minLecture2.4
-
Internet Protocol (IP Address) and Domain Name Service (DNS) 04 minLecture2.5
-
Clients and Servers and How They Interact 04 minLecture2.6
-
Data Packets, Routing and Reliability 06 minLecture2.7
-
What is HTTP? 02 minLecture2.8
-
HTTP and other Protocols 02 minLecture2.9
-
Client – the User Agent 03 minLecture2.10
-
The Web Server 02 minLecture2.11
-
Anatomy of an HTTP Request 02 minLecture2.12
-
Anatomy of an HTTP Response 02 minLecture2.13
-
Section Quiz 10 questionsQuiz2.1
-
-
Intro to HTML - HyperText Markup Language 73
-
Introduction to HTML 04 minLecture3.1
-
Hypertext Markup Language – What does it really mean? 02 minLecture3.2
-
What are Tags? 05 minLecture3.3
-
How Browsers Work 03 minLecture3.4
-
Basic HTML Structure 05 minLecture3.5
-
Sample Document 02 minLecture3.6
-
Nested HTML Elements 04 minLecture3.7
-
Types of HTML Tags 11 minLecture3.8
-
Installing a Code Editor 04 minLecture3.9
-
Creating an Index File 03 minLecture3.10
-
Features and Benefits of VsCode 05 minLecture3.11
-
Empty HTML Elements 04 minLecture3.12
-
HTML Attributes 05 minLecture3.13
-
Width, Height, Cases & Quotes 05 minLecture3.14
-
Alt Attribute 03 minLecture3.15
-
Style Attribute 02 minLecture3.16
-
Adding Multiple Style Properties 05 minLecture3.17
-
Tooltip 03 minLecture3.18
-
HTML Comments 04 minLecture3.19
-
Section Quiz 10 minLecture3.20
-
Navigation Menu 03 minLecture3.21
-
HTML Links 04 minLecture3.22
-
From Webpages to Website 09 minLecture3.23
-
Absolute Vs Relative URL 04 minLecture3.24
-
Relative URL Referencing 08 minLecture3.25
-
Target Attribute 02 minLecture3.26
-
Image Linking 04 minLecture3.27
-
Lists 04 minLecture3.28
-
List Markers 07 minLecture3.29
-
Section Quiz 15 minLecture3.30
-
Description List 07 minLecture3.31
-
Creating Bookmarks 08 minLecture3.32
-
Image Floating 05 minLecture3.33
-
Background Image and Centering in HTML 08 minLecture3.34
-
HTML Table 07 minLecture3.35
-
Adding Images to Tables 04 minLecture3.36
-
Inline and Internal CSS in HTML 11 minLecture3.37
-
External CSS 08 minLecture3.38
-
CSS Precedence 03 minLecture3.39
-
Applying CSS To Table Head 06 minLecture3.40
-
Table Center 02 minLecture3.41
-
Styling Multiple Elements 04 minLecture3.42
-
Styling with nth-child 04 minLecture3.43
-
Vertical Zebra Styling 02 minLecture3.44
-
Overlapping Zebra Style 01 minLecture3.45
-
Border Values 05 minLecture3.46
-
Quiz 10 minLecture3.47
-
Colspan 04 minLecture3.48
-
Rowspan 03 minLecture3.49
-
Using Table Layout in Web Design 05 minLecture3.50
-
HTML Forms 06 minLecture3.51
-
Binding Labels to Input Field 05 minLecture3.52
-
Increasing Hit Area & Accessibility 04 minLecture3.53
-
Submitting HTML Forms 04 minLecture3.54
-
Adding Value to Database 04 minLecture3.55
-
Providing Default Value for Text Input 02 minLecture3.56
-
Section Quiz 10 minLecture3.57
-
Reset Button & Date Submission 07 minLecture3.58
-
Using Image as Submit Button 03 minLecture3.59
-
File Upload With HTML 03 minLecture3.60
-
Slider & Volume Control 02 minLecture3.61
-
Numeric Input Field 02 minLecture3.62
-
Search Field 03 minLecture3.63
-
Telephone Field 05 minLecture3.64
-
Appointment Booking & URL Input Field 05 minLecture3.65
-
Securing User Data With POST 07 minLecture3.66
-
Dropdown Menu 05 minLecture3.67
-
TextArea 03 minLecture3.68
-
Password Field 02 minLecture3.69
-
Adding a Color Palette 02 minLecture3.70
-
Grouping Forms 02 minLecture3.71
-
Forms & Javascript 02 minLecture3.72
-
Section Quiz 10 minLecture3.73
-
-
Advanced HTML 28
-
HTML Block-level Element 04 minLecture4.1
-
HTML Inline Elements 05 minLecture4.2
-
Block-level Elements Demo 03 minLecture4.3
-
Intro to HTML DIV & SPAN 03 minLecture4.4
-
Aligning a DIV Element 04 minLecture4.5
-
Positioning DIV Elements with Float 05 minLecture4.6
-
DIV as Inline-Block Element 02 minLecture4.7
-
CSS Flex Layout 04 minLecture4.8
-
Embedding Forms & Pages in HTML 05 minLecture4.9
-
Iframe Border 01 minLecture4.10
-
Iframe as Target Frame 02 minLecture4.11
-
Embedding YouTube in Your Website 04 minLecture4.12
-
Metadata – Keywords 05 minLecture4.13
-
Metadata – Author, Charset, Viewport 03 minLecture4.14
-
Responsive Images 07 minLecture4.15
-
HTML Entities 05 minLecture4.16
-
Non-Breaking Space 05 minLecture4.17
-
HTML Emojis 03 minLecture4.18
-
Responsive Images for Multiple Devices 06 minLecture4.19
-
Favicon 05 minLecture4.20
-
Hosting Your Own Video 08 minLecture4.21
-
Hosting Podcasts, Songs and Audio Files 05 minLecture4.22
-
Tools for Front-End Development – Getting Image 04 minLecture4.23
-
Tools for Front-End Development – Resizing Images 04 minLecture4.24
-
Tools for Front-End Development – Background remover & Circle Image 04 minLecture4.25
-
Brand Colors 05 minLecture4.26
-
Selecting Matching Colors 05 minLecture4.27
-
Checkpoint : Project 1 – A Personal Portfolio Website 10 minLecture4.28
-
-
Intro to CSS - Cascading Style Sheet 71
-
Intro to CSS & Precedence 08 minLecture5.1
-
CSS Syntax 06 minLecture5.2
-
CSS Class Selector 03 minLecture5.3
-
Target Selectors 03 minLecture5.4
-
Star & Grouping Selector 02 minLecture5.5
-
Comments & Colors 05 minLecture5.6
-
Background Color 05 minLecture5.7
-
Opacity 03 minLecture5.8
-
Background Image 02 minLecture5.9
-
Repeat & Positioning 05 minLecture5.10
-
Scrolling Images 02 minLecture5.11
-
CSS Shorthand 03 minLecture5.12
-
CSS Background Image Sizing 05 minLecture5.13
-
Expanding Border Color 06 minLecture5.14
-
Expanding Border Style 03 minLecture5.15
-
Border Radius 02 minLecture5.16
-
Margin 08 minLecture5.17
-
Padding 04 minLecture5.18
-
Width & Height 06 minLecture5.19
-
CSS Box Model 07 minLecture5.20
-
CSS Outline 04 minLecture5.21
-
Using Google Inspect With CSS 04 minLecture5.22
-
Layout Debugging with Pesticide 09 minLecture5.23
-
Text Styling – Inline Block 05 minLecture5.24
-
Text-Decoration 02 minLecture5.25
-
Using Line-through 05 minLecture5.26
-
Font Families 06 minLecture5.27
-
Choosing Fonts Based on Project Niche 03 minLecture5.28
-
How to Apply Websafe Fonts 06 minLecture5.29
-
Font Style, Weight & Variant 03 minLecture5.30
-
Font Pairing 04 minLecture5.31
-
Applying Font Pairing 02 minLecture5.32
-
Font Shorthand 02 minLecture5.33
-
Link Styling with CSS Props 03 minLecture5.34
-
Link Styling with States 05 minLecture5.35
-
Link Styling with Text Decoration 02 minLecture5.36
-
Advanced Link Styling 07 minLecture5.37
-
Unordered List Marker Styling 04 minLecture5.38
-
Ordered List Marker Styling 02 minLecture5.39
-
Image List Marker 02 minLecture5.40
-
Links to Nav with CSS 04 minLecture5.41
-
Display Property for Page Layout 04 minLecture5.42
-
Display Block, Inline & Flex 04 minLecture5.43
-
Inline-block vs Block 03 minLecture5.44
-
Display none Vs Visibility hidden 03 minLecture5.45
-
Position Property for Page Layout 06 minLecture5.46
-
Position Fixed 02 minLecture5.47
-
Position Absolute 02 minLecture5.48
-
Sticky Elements 02 minLecture5.49
-
CSS Opacity Property 03 minLecture5.50
-
Opacity on Hover 02 minLecture5.51
-
Opacity & Positioning 02 minLecture5.52
-
Z-index Minus One 03 minLecture5.53
-
Z-index Stacking 01 minLecture5.54
-
Handling Content Overflow 04 minLecture5.55
-
CSS Pseudo class 02 minLecture5.56
-
Pseudo Class on Div 02 minLecture5.57
-
Aligning Images in Div 02 minLecture5.58
-
Tooltip with Pseudo Class 04 minLecture5.59
-
Horizontal Nav Menu 06 minLecture5.60
-
Separating a Menu Item 03 minLecture5.61
-
Vertical Nav Bar 04 minLecture5.62
-
Positioning Vertical Nav Bar 03 minLecture5.63
-
CSS Dropdown 08 minLecture5.64
-
Dropdown Box 05 minLecture5.65
-
Dropdown Button with Links 09 minLecture5.66
-
Image Aspect Ratio 05 minLecture5.67
-
Image Dropdown 05 minLecture5.68
-
Horizontal Navigation Menu 05 minLecture5.69
-
Dropdown Navigation Menu 09 minLecture5.70
-
Image Gallery 07 minLecture5.71
-
-
Advanced CSS 49
-
CSS Transformation 06 minLecture6.1
-
3D Transformation 03 minLecture6.2
-
CSS Transition 05 minLecture6.3
-
Transition Speed Curve 02 minLecture6.4
-
Transition Delay 01 minLecture6.5
-
Transition Transform 02 minLecture6.6
-
Applying Style to Form Input 04 minLecture6.7
-
Styling Textarea 03 minLecture6.8
-
Grouping Forms With Div 04 minLecture6.9
-
Styling Submit Button 03 minLecture6.10
-
Color Form Input & Focus Pseudo-state 03 minLecture6.11
-
Border Styles for Forms 02 minLecture6.12
-
Search Input & Button Styling 02 minLecture6.13
-
Adding a Search icon 02 minLecture6.14
-
Animating an Input Field 02 minLecture6.15
-
Styling the Select Dropdown 02 minLecture6.16
-
Intro to CSS Animation 07 minLecture6.17
-
Applying Animation to Other Elements 01 minLecture6.18
-
Increasing Animation Range 01 minLecture6.19
-
Animating Multiple Properties 02 minLecture6.20
-
Animation Delay 02 minLecture6.21
-
Animation Iteration and Infinite Loop 02 minLecture6.22
-
Changing Motion Direction 02 minLecture6.23
-
Animation Speed Curve 01 minLecture6.24
-
Bouncing Effect 03 minLecture6.25
-
Animation Shortcut 02 minLecture6.26
-
Tooltip Advanced 08 minLecture6.27
-
Positioning Box Theory 05 minLecture6.28
-
Positioning Top & Bottom 02 minLecture6.29
-
Understanding Pseudo Elements 04 minLecture6.30
-
Pseudo-elements : First letter 01 minLecture6.31
-
Combining Pseudo-elements 01 minLecture6.32
-
Marker & Selection Pseudo-element 02 minLecture6.33
-
Before & After Pseudo-element 03 minLecture6.34
-
Creating a Speech Bubble 06 minLecture6.35
-
Positioning the Tooltip Arrow 04 minLecture6.36
-
Creating Image Thumbnails 03 minLecture6.37
-
Clickable Image Thumbnails 03 minLecture6.38
-
Rounded Images 01 minLecture6.39
-
Flipping Image 03 minLecture6.40
-
Text Over Image 05 minLecture6.41
-
Image Overlay 08 minLecture6.42
-
Centering Overlay Text 04 minLecture6.43
-
Box Overlay 04 minLecture6.44
-
Adjusting Box Overlay 03 minLecture6.45
-
Slide in Overlay | Implicit Vs Explicit Properties 07 minLecture6.46
-
Slide in Overlay – Sides 05 minLecture6.47
-
Pagination 06 minLecture6.48
-
Styling Pagination 04 minLecture6.49
-
-
Introduction to JavaScript 30
-
What is JavaScript? 02 minLecture7.1
-
Features & Applications of JavaScript 03 minLecture7.2
-
Development Environment 06 minLecture7.3
-
Linking JS Inline 03 minLecture7.4
-
Internal JS 03 minLecture7.5
-
External JS 06 minLecture7.6
-
What is Nodejs? 05 minLecture7.7
-
Installing Nodejs 03 minLecture7.8
-
Running Nodejs in VS Code 05 minLecture7.9
-
Installing a Local Server Environment 03 minLecture7.10
-
Benefits of Developing on a Local Server 05 minLecture7.11
-
Live Preview 02 minLecture7.12
-
Changing HTML Content with JS 07 minLecture7.13
-
Changing HTM Attr. Value with JS 04 minLecture7.14
-
Changing CSS with JS 02 minLecture7.15
-
Changing More CSS Properties 02 minLecture7.16
-
Using JS to Hide Elements 03 minLecture7.17
-
JS Syntax 05 minLecture7.18
-
Code Block 05 minLecture7.19
-
Variable Declaration & Initialization 06 minLecture7.20
-
Declaring, Initializing & Multiple Variables in a Statement 03 minLecture7.21
-
Varying Variables 02 minLecture7.22
-
Constant Variable 02 minLecture7.23
-
Identifier Rules 06 minLecture7.24
-
Assignment Vs Equal To 03 minLecture7.25
-
JS Comment 03 minLecture7.26
-
Understanding JS Data Types 04 minLecture7.27
-
Strings & Numbers 04 minLecture7.28
-
BigInt 04 minLecture7.29
-
Boolean 01 minLecture7.30
-
This content is protected, please login and enroll course to view this content!
Leave A Reply Cancel reply
You must be logged in to post a comment.
3 Comments
Good morning Engr,
I think it is a scale() function sir.
Sir, how can you make the image to only scale inside that div container, without the div container increasing or moving
Just make sure the container’s size is fixed, and use overflow: hidden, to ensure the image doesn’t display past the size of the container.
Example:
.thumbnail-container {
width: 200px; /* Set your desired width */
height: 150px; /* Set your desired height */
overflow: hidden; /* Hide the overflowing part of the image */
position: relative;
}
.thumbnail-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the container proportionally */
transition: transform 0.3s ease;
}
.thumbnail-container:hover img {
transform: scale(1.1); /* Scales the image slightly on hover */
}