Applied CSS 3 (2023) - Build 6 Professional Web Pages
- Description
- Curriculum
- FAQ
- Reviews
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.
-
2Reference the Shoppe Figma ThemeText lesson
-
3Navigation Menu HTMLVideo lesson
-
4Confirm CSS Linking with Core StylesVideo lesson
-
5Add Navigation IconsVideo lesson
-
6Widen Navigation ElementsVideo lesson
-
7Finish the Navigation Menu and LogoVideo lesson
-
8Add a Hero ImageVideo lesson
-
9Main Body LayoutVideo lesson
-
10Body Content and Relative WidthsVideo lesson
-
11Footer Links Layout and StylesVideo lesson
-
12Finalize the FooterVideo lesson
-
13Reference the Product Page in ShoppeText lesson
-
14Product Page Design OverviewVideo lesson
-
15HTML Containers for the Product DetailsVideo lesson
-
16Product Info HTMLVideo lesson
-
17Styling the Gallery ImagesVideo lesson
-
18Layout Styles for the Product DetailsVideo lesson
-
19Button and Tag StylesVideo lesson
-
20Product Menu and Reviews HTMLVideo lesson
-
21Review Form HTMLVideo lesson
-
22Product Menu CSSVideo lesson
-
23Review Form StylesVideo lesson
-
24CSS Wrapup and ConclusionsVideo lesson
-
25Reference the Flowbase ThemeText lesson
-
26Flowbase Design OverviewVideo lesson
-
27Theming and Asset DownloadsVideo lesson
-
28Nav Menu Layout and StylesVideo lesson
-
29Button Styles and Hero HTMLVideo lesson
-
30Hero Layout and Title StylesVideo lesson
-
31Styling the Hero Description and MetadataVideo lesson
-
32Main Button Layout and StylesVideo lesson
-
33Button Flourishes and HeaderVideo lesson
-
34Latest Episodes Design OverviewVideo lesson
-
35Episode List HTMLVideo lesson
-
36Latest Episodes and Genre Filter StylesVideo lesson
-
37Episode Description and Tag StylesVideo lesson
-
38Host and Latest Episode StylesVideo lesson
-
39Footer HTMLVideo lesson
-
40Footer StylesVideo lesson
-
41Reference the Flowbase About PageText lesson
-
42Design Overview and CopypastaVideo lesson
-
43Page Header HTML and CSSVideo lesson
-
44History and Stats HTMLVideo lesson
-
45Founder and Sponsor HTMLVideo lesson
-
46Stats StylesVideo lesson
-
47About and History StylesVideo lesson
-
48Founder and Main Host StylesVideo lesson
-
49Sponsor Section StylesVideo lesson
-
50Contact Form HTMLVideo lesson
-
51Contact Form CSSVideo lesson
-
52Box Sizing and WrapupVideo lesson
-
53Reference the FoodZero Restaurant ThemeText lesson
-
54FoodZero Design OverviewVideo lesson
-
55Header HTMLVideo lesson
-
56Menu HTML StructureVideo lesson
-
57Completing the HTML MenuVideo lesson
-
58Reservations and Footer HTMLVideo lesson
-
59Font and Button StylesVideo lesson
-
60Styling the Top NavVideo lesson
-
61Finishing the HeroVideo lesson
-
62Fine-tuning the Menu LayoutVideo lesson
-
63Completing the MenuVideo lesson
-
64Reservation StylesVideo lesson
-
65Styling the Newsletter FormVideo lesson
-
66Copyright Container StylesVideo lesson
-
67Reference the Blog Article (with Sidebar) design in FoodZeroText lesson
-
68Design Overview and Code CarryingVideo lesson
-
69Asset DownloadsVideo lesson
-
70Hero Container HTMLVideo lesson
-
71Article Layout HTMLVideo lesson
-
72Sidebar HTMLVideo lesson
-
73Comment List HTMLVideo lesson
-
74New Comment Form HTMLVideo lesson
-
75Hero Container StylesVideo lesson
-
76Main Article LayoutVideo lesson
-
77Article Content StylesVideo lesson
-
78Metadata StylesVideo lesson
-
79Search Bar and Sidebar LayoutVideo lesson
-
80Sidebar Section StylesVideo lesson
-
81Recent Posts and TagsVideo lesson
-
82Previous and Next PostVideo lesson
-
83Styling Post CommentsVideo lesson
-
84New Comment Form StylesVideo lesson
External Links May Contain Affiliate Links read more