English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 125 Lessons (14h 39m) | 17.6 GB
Want to learn how to code? This is the perfect place to learn how to confidently make your own websites from scratch.
It’s designed for absolute beginners and those who know some code but want to develop confidence and understanding by building real sites.
Go at your own pace and by the end, you’ll be comfortable in making your own websites without assistance. Pretty cool!
What you’ll learn
- Create beautiful websites using HTML, CSS + Javascript
- Make mobile-friendly websites with responsive design
- Code prototypes that include scrolling and animation techniques
- Find + work with the best Javascript libraries
- Fix your own code using Chrome’s developer tools
- Work effectively with other web designers and coders
Table of Contents
1 What is the World Wide Web?
2 What is SuperHi?
3 Writing our first HTML
4 Writing our first CSS
5 Sally Hart Photography Part 1
6 Sally Hart Photography Part 2
7 Sally Hart Photography Part 3
8 Sally Hart Photography Part 4
9 Overview and initial HTML
10 Padding, margins and the box model
11 Blockquotes and borders
12 Navigation hovers and max widths
13 Making our website responsive
14 Project overview and initial HTML
15 Header and hero section HTML
16 Getting content into columns using CSS floats
17 Using background-position and vertically centering text
18 Multiple columns using fluid percentage widths
19 Remaining HTML and a quick look at symbols
20 Styling up quotes sections
21 Rounding corners using border-radius
22 Sharing CSS classes between elements
23 Figuring out responsive breakpoints
24 Removing floats and responsive styles
25 Responsive styles and hiding elements
26 Adding multiple media queries and fine tuning
27 Styling specific elements using nth-child
28 Fixing the header and using drop shadows
29 Using the Chrome developer tools to inspect websites
30 Project overview
31 Initial HTML
32 HTML continued and initial CSS
33 Header position and active link style
34 Introducing inline-block elements
35 Varied element widths using classes
36 Footer styles
37 Header styles using flexbox
38 Photo grid styles using flexbox
39 Positioning elements using absolute position
40 Changing element and color opacity
41 Offset absolute position using negative values
42 Smoothly transitioning CSS properties
43 Changing element layer order using z-index
44 Responsive tweaks using flexbox
45 Hover transitions for navigation links
46 Adding character to transitions using timings
47 Grayscale image transitions using CSS filters
48 Adding the list view page and initial HTML
49 List view hover effect image styles
50 Adding list separators using CSS content
51 List image hover effect using transitions
52 Project overview
53 HTML structure using outer and inner containers
54 Initial CSS and using 2x assets
55 Hero background positioning and copy column
56 Final navigation and products HTML
57 Navigation and products style using flexbox
58 Adding product overlay initial HTML and CSS
59 Positioning the overlay using absolutes and rgba
60 More playful hover effects using transition timings
61 Initial breakpoint for tablet layout
62 Responsive styles for tablet to mobile
63 Mobile responsive styles
64 Adding show filters link
65 Using unordered list elements to style up the filters
66 Final filter list style tweaks
67 What is Javascript and jQuery?
68 What types of data do we have in Javascript?
69 Using the Chrome Javascript console
70 Attaching our Javascript files to the page
71 Showing and hiding content on the click event
72 Building a navigation toggle using jQuery
73 Getting attributes and using variables
74 Using the this keyword in Javascript
75 Filtering the products selection using jQuery
76 Adding and removing the active link style
77 Overriding CSS styles using !important
78 Project overview
79 A quick look at the head and body tags
80 Initial HTML
81 Header and navigation slideout styles
82 Vertically aligning navigation using transforms
83 Overlaid offset text effect using absolutes
84 HTML finishing touches
85 Offset text overlay continued
86 Final lookbook section CSS
87 Silky smooth rotate and scale transforms
88 Using translate, scale and multiple transitions on an element
89 Hamburger icon positioning and z-index
90 Toggling CSS classes and states using jQuery
91 Project overview
92 Project setup
93 Building a scroll function that counts the pixels to top
94 Hiding and showing the header on scroll
95 Setting the background color on scroll using extended if/else statements
96 Progress bar HTML and CSS
97 Setting the bar CSS using jQuery
98 Figuring out how far down the page we have scrolled
99 Setting the bar width dynamically
100 Project overview
101 Project setup
102 Modal overlay CSS
103 Increasing clickable area and changing cursors
104 Positioning modal content in the center
105 Hiding the modal and adding script tags
106 Showing our modal on click and blocking default link action
107 Closing our modal using a separate function
108 Getting and setting HTML and using the this keyword
109 Using variables for setting the HTML
110 Making the design responsive
111 Project overview
112 HTML structure
113 A look at the CSS
114 What does overflow do?
115 Initial transition using interval functions
116 A little bit about arrays in Javascript
117 Moving to the next slide dynamically
118 Putting the slide functionality into separate functions
119 Finding how many slides we have using .length
120 Wiring up the prev/next buttons and cancelling intervals
121 Setting the text for our current slide
122 Making the slideshow loop through
123 Passing data to functions using arguments
124 Creating a function for moving the slide
125 Making the arrow keys work for navigation
Resolve the captcha to access the links!