- Видео 241
- Просмотров 1 959 734
A Designer Who Codes
США
Добавлен 19 мар 2013
Hi there. I'm Haydn and I'm all about helping you learn to design on the web, through code. Code isn't that hard, and I'm here to help you realize that. In addition, I'm all about helping web developers and designers become self-employed.
Customize Vimeo Video Player to make videos amazing on your website
Vimeo is amazing. Here's how to customize the look of your Vimeo player for your website.
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerwhocodes.com
ADWC Pro provides you with:
• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!
Price:
Just $6/mo. or $49/year (32% off monthly)
-------
Got a question for me?
adesignerwhocodes.com/contact/
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerwhocodes.com
ADWC Pro provides you with:
• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!
Price:
Just $6/mo. or $49/year (32% off monthly)
-------
Got a question for me?
adesignerwhocodes.com/contact/
Просмотров: 215
Видео
Embed a Responsive Vertical Video with HTML & CSS
Просмотров 2502 месяца назад
Here's the step-by-step how-to of how to embed a vertical video in a website using HTML & CSS. - - - - - - ⤵ Download ALL of my source codes & more! pro.adesignerwhocodes.com One low monthly price ADWC Pro provides you with: • Access to all the source codes for ALL projects • Bootstrap Bootstrap online course (retail $79) w/ supplied source code • Updates of ADWC and the web dev business • and ...
SEO & HTML Guide for 2024
Просмотров 3,1 тыс.6 месяцев назад
Here's how to supercharge your SEO in 2024. Not from keywords but from really good HTML structures and accessibility. Purchase & download source code: adwc.dev/products/191 Search Engine Optimization (SEO) Starter Guide (from Google): developers.google.com/search/docs/fundamentals/seo-starter-guide World Wide Web Consortium (W3C): www.w3.org - - - - - - ⤵ Download ALL of my source codes & more!...
Why & How to use Gatsby (plugin) Images
Просмотров 5466 месяцев назад
So why should we use Gatsby Images? Take look. We will then get into the how of Gatsby images and setup one image which we can then publish and test with Google. Purchase and download the source code: adwc.dev/products/190 - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL proj...
How to change the bullet color in an unordered list (ul/li) in HTML/CSS
Просмотров 1,6 тыс.6 месяцев назад
Here's how to easily change the color of the bullets in an unordered list using just a bit of html/css. - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projects • Bootstrap Bootstrap online course (retail $79) w/ supplied source code • All future online courses (Gatsby v5 co...
How to Install & Use Font Awesome in React
Просмотров 3,3 тыс.7 месяцев назад
Here's how to install & use font awesome icons in your react project. Note you have to almost manually type in the brands icon set (which you'll see in the video) as it is not by default available. Purchase & download the source code: adesignerwhocodes.ck.page/products/react-font-awesome-project ToC: 00:00 Overview 00:23 Installing Font Awesome into React 02:16 Using Font Awesome in our React P...
Easily link Stripe payments to your website
Просмотров 2077 месяцев назад
Here's the easy way to link up Stripe links up to your website. (Also you are more then welcome to test out how Stripe works by purchasing the t-shirt if you want. Though know that no shirt will actually be shipped.) - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projects •...
How to add og meta images in React
Просмотров 2,5 тыс.7 месяцев назад
Here's how to add a social / preview image to your react project. Note that the components folder in this project for Gatsby might be a different location for Next or other react frameworks. Demo: og-image-demo.haydn.co/ - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projec...
How to add Metadata to React JS (Gatsby and Next JS too!)
Просмотров 43011 месяцев назад
Here's how to setup metadata, including open graph information, in React JS. - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projects • Bootstrap Bootstrap online course (retail $79) w/ supplied source code • All future online courses (Gatsby v5 course coming soon) • Updates...
Embed a Responsive Google Map in HTML / CSS
Просмотров 2,1 тыс.Год назад
Here's how to embed a Google map into HTML and make it responsive. - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projects • Bootstrap Bootstrap online course (retail $79) w/ supplied source code • All future online courses (Gatsby v5 course coming soon) • Updates of ADWC a...
Embed Responsive Google Maps in React JS
Просмотров 4,2 тыс.Год назад
Here's how to embed a Google Map in React and make it responsive. Purchase & download the source code: adwc.dev/products/183-react - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projects • Bootstrap Bootstrap online course (retail $79) w/ supplied source code • All future o...
Automated emails made easy
Просмотров 159Год назад
ConvertKit makes automating emails easy: bit.ly/convertKit-trial (Previous Video) How to create a landing page form on ConvertKit: ruclips.net/video/HAe5ml-2Org/видео.html - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projects • Bootstrap Bootstrap online course (retail $7...
Create & Customize a Landing Page with a Lead Magnet to Collect Emails
Просмотров 2,1 тыс.Год назад
Create a landing page to deliver a lead magnet to your audience. It's easy to do with ConvertKit bit.ly/convertKit-trial - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projects • Bootstrap Bootstrap online course (retail $79) w/ supplied source code • All future online cour...
Which one is better? :last-child or :last-of-type?
Просмотров 154Год назад
I'll break down which one to use and overall which one is a better choice. - - - - - - ⤵ Download ALL of my source codes & more! Introducing ADWC PRO pro.adesignerwhocodes.com ADWC Pro provides you with: • Access to all the source codes for ALL projects • Bootstrap Bootstrap online course (retail $79) w/ supplied source code • All future online courses (Gatsby v5 course coming soon) • Updates o...
Netlify CMS & Gatsby Tutorial #8: Going Alphabetical w/ GraphQL
Просмотров 249Год назад
Netlify CMS & Gatsby Tutorial #8: Going Alphabetical w/ GraphQL
Netlify CMS & Gatsby Tutorial #7: Making Netlify CMS active in Netlify
Просмотров 560Год назад
Netlify CMS & Gatsby Tutorial #7: Making Netlify CMS active in Netlify
Netlify CMS & Gatsby Tutorial #6: Setting up the Admin file
Просмотров 844Год назад
Netlify CMS & Gatsby Tutorial #6: Setting up the Admin file
Netlify CMS & Gatsby Tutorial #5: Responsive (React) Bootstrap Cards with Markdown Info
Просмотров 420Год назад
Netlify CMS & Gatsby Tutorial #5: Responsive (React) Bootstrap Cards with Markdown Info
Netlify CMS & Gatsby Tutorial #4: Pulling Markdown data into Gatsby
Просмотров 690Год назад
Netlify CMS & Gatsby Tutorial #4: Pulling Markdown data into Gatsby
Netlify CMS & Gatsby Tutorial #3: Pulling Data from GraphQL
Просмотров 747Год назад
Netlify CMS & Gatsby Tutorial #3: Pulling Data from GraphQL
Netlify CMS & Gatsby Tutorial #2: Connect Gatsby to Netlify
Просмотров 1,4 тыс.Год назад
Netlify CMS & Gatsby Tutorial #2: Connect Gatsby to Netlify
Netlify CMS to StaticCMS Transition Guide using Gatsby JS
Просмотров 823Год назад
Netlify CMS to StaticCMS Transition Guide using Gatsby JS
Netlify CMS & Gatsby Tutorial #1: Setup Gatsby and install React Bootstrap
Просмотров 2,6 тыс.Год назад
Netlify CMS & Gatsby Tutorial #1: Setup Gatsby and install React Bootstrap
Digitally crop images with css (and make it responsive)
Просмотров 827Год назад
Digitally crop images with css (and make it responsive)
Custom bootstrap 5 form select border colors
Просмотров 4,2 тыс.Год назад
Custom bootstrap 5 form select border colors
Vertically Aligned Bootstrap Cards (and it's responsive too!)
Просмотров 8 тыс.Год назад
Vertically Aligned Bootstrap Cards (and it's responsive too!)
Get a PDF contract / agreement digitally signed easily w/ Adobe Acrobat - easily
Просмотров 10 тыс.Год назад
Get a PDF contract / agreement digitally signed easily w/ Adobe Acrobat - easily
Align Rows & Cols // A Bootstrap 5 Responsive Flex Guide // Part 4
Просмотров 4,6 тыс.Год назад
Align Rows & Cols // A Bootstrap 5 Responsive Flex Guide // Part 4
Justying Content with Rows & Cols // A Bootstrap 5 Responsive Flex Guide // Part 3
Просмотров 5 тыс.Год назад
Justying Content with Rows & Cols // A Bootstrap 5 Responsive Flex Guide // Part 3
Thank you sir 🙏
Thank you. Learned something new like "aria-label".
Thanks Bro
Thanks! Still helpful today!
Thanks after watching so many useless videos your video actually helped me...
same
Wow! An English speaker! Thank you!!!
awesome, 10q so much!
this helped me a lot keep it up
Thanks!
A useful, easy to follow tutorial. Thank you! ^^
I don’t agree with using a / in self closing tags, the html parser completely ignores it and it’s confusing for beginners because it IS how react functions so they may get methods confused
👍👍👍👍👍👍
Thank you! :D
When i try this the button is pushed to the bottom of the card like in the video but i dont have enough text to fill out the space so now the title, text and button arent evenly spaced vertically anymore. Is there a way to fix this?
thank you
Thank you sir. I learned HTML and didn't know this 😂 but now I know. Thank you sir
Source code please
pro.adesignerwhocodes.com/source-codes/
Account is cancelled and can not accept new subscribers.
Hello ! for me ".navbar-toggler .middle-bar { opacity: 0; filter: alpha (opacity=0); }" doesn't work at all, help me please ?
hello, thank you for this
Can you make them shrink together when the browser shrinks using only html css and no bootstrap
Sure. But don’t go too small. Font size in CSS can take care of it.
Thanks you much bro i was strugling so much for this ❤❤
You are so welcome
Mystrika is AI writing feature is a game changer for cold email outreach. Writing personalized emails at the prospect level has never been easier. Their comprehensive analytics allow you to track and optimize your campaigns effectively. Give Mystrika a try and unleash the full potential of your email outreach strategies!
Thanks for the video. Can you pls explain if there are any advantages of using React Bootstrap over vanilla Bootstrap since both can be integrated in a React app?
More shorthand. For instance <Container> vs <div class”container”> or in react <div className=“container”>
@@ADesignerWhoCodes Yes, but that is syntax level change. Is there any other benefit (like performance or something else) of using React Bootstrap over vanilla Bootstrap? As far as I understand based on your video, React Bootstrap also generates same HTML output, hence I asked that question.
Then nope :) you are all good
@@ADesignerWhoCodes I was going through Bootstrap documentation and got the answer I was looking for. "While the Bootstrap CSS can be used with any framework, the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position. A better alternative for those using this type of frameworks is to use a framework-specific package instead of the Bootstrap JavaScript." Hope this helps.
My deepest thanks, I was looking for a way to build a basic 3 pages website with php and without media queries. I was missing how to create a responsive typography, I just knew bootstrap's responsive grids and elements. Now I can see myself using only bootstrap for the entire project, thanks man I'll keep learning from your amazing channel 🙏😊
It's not getting a confirmation email after feeling information
Awesome, explained everything very well!
great explanation thank you sir 👆
Thank you for this very practical video!
Thank you!
Thank you for this very useful video!
I have my site hosted from GitHub and a custom domain as well as a stripe account however my payment.html is just a account creation form and a stripe buy button however the user isn’t able to navigate to the payment page not sure what’s goin on. I also have a button when pressed the audio isn’t played all functionality works when the html is run locally
thank you so much !
I tried to buy your code for $3.00 and it did not work
I changed things around. Email me from my site and I’ll help.
Thank you so much brother ❤ I'm from India love your video
Welcome!
this is how you teach !!!
You are too kind.
Thank you so much sir 🎉
So nice of you
This is great. I learned a lot. Thank you.
Glad it was helpful!
Thank you!
is it possible to make cards hoverable so that they are clickable?
Yes, but there's no hover on am mobile site. Just use a:hover.
is there any way to customize the colors of the nav links?
Yes. Just inspect the css and then in a custom css, change the color. That could make for a good future video :)
Thanks for sharing! Noticed that making the update didn't improve your SEO score....Prior to you making the update your SEO score was a 91 and still the same score after the update.
Ya. I think I ran the score too quickly. But it will improve it. :) Call it movie magic haha.
let say you randomly download images from the web, they're most likely not going to be the same ratio, how do you make them the same ratio so that each card is the same size like how you did in the video?
Here you go. Crop images with CSS. ruclips.net/video/iFjGuDUwAhs/видео.htmlsi=AzgGFgLROvHEf54S Or go into Photoshop :)
instant subscriber! Well done
Does this works on latest Wordpress? I did exactly as your tutorial but, it wasn't loading the GIF.
Not entirely sure. Have stepped away from the WordPress world.
Oh ok, all the best on your new endeavor! @@ADesignerWhoCodes
Thank you so much! This is probably the best video on font awesome icons on youtube!
Wow, thanks!
@@ADesignerWhoCodes hi, I'm just wondering if there was a way to get regular icons instead of the solid ones.
thanks
I have two cards next each other that have different amounts of text in so theyre not the same height Ive tried the 'h-100' class on the card and ive tried 'align-items-stretch' on the col but they both leave padding under the image instead of making it the same height. Do you know how to make both cards the same height, without leaving space under image?
It's h-100 and flex-grow-1. Check out Bootstrap flex. I could have sworn I made a video on that, but it looks like I didn't. Well I know what video I'm going to make in the future :)
@@ADesignerWhoCodes thanks I'll check that out but would you put flex-grow-1 on the same line that h-100 is on?
It's actually a child. Cool @@dusteddream3070
great video, but you missed dynamic images !
how to do it without showing the source file?
Not quite sure what you mean. File has to come from somewhere.
@@ADesignerWhoCodeslike how youtube streams content, there is no actual file , but a chunk that keeps loading with different chunk,
Every RUclips video has a share function in which you can use to embed it with.@@hqcart1
google wont let me do the $6 one.. I have to pay $20. any ideas why?