Media is too big
VIEW IN TELEGRAM
9. Creating Base CSS File & Variables
Emma demonstrates creating multiple CSS files to share style declarations and avoid duplicate code. Utilizing CSS variables to create style values that are reusable, readable, and easier to update is also covered in this segment.
#lesson
Emma demonstrates creating multiple CSS files to share style declarations and avoid duplicate code. Utilizing CSS variables to create style values that are reusable, readable, and easier to update is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Layout Methods History
Emma discusses previously used methods for laying out elements on web pages. The use of the table element, the display property, and floats are covered in this segment.
#lesson
Emma discusses previously used methods for laying out elements on web pages. The use of the table element, the display property, and floats are covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Flexbox & Grid
Emma demonstrates the effects of flexbox properties, including flex-direction, justify-content, align-items, and flex-wrap. Defining a layout using a grid display is also covered in this segment.
#lesson
Emma demonstrates the effects of flexbox properties, including flex-direction, justify-content, align-items, and flex-wrap. Defining a layout using a grid display is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Combinators
Emma demonstrates how to create relationships between selectors by combining selectors. Descendent selectors, child, and general sibling combinators are covered in this segment.
#lesson
Emma demonstrates how to create relationships between selectors by combining selectors. Descendent selectors, child, and general sibling combinators are covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Block Element Modifier (BEM)
Emma discusses design methodologies used to organize CSS code. The block element modifier methodology helps create reusable components and will be the methodology used in this course.
#lesson
Emma discusses design methodologies used to organize CSS code. The block element modifier methodology helps create reusable components and will be the methodology used in this course.
#lesson
Media is too big
VIEW IN TELEGRAM
14. CSS Header
Emma walks through styling the header for the course project utilizing previously discussed CSS basics, type and class selectors, and both flex and grid containers for a more complex layout.
#lesson
Emma walks through styling the header for the course project utilizing previously discussed CSS basics, type and class selectors, and both flex and grid containers for a more complex layout.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Getting Started with CSS Q&A
Emma answers student questions regarding tips for successfully learning CSS, design resources, and opinions on starting with SASS or LESS for small sites.
#lesson
Emma answers student questions regarding tips for successfully learning CSS, design resources, and opinions on starting with SASS or LESS for small sites.
#lesson
Media is too big
VIEW IN TELEGRAM
16. The Box Model
Emma discusses block, inline, and inline-block elements and how they interact with the CSS box model. The differences between the standard box model and the alternative box model are also covered in this segment.
#lesson
Emma discusses block, inline, and inline-block elements and how they interact with the CSS box model. The differences between the standard box model and the alternative box model are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Z-Index & Positioning
Emma demonstrates setting the stacking order of elements by defining the element's z-index. Positioning elements in a document with the position CSS property and top, right, bottom, and left properties are also covered in this segment.
#lesson
Emma demonstrates setting the stacking order of elements by defining the element's z-index. Positioning elements in a document with the position CSS property and top, right, bottom, and left properties are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Border & Border Radius
Emma demonstrates defining the style, color, and width of an element's border. Rounding the outer edge corners of an element's border using border-radius is also covered in this segment.
#lesson
Emma demonstrates defining the style, color, and width of an element's border. Rounding the outer edge corners of an element's border using border-radius is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
19. Background, Dropshadow & Cursor
Emma discusses background style properties, including color, image, repeat, size, and position. How to create a drop shadow and set the cursor value is also covered in this segment.
#lesson
Emma discusses background style properties, including color, image, repeat, size, and position. How to create a drop shadow and set the cursor value is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Pseudo Classes, Elements & Transitions
Emma demonstrates applying styles based on the selected elements specified input, location, resource state, tree structure, and user action by utilizing pseudo-classes. Utilizing pseudo-elements to style a specific part of the selected element(s) and transitions to transition between states is also covered in this segment.
#lesson
Emma demonstrates applying styles based on the selected elements specified input, location, resource state, tree structure, and user action by utilizing pseudo-classes. Utilizing pseudo-elements to style a specific part of the selected element(s) and transitions to transition between states is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Home Page Layout
Emma walks through defining the layout for the main page content including the heading and subheading.
#lesson
Emma walks through defining the layout for the main page content including the heading and subheading.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Styling Interactive Buttons
Emma demonstrates adding modifiers to the primary and secondary buttons to allow custom styles while still sharing a general button styling. Excluding only the last button from the margin styling is also covered in this segment.
#lesson
Emma demonstrates adding modifiers to the primary and secondary buttons to allow custom styles while still sharing a general button styling. Excluding only the last button from the margin styling is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
23. SVG
Emma demonstrates utilizing scalable vector graphics (SVG) for images with customizable attributes that can be rendered at any size without losing quality. Defining the colors of the speakers page is also covered in this segment.
#lesson
Emma demonstrates utilizing scalable vector graphics (SVG) for images with customizable attributes that can be rendered at any size without losing quality. Defining the colors of the speakers page is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Align Items Q&A
Emma answers student questions regarding text-align compared to justify-content and align-items compared to text-align. The align-items value of baseline is also discussed in this segment.
#lesson
Emma answers student questions regarding text-align compared to justify-content and align-items compared to text-align. The align-items value of baseline is also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Speakers Image & Grid Layout
Emma demonstrates how to approach styling images with varying size dimensions. Creating the speakers layout by utilizing grid is also covered in this segment.
#lesson
Emma demonstrates how to approach styling images with varying size dimensions. Creating the speakers layout by utilizing grid is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Responsive Layout with Media Queries
Emma walks through implementing media queries to create a responsive layout. Device type, viewport size, preferred color scheme, and orientation are some of the features media queries can look for.
#lesson
Emma walks through implementing media queries to create a responsive layout. Device type, viewport size, preferred color scheme, and orientation are some of the features media queries can look for.
#lesson
Media is too big
VIEW IN TELEGRAM
27. Mobile Header Layout
Emma demonstrates defining the layout for the mobile version of the application header. When arranging layouts, it is important to note the syntax differences between grid and flexbox.
#lesson
Emma demonstrates defining the layout for the mobile version of the application header. When arranging layouts, it is important to note the syntax differences between grid and flexbox.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Mobile Navigation Menu
Emma walks through implementing a hamburger menu for the application's mobile navigation. Hiding and showing the navigation menu is also covered in this segment
#lesson
Emma walks through implementing a hamburger menu for the application's mobile navigation. Hiding and showing the navigation menu is also covered in this segment
#lesson
Media is too big
VIEW IN TELEGRAM
29. Menu Transition, Color & Scrolling
Emma adds a transition to the mobile navigation menu to make showing and hiding the menu less jarring. Implementing the mobile menu on the speakers page is also covered in this segment.
#lesson
Emma adds a transition to the mobile navigation menu to make showing and hiding the menu less jarring. Implementing the mobile menu on the speakers page is also covered in this segment.
#lesson