Harvard CS50’s Web Programming with Python and JavaScript – Full University Course
By freeCodeCamp.org
Published: Mar 08, 2023“
This web programming course from Harvard University picks up where CS50x leaves off. It dives more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap. Topics include database design, scalability, security, and user experience. You will learn how to write and use APIs, create interactive UIs, and leverage cloud services like GitHub and Heroku.
Slides, source code, and more at https://cs50.harvard.edu/web/2020/
Brian Yu teaches this course.
Watch the original CS50x course: https://youtu.be/8mAITcNt710
Course Contents
- (00:00:29) Introduction
- (00:02:42) Lecture 0: HTML, CSS
- (02:06:14) Lecture 1: Git
- (02:59:29) Lecture 2: Python
- (04:07:10) Lecture 3: Django
- (05:46:15) Lecture 4: SQL, Models, and Migrations
- (07:40:21) Lecture 5: JavaScript
- (09:31:46) Lecture 6: User Interfaces
- (11:12:01) Lecture 7: Testing, CI/CD
- (12:45:59) Lecture 8: Scalability and Security
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
Category: css
[#Script #Coding] Best VS Code Extension for Tailwind CSS
Best VS Code Extension for Tailwind CSS
By codeSTACKr
Published: Jan 06, 2023“
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Just like the built-in feature of VS Code that lets you fold lines of code. The Inline Fold extension lets you fold code… well, Inline.
Let’s look at a couple of use cases:
– I love using Tailwind CSS! But a lot of developers hate how cluttered it makes your markup look.
– Just install the Inline fold extension and you’re markup will look clean again.
– From the command palette, use the “Inline fold: Toggle” command to fold and unfold your class names.
– Alternatively, just move your cursor to those lines and it will automatically unfold so that you can easily edit them.
– Another use case is when you have SVG’s in your markup.
– You’ll have to go into your settings and change the Regex match statement.
– After that, all of the SVG’s in your markup will be folded, giving you a much cleaner experience.
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Script #Coding] Learn Tailwind CSS – Course for Beginners
Learn Tailwind CSS – Course for Beginners
By freeCodeCamp.org
Published: Jan 17, 2023“
This course will give you a full introduction into all of the core concepts of Tailwind CSS — it will also provide details on every feature that provides Tailwindcss.
Course from codewithguillaume.
Contents
- (0:00:00) Introduction
- (0:02:36) Setup
- (0:17:01) Colors
- (0:29:11) Customization
- (0:42:11) Typography
- (1:05:21) Spaces & sizes
- (1:29:36) Flex
- (1:51:46) Grids
- (2:12:48) Layouts
- (2:37:49) Borders
- (2:45:41) Effects & filters
- (2:57:33) Animations
- (3:08:28) Design System
- (3:56:31) Core concepts
- (4:05:26) Dark mode
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] Best CSS Tool for VS Code!! Mirror Editing
Best CSS Tool for VS Code!! Mirror Editing
By codeSTACKr
Published: Feb 08, 2023“
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZVS Code Tip of the Day
Here’s one really cool feature of this extension. The feature is called CSS Mirror Editing.
In the dev tools, make any style changes you want. You’ll see them happen in real-time and the updates will be saved automatically to your stylesheet.
This is one of the coolest things I’ve seen in a while!
The Microsoft Edge Tools for Visual Studio Code extension allows you to use the Developers Tools right inside VS Code.”
[#Script #Coding] Create a Design System with CSS – Web Development Course
Create a Design System with CSS – Web Development Course
By freeCodeCamp.org
Published: Feb 07, 2022“
Learn how to create your own design system while building a Space Travel Website with CSS guru Kevin Powell. You can also follow the interactive Scrimba version of this course by clicking here: https://scrimba.com/learn/spacetravel
Code on GitHub: https://github.com/kevin-powell/space-tourism
In this course you will first learn how to build your own design system and then learn how to implement the entire website with the design system using CSS, HTML, and JavaScript.
At the end, you will have a neat project to add your portfolio in addition to have sharpened your CSS and design skills.
The design for the course has been created by FrontendMentor. You can get the design files from their page: https://www.frontendmentor.io/challen…
Course Contents
- (0:00:00) The design system
- (2:04:12) The homepage
- (3:02:25) Navigation
- (4:17:48) The destination page
- (5:29:33) The tabs
Twitter links:
- Follow Kevin Powell on Twitter: https://twitter.com/kevinjpowell
- Follow FrontendMentor on Twitter: https://twitter.com/frontendmentor
- Follow Scrimba on Twitter: https://twitter.com/scrimba
YouTube links:
- Kevin Powell: https://www.youtube.com/kepowob
- Scrimba: https://www.youtube.com/c/Scrimba
”
[#Script #Coding] 12 ways to center a div
12 ways to center a div
By codeSTACKr
Published: Aug 30, 2022“
Watch the full explanation video: https://youtu.be/kphds-1V9o8
Become A VS Code SuperHero Today: https://vsCodeHero.comGet my FREE VS Code Cheat Sheet: https://courses.codestackr.com/vs-cod…
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Why is it so hard to center a div in CSS? It used to be, but now we have so many options!
Here are 12 ways to center a div.
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Webdesign #Coding] Tailwind CSS + WordPress Theme & Block Type Boilerplate
Tailwind CSS + WordPress Theme & Block Type Boilerplate
By LearnWebCode
Published: Jun 27, 2022“
Here’s how I’m using Tailwind CSS in WordPress themes and blocks. My premium courses and coupons: https://learnwebcode.com/courses/
GitHub link for this video: https://github.com/LearnWebCode/brads…
CONTENTS:
- 0:00 Intro
- 0:50 Getting Started
- 2:06 Theme
- 4:53 Tailwind Typography Plugin
- 6:38 Auto Reload
- 8:16 Block Type Plugin
- 13:16 Prefix In Tailwind
Follow me for updates on new videos or projects:
Instagram: https://www.instagram.com/javaschiff/
Twitter: https://twitter.com/learnwebcode
Facebook: https://www.facebook.com/Brad-Schiff-…
Twitch: https://www.twitch.tv/learnwebcode”
[#Script #Coding] How to center a div 12 ways!!
How to center a div 12 ways!!
By codeSTACKr
Published: Aug 27, 2022“
Why is it so hard to center a div in CSS? It used to be, but now we have so many options!
Here are 12 ways to center a div.
Become A VS Code SuperHero Today: https://vsCodeHero.com
Get my FREE VS Code Cheat Sheet: https://courses.codestackr.com/vs-cod…
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Timestamps
- 00:00 – Intro
- 00:11 – Method 1 (Don’t use!!)
- 00:18 – Basic Setup
- 00:26 – Method 2
- 00:54 – Method 3
- 01:06 – Method 4
- 01:15 – Method 5
- 01:29 – Method 6
- 01:40 – Method 7
- 01:45 – Method 8
- 01:54 – Method 9
- 02:00 – Method 10
- 02:06 – Method 11
- 02:08 – Method 12
”
[#Webdesign #Coding] Why You Should Try Tailwind CSS
Why You Should Try Tailwind CSS
By LearnWebCode
Published: Jun 20, 2022“
Let’s get started using Tailwind CSS in our projects. My premium courses and coupons: https://learnwebcode.com/courses/
GitHub link for this video: https://github.com/LearnWebCode/tailw…
CONTENTS
- 0:00 Intro
- 1:56 The Problems With CSS
- 7:39 What Is Tailwind?
- 10:59 Actually Getting Started
- 18:20 GitHub Examples
- 22:40 Markdown or Blog Content?
- 27:31 Custom Colors
- 29:38 Custom Fonts
- 34:51 Typography Plugin
- 37:03 VS Code Extension
Follow LearnWebCode for updates on new videos or projects:
- Instagram: https://www.instagram.com/javaschiff/
- Twitter: https://twitter.com/learnwebcode
- Facebook: https://www.facebook.com/Brad-Schiff-…
- Twitch: https://www.twitch.tv/learnwebcode
”
[#WebDesign #Coding] Learn HTML & CSS – Full Course for Beginners
Learn HTML & CSS – Full Course for Beginners
By freeCodeCamp.org
Published: Sep 14, 2022“
Learn HTML and CSS from scratch by building 6 projects and solving 80+ coding challenges. Go here for the interactive browser version: https://scrimba.com/links/htmlandcss
Code
- Interactive version: https://scrimba.com/links/htmlandcss
- GitHub repo: https://github.com/scrimba/learn-html…
This course was created by Per Harald Borgen, the co-founder and CEO of Scrimba. You can follow Per on Twitter here: https://twitter.com/perborgen.
Tools used:
- Netlify: https://www.netlify.com/
- VS Code: https://code.visualstudio.com/
- GitHub Desktop: https://desktop.github.com/
- Figma: https://www.figma.com/
- Coolors: https://coolors.co/
- Google Fonts: https://fonts.google.com/
- 1001 Fonts: https://www.1001fonts.com/
Contents
- 0:00:00 Introduction
Build and deploy your first website
- 0:01:32 1: Welcome to the HTML & CSS Course
- 0:04:12 2: HTML Tags
- 0:07:33 3: Write a news article
- 0:09:43 4: The image tag
- 0:14:43 5: Nesting
- 0:17:33 6: Internet superpowers – Change the BBC news!
- 0:22:34 7: Interactive elements – Button
- 0:24:37 8: Interactive elements – input tags — Experiment with input types 100%
- 0:29:37 9: Let’s build Google!
- 0:33:28 10: Aside – Anchor tags
- 0:38:04 11: Add an anchor tag to Google.com
- 0:39:43 12: Proper document structure
- 0:45:29 13: Aside: Lists
- 0:49:27 14: Build a personal Website
- 0:58:15 15: Deploy your Personal Website
- 1:01:30 16: HTML Recap
Build a Google.com clone
- 1:03:06 1: Let’s learn CSS!
- 1:03:53 2: Write your first lines of CSS!
- 1:08:10 3: Write your first lines of CSS! Solution
- 1:11:46 4: Let’s destroy wikipedia – recording
- 1:13:43 5: Link to the CSS file
- 1:16:22 6: Set the width of the elements
- 1:18:31 7: Inline vs block elements
- 1:20:49 8: Margin top
- 1:22:05 9: Divs rule the world
- 1:24:10 10: CSS classes
- 1:28:07 11: Aside – Learn margins via flags
- 1:34:04 12: Add space between our elements
- 1:35:12 13: Aside – Centering with margins
- 1:38:39 14: Centering our content
- 1:40:01 15: Aside – padding
- 1:45:23 16: Aside – Border and border-radius
- 1:50:33 17: Aside challenge – style Twitter button
- 1:55:36 18: Fix the input field
- 2:00:22 19: Center the button
- 2:02:42 20: Style the button
- 2:07:13 21: Why we can’t have two block-level buttons
- 2:11:42 22: Aside – Flexbox
- 2:15:25 23: Centering both buttons with flexbox
- 2:18:20 24: Google clone recap
Build a Digital Business Card
- 2:20:27 1: Building your digital business card
- 2:21:00 2: Fix the image path
- 2:23:56 3: Add alt attribute
- 2:28:24 4: Make the image smaller
- 2:29:40 5: Add a border and padding
- 2:33:30 6: Aside – flexbox child containers
- 2:37:11 7: Flex item containers
- 2:38:51 8: Add a utility class
- 2:42:04 9: Justify the items
- 2:44:13 10: Center the card
- 2:46:13 11: Aside – inheritance
- 2:50:31 12: Center the text via inheritance
- 2:53:32 13: Add colors
- 2:56:57 14: Web-safe fonts
- 3:02:06 15: Aside – margin/padding shorthand
- 3:06:09 16: Use the margin & padding shorthands
- 3:07:26 17: Deploy your Digital Business Card
- 3:12:16 18: Business Card Recap
Build a Space Exploration Site
- 3:14:17 1: Let’s go to space
- 3:14:54 2: Add a background image from Unsplash
- 3:18:54 3: Center elements and Style button
- 3:22:12 4: Add a Google font
- 3:26:34 5: @font-face
- 3:28:39 6: Aside – spans
- 3:32:37 7: Add an underline using a span
- 3:34:27 8: Use an ID for the logo
- 3:38:51 9: Replace the jpg with a webp
- 3:41:25 10: Choose a color palette from an image
- 3:44:18 11: Add the terms & conditions section
- 3:48:17 12: Aside – text shadow
- 3:54:17 13: Improving the readability with text shadows
- 3:56:17 14: Space – Exploration recap
Build a Birthday GIFt Site
- 3:58:02 1: Let’s build a Birthday GIFt site
- 3:59:13 2: Add basic header styling
- 4:02:47 3: Set the colors
- 4:04:13 4: Add shadow on text
- 4:07:34 5: We have a problem that flexbox can fix
- 4:10:10 6: Aside – align-items
- 4:16:13 7: Aside – flex-direction
- 4:20:42 8: Turn the header into a flexbox
- 4:22:26 9: Fix date and age design
- 4:26:36 10: Create the first gift
- 4:31:56 11: Replace the img with a div
- 4:36:14 12: Aside – make elements change on hover
- 4:39:08 13: Add the hover effect
- 4:41:17 14: Create the next GIFt
- 4:45:39 15: Create two more GIFts
- 4:48:15 16: Create the final GIFt
- 4:51:38 17: Add the footer
- 4:55:18 18: Add a background gradient
- 4:58:46 19: Personalize the Birthday GIFt Site
- 5:00:25 20: Use GitHub Desktop to publish your Birthday GIFt Site
- 5:05:44 21: Deploying your Birthday GIFt Site
- 5:06:45 22: Use VS Code to edit your Birthday GIFt
- 5:11:36 23: GIFt site recap
Solo Project: Hometown Homepage
- 5:13:29 1: It’s time to go solo!
- 5:15:47 2: Solo Project – Hometown Homepage
- 5:19:54 3: Congrats on completing the course!
”
