- 5
- 80 991
Coder Coder Builds
United States
เข้าร่วมเมื่อ 28 ก.พ. 2021
Super long course-length videos building websites step-by-step
Official second channel of Coder Coder
Official second channel of Coder Coder
Build and deploy a portfolio website (WordPress custom theme)
🔥 Host your website with SiteGround: www.siteground.com/go/meja9lxe98
⭐ Starter code: github.com/thecodercoder/cc-developer-portfolio-starter
⭐ Finished source code & Figma file (inside the Coder Club): courses.coder-coder.com/courses/2574158/lectures/58456765
🔴 SETUP
0:00 - Intro
1:39 - Set up SiteGround site
7:14 - Create WordPress website
8:30 - SiteGround WordPress plugins & tools
🔴 STATIC HTML/SCSS WEBSITE
12:52 - Start building static website with HTML/SCSS
23:12 - HTML markup
40:06 - Global styles
1:28:45 - Header styles
1:35:23 - Hero styles
1:49:37 - Skills styles
2:05:39 - Projects styles
2:29:11 - Contact styles
🔴 CUSTOM WORDPRESS THEME
2:42:44 - Set up local WordPress, install starter theme & plugins
2:54:58 - Build custom theme
3:04:10 - Integrate HTML/SCSS into theme files
3:14:42 - Create ACF custom fields for content
4:05:28 - Custom post type for Projects
4:28:12 - Custom post type for Contact
5:06:23 - Migrate/deploy to staging/production
____________________________
🔥 Learn how to build a responsive website from a Figma design with HTML, Sass/SCSS, JS ➡️ coder-coder.com/responsive/
😎 Join the Coder Coder Club to support the channel! courses.coder-coder.com/p/club
✉️ Want to get emails about new videos, course sales, and other web dev news? Sign up here: coder-coder.com/subscribe/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b
🤖 My main channel: @TheCoderCoder
## OTHER STUFF
👕 Get my hoodie here: coder-coder.com/merch
🎨 Get my VS Code theme: marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme
🔽 FOLLOW ME
Twitter -- thecodercoder
Instagram -- thecodercoder
#css #javascript #html
⭐ Starter code: github.com/thecodercoder/cc-developer-portfolio-starter
⭐ Finished source code & Figma file (inside the Coder Club): courses.coder-coder.com/courses/2574158/lectures/58456765
🔴 SETUP
0:00 - Intro
1:39 - Set up SiteGround site
7:14 - Create WordPress website
8:30 - SiteGround WordPress plugins & tools
🔴 STATIC HTML/SCSS WEBSITE
12:52 - Start building static website with HTML/SCSS
23:12 - HTML markup
40:06 - Global styles
1:28:45 - Header styles
1:35:23 - Hero styles
1:49:37 - Skills styles
2:05:39 - Projects styles
2:29:11 - Contact styles
🔴 CUSTOM WORDPRESS THEME
2:42:44 - Set up local WordPress, install starter theme & plugins
2:54:58 - Build custom theme
3:04:10 - Integrate HTML/SCSS into theme files
3:14:42 - Create ACF custom fields for content
4:05:28 - Custom post type for Projects
4:28:12 - Custom post type for Contact
5:06:23 - Migrate/deploy to staging/production
____________________________
🔥 Learn how to build a responsive website from a Figma design with HTML, Sass/SCSS, JS ➡️ coder-coder.com/responsive/
😎 Join the Coder Coder Club to support the channel! courses.coder-coder.com/p/club
✉️ Want to get emails about new videos, course sales, and other web dev news? Sign up here: coder-coder.com/subscribe/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b
🤖 My main channel: @TheCoderCoder
## OTHER STUFF
👕 Get my hoodie here: coder-coder.com/merch
🎨 Get my VS Code theme: marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme
🔽 FOLLOW ME
Twitter -- thecodercoder
Instagram -- thecodercoder
#css #javascript #html
มุมมอง: 3 367
วีดีโอ
Build a school/education landing page with HTML & CSS
มุมมอง 24K3 หลายเดือนก่อน
🔥 Learn how to build a responsive website with HTML, Sass/SCSS, JS ➡️ coder-coder.com/responsive/ 😎 Join the Coder Coder Club to support the channel! courses.coder-coder.com/p/club In this video, I'll show you how to build a responsive landing page for an online school/education courses website with HTML and CSS. 00:00 - Intro & HTML/CSS setup 40:15 - Header 1:12:53 - Hero section 2:10:56 - Cou...
Building a Product Landing Page with HTML & CSS
มุมมอง 29K5 หลายเดือนก่อน
🔥 Learn how to build a responsive website from a Figma design with HTML, Sass/SCSS, JS ➡️ coder-coder.com/responsive/ 😎 Join the Coder Coder Club and get sneak peeks of videos: courses.coder-coder.com/p/club 0:00:00 Intro and setup 0:09:52 Top Navigation 0:35:22 Hero section 2:17:57 Details section 3:00:21 Features section ⭐ My source code on GitHub: github.com/thecodercoder/fem-typemaster-land...
Building an Agency Homepage with HTML & SCSS
มุมมอง 8Kปีที่แล้ว
🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, JS ➡️ coder-coder.com/responsive/ 😎 Join the Coder Coder Club and get sneak peeks of videos: courses.coder-coder.com/p/club In this Frontend Mentor challenge, I build the Workit agency homepage from a Figma design. 0:00 - Intro and setup files 8:05 - Setup colors and Google fonts 34:30 - Wrapper/container styles 43:2...
Building a Responsive News Homepage | HTML, SCSS, JS
มุมมอง 17Kปีที่แล้ว
🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, JS ➡️ coder-coder.com/responsive/ 😎 Join the Coder Coder Club and get sneak peeks of videos: courses.coder-coder.com/p/club In this video, I show you how I built a News Homepage, a challenge from FrontendMentor.io, with HTML, SCSS, and JavaScript. I used CSS grid and subgrid for the layout, and built an animated hamb...
Why didn't you just edit out the header image in Photoshop, not only to get rid of the hidden part, but also the transparent part?
Create as well HTML and CSS series courses as well?
why dont you share your figma design with us...everyone else do...make your viewers happy Sis...its an advise from your Bro
can you please share figma design link? Thanks!
Hey codercoder, I really enjoyed your video. Could you please post a new video with React JS and SCSS?
Great work as usual!
2:20:00
omg its so cool to code using sass i may to re-learn it and use it more often instead of tailwind lol
I get too confuse because of constant changes in hero please please jesse make it easy next time. Thanks
This is awesome! Thank you for this video. :)
Hi, thanks for the video, in 30:33 you did not choose the 2x tablet image to get the dimensions, is there a problem to choose the '1x' version? I'm confused
2x version provides more better visuals
@@samialvi4226 i know this, but she choose the width and height of the 2x for mobile and the 1x for tablet
I love it but it is expensive for now
Thanks!!!
Hi Coder. Great video. Just curious though: I noticed that you are using the classic editor, did you (or Siteground) need to install a plugin to use it? Also, as a professional web dev, what are your thoughts about block themes?
Thanks for watching! Yes, you can install a plug-in called "Classic Editor" and that will let you use the original editor. I like using it along with Advanced Custom Fields to make WordPress more like a real CMS as opposed to a drag-and-drop page builder like Wix or SquareSpace. Block themes are another good way of building WordPress sites! I've heard really good things about Bricks builder, so I might try that out next time. Hope this helps!
Awesome video! Very handy to see how I can incorporate Wordpress 💪
That's great to hear!
thansssssssssssssssssssssssss
thankssssssssssssssssssssssssssssss
for your next video use tailwind. how to configure figma design system into tailwind
I do plan to do that at some point!
Wow👌
Hay mam it is necessary and possible to remember whole css of a website. Please guid me kindky?
Had no idea you work or use WordPress. I know it's not very complicated to make your own theme, although I can suggest using a pagebuilder such as "Bricks". This is one of the most useful and professional pagebuilders out there. Of course, I will watch the whole video, as soon I have time. It's a longer one, so this needs time and focus. Saved for later.
Hi Jessica We need an ecommerce, blog,Social media and LMS build
Second channel link? 🔗
This is the second channel, if that's what you're asking?
keep it up and praise the lord!!
Hey this is a great video, very helpful! Could you also maybe do a shorter video as an extension to this video, for blog posts as well please? It would be a helpful addition for those who want to publish blogs on their portfolio site. Thanks 🙌
can you do the similar kind of video where you are converting figma design in react or maybe nextjs? It will be helpful.Thank you!!!
My favorite and cute teacher ❤❤
Nyz one coder❤
soooooo veryyyyyyyyy heplful.sweet
Why not save your time by using Bootstrap and then writing some custom codes to modify certain sections?
I would like to learn web full stacks, I just got a Ipad Pro 4generation. What do you think I need as minimal to start? Can I use a raspberry?
You are the best!. This is just the channel I have been looking for. Not scripted.
I learnt many things in just 1 hour. Making notes as i watch this video. Thanks alot!!
Awesome, glad you've found this helpful!
Thank you very much.
verry informative can i know whats the name of the vscode theme
This helps a lot to see how an actually website frontend made!.THANKS
Sou do Brasil e descobri seu canal agora, é incrivel seu talento e conhecimento, muito inspirador.
The world of AI landing page builders this was needed.
I’m new subscriber keep it up queen
can i get the name of icons pack you are using?
Hi coder coder. My question is why you are using "root" in scss while you could make variables using '$'?
I think css custom properties are better for colors than Sass variables because you can change them on the fly, like for dark/light mode or other cases. But Sass variables will still work!
@@codercoderbuilds Got it.. Thanks for replaying
great tutorial, next time make a website which have more animations designs
In real world projects would designers give you some documentation for their design as a handover?
Honestly, I the most I have gotten is annotation notes in the design file. But usually no docs, so if I have questions I need to talk to the designer again
on Figma -> if you press command and click on an element you can select that element directly :D
Hi can you do video on colors? How to choose colors for designs.
love from Bangladesh dude❤
this is what I'v been looking for. thanks!
Glad this was helpful for you!
Is she a lesbian?🤔🤔
I'm hooked! I hope you keep doing this
Definitely will make more of these!
Great video, learned a lot! Thank you!
awesome, glad it was helpful for you!