Build An HTML5 Website With A Responsive Layout

Показать описание

In this video we will build a clean coded responsive mobile friendly HTML5 website for a fictional web design company. We will go over semantic HTML tags like header and footer as well as the basics of HTML and CSS. This is a great project for beginners.

Like this? Check out my 21 hour HTML/CSS course:

CODE DOWNLOAD:

SUGGESTED VIDEOS:
HTML Crash Course For Absolute Beginners -

BECOME A PATRON: Show support & get perks!

ONE TIME DONATIONS:

COURSES & MORE INFO:

FOLLOW TRAVERSY MEDIA:

NEW DISCORD CHAT SERVER:

Рекомендации по теме

Комментарии

The first video I watched as a beginner, in 2017. I am a front-end web developer now. Thank you Brad! ❤️

dev.shafkhan

'"Sorry if you can hear my son shouting upstairs."
I don't know how old that boy of yours is but hopefully one day he'll know just how much his father has helped so many of us.
Super-useful vid.
Many Thanks for sharing your knowledge and all the Best for the year ahead.

samdavepollard

no one gonna mention how soft-spoken he is?
so tender and soothing! loving it

lyna

*Time stamps*
0:00 — Intro (not flatform, no library, Atom editor, markup first then CSS)
4:38 — Semantic tags
*HTML*
*<head> part*
5:30 — Create .html file and link to .css file
8:00 — <meta> tag (viewport, description, author, keywords)
*<body> part*
9:50 — <header> tag (#branding) (<div> container, <nav> tag)
12:18 — <nav> tag (Home, About, Services link)
13:30 — <section> tag (#showcase)
15:25 — <section> tag (#newsletter) (input field, button "Subscribe" )
17:35 — <section> tag (#boxes) (3 boxes with image on website)
20:15 — <footer> tag (#footer)
*CSS*
20:54 — common setting (font, <div> container, background)
24:40 — #branding & Home, About, Service link (min-height)
30:40 — Highlight one word in a sentence
33:07 — #showcase (background image, text)
36:33 — #newsletter (input field, style the "Subscribe" button )
40:13 — #boxes (3 boxes with image on website)
42:10 — #footer
*"About" Page*
43:00 — HTML file (<article>, <aside>)
46:25 — CSS file
*"Services" Page*
42:10 — HTML file (<form> to type information)
52:32 — CSS file
54:33 — @media queries (responsive on mobile device size)

yvestrung

I just came here to thank you Brad from the bottom of my heart. I remember doing this course 7 years ago after my parents separated and I had to provide for my family. Even in India you made me believe I can become a coder. Its been seven years and I'm a senior web dev with a successful firm of my own now. This video just showed up in my feed and made me emotional . Thanks a lot Brad lots of love and respect to you big brother. ❤

amarpreetsingh

I am a begginer and it's my first website I built, it took me a whole day right to 4:30 am until I finally finished, fully responsive, looking at your code minimaly. It's crazy how I get a feeling of achievement, as website looks damn cool x) Thank you for the content!

ToDaXi

I've been to dedicated videos on CSS but your style of development (HTML first, CSS second) as well as iterative approach (try it, see what happens) is a breath of fresh air! Most instructors put 30 minutes of coding, then show you the whole shooting match, without getting a chance to see what each little change does. Yours is the best type of instruction on subjects like this! Just got another subscriber!

houstonfirefox

on behalf of all the people we are very thankful for this video. you are the hero we dont deserve, but the hero we need

ammarfitwalla

Comming from someone who has been struggling to get into webdev because of the lack of well made tutorials (most are underexplained or have a ton of useless info) I hate it when a video takes 5 minutes to explain me why I should install sublime text, and you just said, oh use atom if you like k (i use atom cause its clean and works tbh). I have to say yours is perfectly what I needed. Kudos for your simple explanations and "to the point" info.

baseestelar

In 2020 this tutorial remains the clearest, easiest, and most understandable introduction to HTML5 and CSS3. I wish college and university instructors teaching basic web development would use Brad's teaching style.

xA

Sharing knowledge is one of the greatest gifts especially one like this. Thanks Brad for being so generous! You give us hope to be a developer. I will pay you back in the near future.

edcarino

This is one of the best videos I've seen on how to build a responsive website using HTML5 and CSS3. The instructor relays the logic for every line of code written and seems to flow through this tutorial effortlessly while coding. The way that he explains how to make the site responsive, step-by-step, is appreciated, informative and concise. I've watched this twice before coding along and will use the notes for this for building site in the future. Thanks so much!!

astradaniels

Brad, I've barely watched 4 min of this video and I absolutely HAD to stop and say, "Thank you!"! I've been writing code for longer than most of you and your subscribers have been alive, so I'm very comfortable with the back end. However, this is EXACTLY what I've been waiting for. I know you're very proud of that plaque from YouTube. And rightly so. But I hope you appreciate how many people you have helped along the way! And possibly in ways you never imagined. :)

mikespencer

This video brought me first prize in web designing competition in college❤️

hafeezpp

dude u jus took my coding competency to a whole new level and i am grateful for your work i sincerely hope from the bottom of my heart that your life is showered with blessings and prosperity keep it up man!! THANK YOU

wazhamuzila

Brad, I absolutely love your videos. I need to learn HTML, CSS and JavaScript to advance in my current job, and your videos are making it MUCH, MUCH easier on me and other newbies like me. You've EARNED a subscriber, and I cannot wait to watch all of the new content that you put out! Awesome job, and I can't thank you enough.

SpenSahDude

I'm a beginner, and this is the first website I've built that I'm proud of. Took me a while to build this, and I encountered some errors along with the tutorial, but I finally did it.

Thank you for this wonderful video!

macrovise

I built my first fully responsive website with HTML5 and CSS! Your crash courses on HTML and CSS were very useful to play with this code! Thanks to you Brad. As another commentator says, you can expect a big donation once I get my first pay as UI Designer. :)

Your videos keep igniting my designing passion.

Madhumathi

This tutorial is a real eye opener. It pieces together what I am struggling to understand on Codecademy. I feel much more enthusiastic and confident that I can do this and have fun while concentrating.

Thank you for providing guidance to a newbie like me....

jwrel

looking at this 4 years later. I am so grateful, brad.

archived

Build An HTML5 Website With A Responsive Layout

Build An HTML5 Website With A Responsive Layout

HTML5 Website Project for Beginners | First HTML Project Tutorial

Make a Simple HTML5 Website

Use WordPress, or just a Vanilla HTML5 site with CSS3?

Free Course: Beginner Web Design using HTML5, CSS3 & Visual Studio Code

HTML5 & CSS Development: Learn How to Build a Professional Website | Udemy, Jordan Hudgens

HTML5 Advanced Tutorial - HTML5 Semantics + How to build website using HTML5 Semantics

HTML5 & SCSS: How to Build a Professional Website From Scratch 🔥 VS Code, Figma

Course Review: Build Responsive Real World Websites with HTML5

How To Make Website Using HTML & CSS | Full Responsive Multi Page Website Design Step by Step

Build An HTML5 Template With Bootstrap and SASS - Part 1

Learn To Make Responsive Website Using HTML5 And CSS3 Only. (No Javascript)

[#1] Build Responsive Website Using HTML5, CSS3, JS And Bootstrap

how to make html5 gaming website free Earn $200 per Month

HTML Tutorial for Beginners: HTML Crash Course

Build Responsive Real World Websites with HTML5 and CSS3 (Free Course)

Build a Responsive, Mobile First Website - HTML5 & CSS3

Build Your First Website with HTML5 and CSS3 (Teaser)

Build a responsive website using HTML5 and CSS3 (Flexbox)

Build A Responsive HTML Website with HTML5, CSS3 & Bootstrap 4

Build a Portfolio Website Using HTML5, CSS3, Bootstrap and Jquery

Build Responsive Real World Websites with HTML5 and CSS3

How To Create A Website Using HTML5 And CSS3 |Step By Step Guide 2020

How to build a Complete Responsive Website from scratch | Html5 CSS3 Website Design Tutorial