Portfolio WebSite - Full build Part 3 (final) - Bricks, Oxyprops, Meta Box
This is part 3 (link to parts 1 & 2 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 manage Custom Post Types and Custom Fields.
In this episode, we focus on the Projects showcase 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 clonable group.
Use Bricks query loop to create project showcase pages from a custom post type, including related skills from a second post type through the relationship.
And of course build all this with OxyProps in Bricks.
We will also create the contact section using Bricks built-in form builder.
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...
Part 2: The work experience section & the skills section
• Portfolio WebSite - Full build Part 2...
The original build by Sonny Sangha:
• 🔴 Let's build a Modern Portfolio with...
⌚ Timestamps
00:00 - Introduction
00:30 - Current state and target state
02:50 - The Projects section structure
03:50 - Create a fancy background - Relative / Absolute / Skew
06:40 - Creating the full screen snaping horizontal slider
15:10 - Create the custom post type
16:25 - Create the relationship between projects and skills
20:15 - Create the custom fields for the project custom post type
23:50 - Projects query loop
28:00 - Skills query loop
31:26 - Key Items query loop
35:40 - Project Title and Summary
39:50 - Create the contact section structure
42:15 - An Address HTML tag ?
44:30 - Building & styling the contact form
49:00 - Final touch on links
50:00 - Final review of our website
#cssframework #bricksbuilder #oxyprops
___
Come hang out with other OxyProps users and 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 Bricks, you can style it with OxyProps!
Watch video Portfolio WebSite - Full build Part 3 (final) - Bricks, Oxyprops, Meta Box online without registration, duration hours minute second in high quality. This video was added by user OxyProps 04 November 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 836 once and liked it 32 people.