Portfolio WebSite - Full build Part 2 - Bricks, Oxyprops, Meta Box
This is part 2 (link to part 1 below) of the series of videos where we build together a modern portfolio site using Bricks as a Page Builder, OxyProps to style it, and Meta Box to manaage Custom Post Types and Custom Fields.
I this episode, we focus on the work experience section, where we will:
Create custom post types with Meta Box
Create relationships between post types with Meta Box
Create custom fields with Meta Box, including a conditional field and a clonable group.
Use Bricks query loop to create work experience cards from a custom post types, including relate skills from a second post type through the relationship.
Learn about grid-auto-flow to create an horizontal scrollable container for our cards.
Use a code element to query metabox data and output a conditional string of text in our card.
And of course build all this with OxyProps in Bricks.
This will be a lot of fun !
🎉 Get OxyProps while it is on LTD !
OxyProps: https://oxyprops.com
🔗 Links
Part 1: The hero section & the about section
• Portfolio WebSite - Full build Part 1...
The original build by Sonny Sangha:
• 🔴 Let's build a Modern Portfolio with...
⌚ Timestamps
00:00 - Introduction
00:28 - Create the basic structure for our section.
01:00 - Create custom post types with Meta Box.
02:18 - Create a relationship with Meta Box.
05:20 - Create custom fields with Meta Box.
07:10 - Create a conditional field with Meta Box.
08:00 - Create a clonable group field with Meta Box.
09:53 - Create a horizontal snapping scrollable container.
15:20 - Create a card with the query loop from a custom post type.
21:37 - Create a horizontal snapping scrollable container - part 2
24:53 - Get information from another post type in query loop with a Meta Box relationship
28:52 - Use the query loop with a Meta Box clonable group.
31:05 - Use a code element to get information from Meta Box custom fields and output a custom string of text
41:12 - Experience section wrap-up
42:53 - Create the skills section
43:40 - Create a grid of skills with the query loop
45:05 - Create an overlay revealing content from a custom field on hover.
#CSSFramework #OxygenBuilder #OxyProps
___
Come hang out with other OxyProps users ans Oxygen lovers in our Facebook Community
💬 / oxyprops
___
My editor:
VS Code - https://code.visualstudio.com/
My Terminal Enhancements:
OhMyZSH: https://ohmyz.sh/
Powerlevel10k: https://github.com/romkatv/powerlevel10k
___
Find OxyProps on the internet :
Facebook: / oxyprops
Twitter: / oxy_props
___
And don't forget that if you can design it with Oxygen, you can style it with OxyProps!
Watch video Portfolio WebSite - Full build Part 2 - Bricks, Oxyprops, Meta Box online without registration, duration hours minute second in high quality. This video was added by user OxyProps 22 October 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,167 once and liked it 95 people.