Learn how to create a card layout design in Sketch and get it live on the web with basic HTML and CSS.
This series is intended as a project-based course and will not go in-depth into HTML, CSS, or Javascript. If you want to learn more about those check out the links at the bottom of the description.
💥 DEMO SITE 💥
🔗 https://stupefied-brahmagupta-33eb56.netlify.com/
📂 COURSE FILES 📂
🎓 LESSON LIST 🎓
Lesson 1: Design the Card Grid in Sketch – 0:26
🔗 Sketch: https://www.sketch.com/
🔗 Unsplash Sketch Plugin: https://www.sketch.com/extensions/plugins/unsplash/
🔗 Stock Photos: https://unsplash.com/
🔗 Google Fonts: https://fonts.google.com/
Lesson 2: Layout the Content with HTML – 12:43
🔗 Visual Studio Code: https://code.visualstudio.com/
Lesson 3: Style the Card Grid with CSS – 16:34
🔗 Autoprefixer: https://autoprefixer.github.io/
Lesson 4: Deploy the Project with Netlify – 32:52
🔗 CSS and JS Minify: https://www.minifier.org/
🔗 Netlify Drop: https://app.netlify.com/drop
🌟 TOP RECOMMENDED COURSES 🌟
CSS
(Paid) Build Responsive Real World Websites with HTML5 and CSS3
https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/
(Free) CSS Crash Course For Absolute Beginners
https://www.youtube.com/watch?v=yfoY53QXEnI
CSS GRID
(Free) Flexbox CSS In 20 Minutes
https://www.youtube.com/watch?v=JJSoEo8JSnc
(Free) A Complete Guide to CSS Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS FLEXBOX
(Free) CSS Grid Tutorial
https://www.youtube.com/watch?v=x7tLPhnA06w&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY
(Free) A Complete Guide to CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
JAVASCRIPT
(Paid) The Complete JavaScript Course 2019: Build Real Projects!
https://www.udemy.com/the-complete-javascript-course/
(Free) Learn JavaScript - Full Course for Beginners
https://www.youtube.com/watch?v=PkZNo7MFNFg
#css