Applied CSS 3 (2023) - Build 6 Professional Web Pages

Focused View

Yatit Thakker

11:39:56

82 View

1 - Introduction

1 - Introduction.mp4

01:51

2 - Part 1 Create an eCommerce Product Listing Page

2 - Navigation Menu HTML.mp4

08:43

3 - Confirm CSS Linking with Core Styles.mp4

08:29

4 - Add Navigation Icons.mp4

11:13

5 - Widen Navigation Elements.mp4

09:36

6 - Finish the Navigation Menu and Logo.mp4

11:12

7 - Add a Hero Image.mp4

09:13

8 - Main Body Layout.mp4

09:46

9 - Body Content and Relative Widths.mp4

06:45

10 - Footer Links Layout and Styles.mp4

12:36

11 - Finalize the Footer.mp4

06:59

3 - Part 2 Build a Product Detail Page with Customer Reviews

12 - Product Page Design Overview.mp4

08:20

13 - HTML Containers for the Product Details.mp4

09:48

14 - Product Info HTML.mp4

09:15

15 - Styling the Gallery Images.mp4

06:27

16 - Layout Styles for the Product Details.mp4

10:34

17 - Button and Tag Styles.mp4

07:50

18 - Product Menu and Reviews HTML.mp4

10:20

19 - Review Form HTML.mp4

08:01

20 - Product Menu CSS.mp4

06:14

21 - Review Form Styles.mp4

08:56

22 - CSS Wrapup and Conclusions.mp4

05:00

4 - Part 3 Make a Podcast Episode List Page

23 - Flowbase Design Overview.mp4

05:17

24 - Theming and Asset Downloads.mp4

11:26

25 - Nav Menu Layout and Styles.mp4

12:56

26 - Button Styles and Hero HTML.mp4

13:52

27 - Hero Layout and Title Styles.mp4

10:01

28 - Styling the Hero Description and Metadata.mp4

09:28

29 - Main Button Layout and Styles.mp4

10:36

30 - Button Flourishes and Header.mp4

06:32

31 - Latest Episodes Design Overview.mp4

06:29

32 - Episode List HTML.mp4

09:16

33 - Latest Episodes and Genre Filter Styles.mp4

09:28

34 - Episode Description and Tag Styles.mp4

11:56

35 - Host and Latest Episode Styles.mp4

10:51

36 - Footer HTML.mp4

07:06

37 - Footer Styles.mp4

09:41

5 - Create a Compelling About Page

38 - Design Overview and Copypasta.mp4

08:14

39 - Page Header HTML and CSS.mp4

10:59

40 - History and Stats HTML.mp4

08:29

41 - Founder and Sponsor HTML.mp4

12:45

42 - Stats Styles.mp4

12:30

43 - About and History Styles.mp4

09:45

44 - Founder and Main Host Styles.mp4

12:42

45 - Sponsor Section Styles.mp4

10:17

46 - Contact Form HTML.mp4

08:46

47 - Contact Form CSS.mp4

10:27

48 - Box Sizing and Wrapup.mp4

04:23

6 - Develop a Restaurant Menu Page

49 - FoodZero Design Overview.mp4

05:10

50 - Header HTML.mp4

07:47

51 - Menu HTML Structure.mp4

10:09

52 - Completing the HTML Menu.mp4

05:16

53 - Reservations and Footer HTML.mp4

12:01

54 - Font and Button Styles.mp4

07:18

55 - Styling the Top Nav.mp4

09:40

56 - Finishing the Hero.mp4

04:42

57 - Finetuning the Menu Layout.mp4

10:37

58 - Completing the Menu.mp4

07:04

59 - Reservation Styles.mp4

09:59

60 - Styling the Newsletter Form.mp4

11:12

61 - Copyright Container Styles.mp4

03:04

7 - Write a Customized Blog Article

62 - Design Overview and Code Carrying.mp4

09:42

63 - Asset Downloads.mp4

04:12

64 - Hero Container HTML.mp4

07:14

65 - Article Layout HTML.mp4

09:29

66 - Sidebar HTML.mp4

15:04

67 - Comment List HTML.mp4

09:39

68 - New Comment Form HTML.mp4

04:51

69 - Hero Container Styles.mp4

12:08

70 - Main Article Layout.mp4

09:34

71 - Article Content Styles.mp4

07:33

72 - Metadata Styles.mp4

07:07

73 - Search Bar and Sidebar Layout.mp4

09:39

74 - Sidebar Section Styles.mp4

09:57

75 - Recent Posts and Tags.mp4

05:46

76 - Previous and Next Post.mp4

10:47

77 - Styling Post Comments.mp4

09:48

78 - New Comment Form Styles.mp4

12:07

8 - Bonus Lecture

79 - Bonus Lecture Discord and other links.html

Description

Use HTML, CSS 3 and Web Development best practices to create pages in interactive web sites

What You'll Learn?

Break down existing web designs into web-friendly elements
Implement HTML layouts by working from the outside in
Style HTML elements using CSS and an iterative approach
Use CSS best practices to refine existing styles

Who is this for?

If you're looking to take your CSS skills to the next level and apply the things you learn to practical web pages that look professionally designed, this course is for you

You want to improve your Web Development skills

More details

Description
Have you tried introductory courses that fell short of providing useful code? Maybe you learned the information conceptually, but they didn't bridge the gap to practice.Â Then this course is for you. It contains distilled techniques about implementing professional designs that I've learned from over 9 years of professional Web Development at Fortune 500 companies and smaller startups.

Not only will you learn about common layout patterns used in modern web pages, you will also walk away with 6 beautifully designed web pages that you can use for projects ranging from custom blog themes to menus for local restaurants in your community. Finally, you can apply these techniques to larger scale projects that require more fine-grained knowledge of CSS.

The course is broken down into 6 parts, one for each major page:

Part 1 - This introduces you to an eCommerce theme that shows a gallery of products and their prices.
Part 2 - This builds on the eCommerce theme, this time going to a singular product with customer reviews and other elements. The first two parts are built around a common front-end pattern called the list-detail view pattern.
Part 3 - The most advanced part of the course (you may return to this part at the end), Part 3 shows how to implement a list of Podcast episodes along with their name and cover image for a podcasting app.
Part 4 - How to write a professional, compelling "About"Â page for your website or blog.
Part 5 - Covers a long-form restaurant menu with different, commonly-styled sections for appetizers, main course, and dessert.
Part 6 - Implements a custom blog article theme design with a sidebar and comments section.

In order to be successful in this course, it's recommended you have a solid grasp on HTML 5. It also helps if you have a very basic understanding of CSS, even though common styles and styling techniques are explained in the lectures.

To support additional updates to the course, you may leave a 5-star review or a constructive critical review suggesting 3-5 improvements you'd like to see. Your feedback is welcome.
Who this course is for:
If you're looking to take your CSS skills to the next level and apply the things you learn to practical web pages that look professionally designed, this course is for you
You want to improve your Web Development skills

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Yatit Thakker

Instructor's Courses

Hi there! My name is Yatit Thakker. I am a self-taught programmer who got into Web Development and Computer Science by accident. I taught myself HTML, CSS, and JavaScript through Codecademy and used that knowledge to start an educational technology company. I currently work as a full-time developer and want to use my experience in the education space to hopefully inspire learners to get a career change!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.