The Responsive Web Design Bootcamp [scrimba] [Kevin Powell]

москитик · 16 ноя 2019

Складчина: The Responsive Web Design Bootcamp [scrimba] [Kevin Powell]

Why this course rocks
Let me ask you a few questions:

Do you want to learn to build responsive websites that look 100% professional?

Do you want to be confident that your website works well on all devices?

Are you tired of feeling that your CSS is a mess?

If your answer is YES, then this is the perfect course for you!

It gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way. You'll learn to build four different layouts: a blog, a landing page, a banner, and a company website. Each one will take your skills to a new level.

The best learning experience

To ensure that the knowledge sticks with you, you are given interactive coding challenges as you progress. It's as if you and the instructor are pair-programming together!

This kind of fast-paced interactivity simply isn't possible with any other platform than Scrimba. And if you get stuck, you have exclusive access to the teacher's Slack channel.

Привет, я Кевин. Я люблю учить людей, как создавать веб-сайты и как они выглядят хорошо, пока они работают над этим. Более 80 000 человек следят за моими уроками на YouTube, и я также работаю полный рабочий день в преподавании веб-разработки в колледже.

CSS basics
Sane CSS defaults
Specificity and selectors
CSS best practices
Text and fonts
Units and responsive Text
Flexbox layouts
Vertical aligning of content
Design best practices
Media Queries and viewports
Forms and how to make them look good
Advanced flexbox concepts
CSS Grid layouts
Icons with Font Awesome
Transitions and animations
Adding it all together

01 Welcome to the course!Preview3:54
02 Introduction to the CSS Fundamentals modulePreview2:58
03 Margin and Padding - Margins and spacing out text4:56
04 Margin and Padding - Collapsing margins6:36
05 Margin and Padding - Consistency and a new type of selector5:19
06 Inline and Block elements6:08
07 The span element3:34
08 Styling links12:23
09 Practice Time!21:57
10 Inline-block4:53
11 Styling buttons9:15
12 Specificity basics4:59
13 Specificity - two selectors of equal value2:10
14 Compound Selectors15:13
15 Compound selectors and specificity6:56
16 A better way to name our CSS classesPreview8:39
17 The text properties2:54
18 Font-family and font stacks5:45
19 How to use Google fonts8:55
20 Inheritance1:55
21 Working with, overwriting, and applying inheritance4:04
22 Putting it all together8:27
23 Putting it all together - the CSS17:42
24 Solution to the challenge and module wrap up4:17
01 Starting to think responsively3:00
02 CSS Units3:11
03 CSS Units - Percentage5:55
04 Controlling the width of images4:47
05 min-width and max-width2:46
06 CSS Units - The em unit5:27
07 The problem with ems2:29
08 CSS Units - rems4:44
09 Picking which unit to usePreview3:31
10 ems and rems - an example7:47
11 Flexbox refresher and setting up some HTML7:51
12 Basic styles and setting up the columns7:02
13 Adding the background color 4:10
14 Setting the column widths3:36
15 Spacing out the columns4:24
16 Controlling the vertical position of flex items5:12
17 Media Query basics10:05
18 Making out layout responsive with flex-direction6:52
19 flex-direction explained3:04
20 Creating a navigation4:44
21 Using flexbox to start styling our navigation7:36
22 Making our navigation look good7:15
23 Adding the underline3:58
24 A more complicated navigation6:41
25 Making the navigation responsive6:53
26 Taking a look at the rest of the project4:10
27 Setting up the structure8:22
28 Featured article structure5:05
29 The home page - HTML for the recent articles2:29
30 home page - html for the aside6:03
31 Starting the CSS for our page15:26
32 Starting the layout - looking at the big picture8:30
33 Starting to think mobile first2:46
34 Styling the featured article6:22
35 Changing the visual order with flexbox5:12
36 Playing with the title's position, and the downsides of negative margins4:42
37 Styling recent articles for large screens7:44
38 Changing image sizes with object-fit3:53
39 Setting up the widgets and talking breakpoints6:48
40 Using a new pseudo-class to wrap-up the homepage7:28
41 Creating the recent posts page3:25
42 Setting up the About Me page4:12
43 Fixing up some loose ends4:28
44 Important Note: The viewport meta tag3:39
45 Module wrap up3:14
01 It's time to step up our style2:40
02 A look at line-height5:12
03 text-transform: uppercase4:01
04 Making things easier to read with letter-spacing4:02
05 A nice color trick with rgba()4:52
06 background-images3:59
07 Background images and the file path (very important note)2:05
08 Controlling our background images7:55
09 BBQ Splash Page - Project Introduction3:23
10 Writing the HTML for the BBQ splash page7:01
11 Starting to style it up - BBQ Splash PagePreview11:07
12 Adding the background image - BBQ Splash Page3:46
13 Changing the order - BBQ Splash Page3:45
14 Styling the main content area - BBQ Splash page2:51
15 Adding the media query - BBQ Splash Page4:22
16 Setting up the typography for large screens - BBQ Splash Page2:13
17 Starting to set things up for large screens - BBQ Splash Page3:22
18 Viewport units7:29
19 Adding viewport units to the BBQ Splash Page2:08
20 Enter box-sizing: border-box7:07
21 Using flexbox to vertically center the main content - BBQ Splash Page3:19
22 Fixing the intro section on both small and large screens - BBQ Splash Page2:34
23 Dealing with very large screens solution #14:24
24 Dealing with very big screens solution #25:30
25 The very basics of forms10:49
26 Form basics - form attributes4:13
27 The basics of styling form5:11
28 Adding the form - BBQ Splash Page3:30
29 Starting to style up the form - BBQ Splash Page4:03
30 Making the inputs look good - BBQ Splash Page3:54
31 CSS Gradients5:31
32 Styling the button - BBQ Splash Page5:09
33 Basic transitions4:44
34 Intro to transforms (and a quick word on performance)3:01
35 We can transition more than :hover2:54
36 Border gradients4:52
37 Blending images, colors, and gradients with background-blend-mode4:16
38 Wrap up1:41
01Taking flexbox to the next level1:39
02flex-direction, flex-wrap, and flex-flow5:15
03justify-content and align-items and their relationship to flex-direction7:16
04Exploring align-content4:23
05flex-grow and flex-shrink explained5:06
06flex-basisPreview5:33
07The flex shorthand property4:25
08Aligning individual elements with align-self1:37
09Margin auto and flexbox4:29
10Building a card component with flexbox - Introduction2:34
11Building a card component with flexbox - The markup4:35
12Building a card component with flexbox - Typography5:42
13Building a card component with flexbox - Mobile layout11:00
14Building a card component with flexbox - Large screens part one5:10
15Building a card component with flexbox - Large screens part two5:18
16Centering something on the screen with flexbox2:20
17Module wrap-up1:51
01Introduction to CSS Grid3:16
02Setting up a basic grid5:21
03Placing items on the grid4:03
04grid-row and grid-column shorthands5:13
05Spanning columns1:42
06Some similarities to flexboxPreview5:28
07Using grid for our card component13:13
08The grid-gap property2:32
09Adding the gap to our card2:52
10The implicit and explicit grid6:00
11Exploring grid areas8:11
12grid-areas and media queries6:18
13minmax()3:35
14the fr unit3:01
15minmax() and the fr unit2:27
16Putting grid to use - part 111:32
17Putting grid to use - part 23:30
18repeat()3:22
19auto-fit and auto-fill5:14
01Taking it to the next level1:55
02Analyzing the layouts3:26
03Starting work on the homepage2:37
04The HTML for the homepage3:38
05The first lines of CSS you should always write3:52
06Setting up our grid for small screens3:08
07Continueing the hero area5:03
08The "info" section3:32
09Setting up the footer3:05
10Using Font Awesome for our icons5:25
11Wrapping up the footer1:31
12Setting up the grid, and hero, for larger screens5:15
13Setting up the rest of the page for larger screens5:31
14Starting to style our navigation3:17
15Setting up our navigation for small screens with positioning5:27
16Making the close button3:25
17Creating the "open" state and adding JavaScript to close our navigation9:20
18Adding the open button to our navigation4:24
1918 - Styling the navigation for large screens2:47
20Fixing up the navigation and hero area6:13
21Creating the second page2:14
22Styling the about page8:48
23Exploring box-shadows to get the effect on our images5:23
24Using pseudo-elements to add the yellow lines5:05
25Adding the yellow bar to our titles3:03
26Creating the contact page4:11
27Styling the contact form6:34
28Styling the contact form for larger screens5:51
29The loose ends4:42
30You did it!

Цена: 36 usd
Страница с курсом: bootcamp