- 5 hours on-demand video
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Basic styling of web pages using CSS3
- Manipulate the display and position of HTML elements
- Understand the Box Model concept
- Introduction into Responsive Design
- Design mobile friendly web pages using CSS Media Queries
- Animate HTML elements using CSS animate property
- Web page Layouts - CSS Flex Box and CSS Grid
Hey guys, in this module we will learn all about CSS right from the basic topics like styling texts and images to advanced topics like responsive design and CSS animations.
After completing this module you will be able to convert your normal HTML structure to a beautiful static web page with a nice touch of animations which will make it more interesting!
This is the introductory video of CSS. In this video, we will talk about
What is CSS?
What is the syntax for CSS?
What are selectors?
What are the different ways to select the HTML element?
Hope you are excited!!
Hey guys, please find below the details and styles required for the project.
All the Best!!
font-family: Arial, sans-serif;
color: rgba(0, 0, 0, 0.87)
border: 1px solid #dfe1e5;
Search Box: OnHover and OnFocus
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
background color #f2f2f2
padding: 0 16px;
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0,0,0,0);
border: 1px solid #c6c6c6;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
Dropdown Application Card:
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
App Item: On-Hover
border: 1px solid rgba(0, 0, 0, 0.2);
App Item Image:
App Item Label:
Google Center Logo: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
Voice Search Icon: https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png
App - Google Search: http://pluspng.com/img-png/google-logo-png-open-2000.png
App - Maps: http://pluspng.com/img-png/google-maps-png-google-maps-icon-1600.png
App - Drive: https://upload.wikimedia.org/wikipedia/commons/d/da/Google_Drive_logo.png
App - Calendar: https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Google-calendar.svg/1024px-Google-calendar.svg.png
App - Photos: https://blogs.acu.edu/innovation_foundry/files/2017/06/google_photos1600.png
App - Keep: https://i.pinimg.com/originals/09/96/92/099692d1d651d51b7caf3040fce0f748.png
App Menu Icon:
Use Google Material Icons:
Add this in HTML head element: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Use this to generate icon: <i id="dropdown-menu" class="material-icons">apps</i>
- Basic understanding of HTML5
****UPDATE [06-July-2020]: New Content Added!!!!!****
Around 25+ NEW video content added
New Sections added on:
If you are new to web development but you have a little bit of knowledge of HTML and its tags and want to take the next step towards becoming the professional frontend web developer, then this is the right course for you.
Here, we have covered everything right from basics to advanced concepts of CSS3. We have included all the properties in CSS + the newly introduced ones in CSS3 that will help shape the future of web development in the coming years. This course is designed bearing in mind that a beginner should be able to understand what is CSS and how it is used to turn a raw, basic, black & white HTML webpage structure into a beautiful web page. To make web pages interactive for users, you will also learn how to animate the various HTML elements.
By the end of this course, you will be able to design beautiful, user-friendly, and mobile-friendly websites from scratch, all on your own.
PS: More lectures will be uploaded soon.
- Beginners who are new to Web Development
- Freshers who want to learn CSS3 from scratch
- Web Developers who want to brush up the concepts of CSS