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!
Смотрите видео Portfolio WebSite - Full build Part 3 (final) - Bricks, Oxyprops, Meta Box онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь OxyProps 04 Ноябрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 836 раз и оно понравилось 32 людям.