Check out Wix Studio 👉 [ Ссылка ]

🔗 Links
✅ The Frontend Mentor challenge: [ Ссылка ]
✅ Getting started with npm: [ Ссылка ]
✅ Astro: [ Ссылка ]
✅ Wix Studio: [ Ссылка ]
✅ Wix Studio headless docs: [ Ссылка ]
✅ More on using @font-face: [ Ссылка ]
✅ More on font-display: [ Ссылка ]
✅ More on visually-hidden: [ Ссылка ]
✅ More robust version of the .base-layout: [ Ссылка ]
✅ Container queries: [ Ссылка ]
✅ Counters: [ Ссылка ]

Get a YT membership: Join this channel to get access to perks:
[ Ссылка ]

⌚ Timestamps
00:00 - Introduction
00:39 - Getting the assets and a quick look at the design
02:47 - Getting started with Astro
05:08 - Exploring what Astro starts us with and adding the assets
07:52 - Creating a template layout
12:44 - Creating and importing our CSS file
14:12 - Thinking about how we'll organize our page
19:17 - General styling with CSS
32:20 - Creating the header
37:40 - Scroped styling in Astro
40:05 - The visually-hidden class
41:03 - Styling the navigation (more on this later)
42:18 - The featured article
45:23 - Heading levels and their impact
47:30 - Read more buttons are bad
48:57 - Using grid instead of a .container or .wrapper
52:54 - Improving the styling of the featured article
57:15 - Styling the button
1:00:45 - Adding spacing
1:03:19 - Creating the three columns
1:08:18 - Passing a class into a component
1:12:01 - Improving the breakpoints
1:14:49 - Adding the three articles on the bottom
1:22:16 - Using a counter for the numbers
1:26:51 - Spacing things out
1:31:58 - Styling the inverted section
1:41:36 - Styling heading links
1:45:41 - Skip to main
1:49:53 - Creating the mobile version of the navigation
2:06:26 - Getting started with Wix Studio for the headless CMS
2:07:25 - Adding a content collection to the CMS
2:11:05 - Connecting Wix Studio's headless CMS to our Astro project
2:14:33 - Getting our articles from Wix Studio
2:17:07 - What we get from our fetchArticles() function
2:20:49 - Adding an option for how many articles to fetch
2:22:12 - Adding a featured article filter
2:24:33 - Pulling the featured article into our site
2:28:00 - Generating pages for each article
2:36:30 - Creating a list of articles
2:40:16 - Limiting the amount of lines of text with CSS
2:42:33 - Bringing in content for the bottom articles

#css

--

Come hang out with other dev's in my Discord Community
💬 [ Ссылка ]

Keep up to date with everything I'm up to
✉ [ Ссылка ]

Come hang out with me live every Monday on Twitch!
📺 [ Ссылка ]

---

Help support my channel
👨‍🎓 Get a course: [ Ссылка ]
👕 Buy a shirt: [ Ссылка ]
📽️ Join as a channel member: [ Ссылка ]
💖 Support me on Patreon: [ Ссылка ] or through YT memberships: Join this channel to get access to perks:
[ Ссылка ]

---

My editor: VS Code - [ Ссылка ]

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: [ Ссылка ]
Codepen: [ Ссылка ]
Github: [ Ссылка ]

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

свернуть