Responsive Header with fixed background images using HTML & CSS (in Sinhala)
Responsive Header with fixed background images using HTML & CSS (in Sinhala)
CSS Font & Google fonts: • CSS Font & Google fonts : Unlocking Typogr...
CSS Transitions : • CSS Transitions full course with examples ...
CSS Flexbox video : • CSS Flexbox Tutorials Sinhala
CSS nth child selectors : • CSS nth child selectors: Complete guide in...
CSS Media queries : • CSS Media queries incl. screen orientation...
CSS max width & min-width : • CSS max width & min-width for responsive w...
Responsive Fonts Clamp : • Responsive typography aka responsive fonts...
HTML Beginner playlist : • HTML Beginner Tutorials Sinhala
CSS Beginner playlist : • CSS Beginner tutorials Sinhala
CSS Mastering playlist : • Mastering CSS techniques Sinhala
JavaScript Beginner playlist : • Javascript Beginner tutorials Sinhala
JavaScript Mastering playlist : • Mastering Javascript Sinhala
CSS Flexbox playlist : • CSS Flexbox Tutorials Sinhala
CSS Grid playlist : • CSS Grid Tutorials Sinhala
Mastering JavaScript playlist : • Mastering Javascript Sinhala
Complete website build : • Build a complete Website HTML CSS Javascri...
Responsive websites playlist : • Responsive websites by using HTML & CSS fr...
Visual Studio Code editor tutorial : • Visual Studio Code Tutorial and Live Serve...
Welcome to MCodes Frontend YouTube channel. As a passionate Senior frontend developer my mission is to give you a better understanding of frontend technologies like HTML , CSS and UI, UX concepts
🌐 ABOUT THIS VIDEO
This video will explain how to build a responsive header by using HTML and CSS.
Also I am bringing up a couple of new cool CSS tricks such as media queries, flexbox concepts, responsive fonts such as Clamp, padding block, margin-inline, and many more. 😎 💪
Code editor : Visual code editor
⏱️ Timestamps
00:00 - Intro
01:48 - mockup brief
02:26 - HTML
08:49 - CSS
21:40 - background images
27:00 - media queries
34:47 - Wrap up
36:03 - Outro
Hope you have enjoyed this video. Please leave a comment 😎
Please don't forget to Like the video, subscribe to the channel and press the bell icon as well 🙂 🙂
🌐 Related tags
#mcodesfrontend #sinhalatutorials #css #webdevelopment