Coder Coder Builds
Coder Coder Builds
  • 5
  • 80 991
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
มุมมอง: 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...

ความคิดเห็น

  • @felipemagalhaes567
    @felipemagalhaes567 21 ชั่วโมงที่ผ่านมา

    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?

  • @moefarah2390
    @moefarah2390 14 วันที่ผ่านมา

    Create as well HTML and CSS series courses as well?

  • @arhammughal1742
    @arhammughal1742 21 วันที่ผ่านมา

    why dont you share your figma design with us...everyone else do...make your viewers happy Sis...its an advise from your Bro

  • @samialvi4226
    @samialvi4226 22 วันที่ผ่านมา

    can you please share figma design link? Thanks!

  • @seekknowledge1928
    @seekknowledge1928 24 วันที่ผ่านมา

    Hey codercoder, I really enjoyed your video. Could you please post a new video with React JS and SCSS?

  • @samialvi4226
    @samialvi4226 24 วันที่ผ่านมา

    Great work as usual!

  • @redoy49
    @redoy49 26 วันที่ผ่านมา

    2:20:00

  • @Dev-f8y
    @Dev-f8y 27 วันที่ผ่านมา

    omg its so cool to code using sass i may to re-learn it and use it more often instead of tailwind lol

  • @sumairamaqsood4578
    @sumairamaqsood4578 28 วันที่ผ่านมา

    I get too confuse because of constant changes in hero please please jesse make it easy next time. Thanks

  • @nikola93n
    @nikola93n หลายเดือนก่อน

    This is awesome! Thank you for this video. :)

  • @evandromatt
    @evandromatt หลายเดือนก่อน

    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

    • @samialvi4226
      @samialvi4226 22 วันที่ผ่านมา

      2x version provides more better visuals

    • @evandromatt
      @evandromatt 14 วันที่ผ่านมา

      @@samialvi4226 i know this, but she choose the width and height of the 2x for mobile and the 1x for tablet

  • @AlThePal78
    @AlThePal78 หลายเดือนก่อน

    I love it but it is expensive for now

  • @alberto_gs
    @alberto_gs หลายเดือนก่อน

    Thanks!!!

  • @darren47774
    @darren47774 หลายเดือนก่อน

    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?

    • @codercoderbuilds
      @codercoderbuilds หลายเดือนก่อน

      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!

  • @shwagooon1843
    @shwagooon1843 หลายเดือนก่อน

    Awesome video! Very handy to see how I can incorporate Wordpress 💪

  • @abdulhhany
    @abdulhhany หลายเดือนก่อน

    thansssssssssssssssssssssssss

  • @abdulhhany
    @abdulhhany หลายเดือนก่อน

    thankssssssssssssssssssssssssssssss

  • @sujoykrhaldar
    @sujoykrhaldar หลายเดือนก่อน

    for your next video use tailwind. how to configure figma design system into tailwind

    • @codercoderbuilds
      @codercoderbuilds หลายเดือนก่อน

      I do plan to do that at some point!

  • @althafabbas5385
    @althafabbas5385 หลายเดือนก่อน

    Wow👌

  • @sohaibrizwan-lq7zl
    @sohaibrizwan-lq7zl หลายเดือนก่อน

    Hay mam it is necessary and possible to remember whole css of a website. Please guid me kindky?

  • @PicSta
    @PicSta หลายเดือนก่อน

    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.

  • @abelmarkos5753
    @abelmarkos5753 หลายเดือนก่อน

    Hi Jessica We need an ecommerce, blog,Social media and LMS build

  • @Extension-Hub
    @Extension-Hub หลายเดือนก่อน

    Second channel link? 🔗

    • @codercoderbuilds
      @codercoderbuilds หลายเดือนก่อน

      This is the second channel, if that's what you're asking?

  • @dakshrajoriya4694
    @dakshrajoriya4694 หลายเดือนก่อน

    keep it up and praise the lord!!

  • @vinoopb
    @vinoopb หลายเดือนก่อน

    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 🙌

  • @AegonTheConqueror-07
    @AegonTheConqueror-07 หลายเดือนก่อน

    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!!!

  • @ram0008aspirant
    @ram0008aspirant หลายเดือนก่อน

    My favorite and cute teacher ❤❤

  • @gokulg8884
    @gokulg8884 หลายเดือนก่อน

    Nyz one coder❤

  • @gunu404
    @gunu404 หลายเดือนก่อน

    soooooo veryyyyyyyyy heplful.sweet

  • @CitizenEa
    @CitizenEa หลายเดือนก่อน

    Why not save your time by using Bootstrap and then writing some custom codes to modify certain sections?

  • @LianAlexander
    @LianAlexander 2 หลายเดือนก่อน

    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?

  • @flexdrumz
    @flexdrumz 2 หลายเดือนก่อน

    You are the best!. This is just the channel I have been looking for. Not scripted.

  • @_dheerajgupta
    @_dheerajgupta 2 หลายเดือนก่อน

    I learnt many things in just 1 hour. Making notes as i watch this video. Thanks alot!!

    • @codercoderbuilds
      @codercoderbuilds 2 หลายเดือนก่อน

      Awesome, glad you've found this helpful!

  • @ugurkorkmaz7968
    @ugurkorkmaz7968 2 หลายเดือนก่อน

    Thank you very much.

  • @anasschaouki2401
    @anasschaouki2401 2 หลายเดือนก่อน

    verry informative can i know whats the name of the vscode theme

  • @rouisaek
    @rouisaek 2 หลายเดือนก่อน

    This helps a lot to see how an actually website frontend made!.THANKS

  • @DavidMuller-h2o
    @DavidMuller-h2o 2 หลายเดือนก่อน

    Sou do Brasil e descobri seu canal agora, é incrivel seu talento e conhecimento, muito inspirador.

  • @intelpakistan
    @intelpakistan 2 หลายเดือนก่อน

    The world of AI landing page builders this was needed.

  • @mohsenmk2537
    @mohsenmk2537 2 หลายเดือนก่อน

    I’m new subscriber keep it up queen

  • @ameygaikar8689
    @ameygaikar8689 2 หลายเดือนก่อน

    can i get the name of icons pack you are using?

  • @seekknowledge1928
    @seekknowledge1928 2 หลายเดือนก่อน

    Hi coder coder. My question is why you are using "root" in scss while you could make variables using '$'?

    • @codercoderbuilds
      @codercoderbuilds 2 หลายเดือนก่อน

      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!

    • @seekknowledge1928
      @seekknowledge1928 2 หลายเดือนก่อน

      @@codercoderbuilds Got it.. Thanks for replaying

  • @himanshugusain3283
    @himanshugusain3283 3 หลายเดือนก่อน

    great tutorial, next time make a website which have more animations designs

  • @santossilva
    @santossilva 3 หลายเดือนก่อน

    In real world projects would designers give you some documentation for their design as a handover?

    • @codercoderbuilds
      @codercoderbuilds 2 หลายเดือนก่อน

      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

  • @santossilva
    @santossilva 3 หลายเดือนก่อน

    on Figma -> if you press command and click on an element you can select that element directly :D

  • @saugat3320
    @saugat3320 3 หลายเดือนก่อน

    Hi can you do video on colors? How to choose colors for designs.

  • @azshawon
    @azshawon 3 หลายเดือนก่อน

    love from Bangladesh dude❤

  • @sherzodtoshpulatov9173
    @sherzodtoshpulatov9173 3 หลายเดือนก่อน

    this is what I'v been looking for. thanks!

    • @codercoderbuilds
      @codercoderbuilds 3 หลายเดือนก่อน

      Glad this was helpful for you!

  • @Victorioustechman
    @Victorioustechman 3 หลายเดือนก่อน

    Is she a lesbian?🤔🤔

  • @ExileDriver
    @ExileDriver 3 หลายเดือนก่อน

    I'm hooked! I hope you keep doing this

    • @codercoderbuilds
      @codercoderbuilds 3 หลายเดือนก่อน

      Definitely will make more of these!

  • @Mateus.95.
    @Mateus.95. 3 หลายเดือนก่อน

    Great video, learned a lot! Thank you!

    • @codercoderbuilds
      @codercoderbuilds 3 หลายเดือนก่อน

      awesome, glad it was helpful for you!