How to make a website using HTML and CSS (Speedrun) // Website Design with HTML & CSS

Опубликовано: 18 Март 2026
на канале: crayon code

4,030

110

In-Detail Version:    • How to make a website using HTML and CSS /...

Learn to build a website from scratch in this in-depth episode about HTML & CSS and see how to
✔️ use CSS flexbox and CSS grid layout
✔️ reference external fonts in HTML
✔️ create beautiful hover styles with CSS
✔️ embed SVGs as images in HTML
✔️ build an entire layout from scratch

⌨️ CODE ⌨️

▶️ https://github.com/crayon-code/websit...

🖇️ USEFUL LINKS 🖇️

🔗 A Complete Guide to Grid https://css-tricks.com/snippets/css/c...
🔗 A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a...
🔗 Google Fonts: https://fonts.google.com/

🔔 SUBSCRIBE & LIKE 🔔

▶️    / @crayoncode

⚙️ USEFUL VSCODE EXTENSIONS ⚙️

Live server: https://marketplace.visualstudio.com/...
Bracket Pair Colorizer: https://marketplace.visualstudio.com/...

🎨 ARTWORK 🎨

Both SVGs taken from:
https://www.freepik.com/free-vector/i...

⏱️ TIMESTAMPS ⏱️

00:00 Basic HTML, CSS & Logo Markup
00:50 Embedding Google Fonts
01:17 Logo Styling
01:35 Nav Bar
02:20 Nav Bar - Hover Effect
03:44 Nav Bar - Active Style
04:01 Nav Bar - Highlight Style
04:41 Main Content Markup
05:26 Typographic Styles
05:44 Link Button
06:36 Layout Adjustments
06:55 Footer

👋 FOLLOW

📸 INSTAGRAM:   / crayon_code

🏷️ HASHTAGS 🏷️

#html #css #flexbox #gridlayout #tutorial