Screencast Build a Portfolio Web Page With HTML and CSS HTML/CSS

  • Jon Friskics



  1. xxquickxx1 said

    That is absolutely too basic. Not even HTML5. We're going back to basics now? Guys you need to push more into more advanced stuff. Plx do more on real world features like Groupon etc. That made me sign up again.

  2. mguren said

    I'd have to disagree with xxxquick. Although basic, this a great fundamentals course.

  3. knightstick said

    I disagree with xxxquick too! Even though this is pretty basic, it's always helpful to see someone else go through their process. Nothing wrong with polishing up on your fundamentals from time to time!

    Good job guys, keep them coming!

  4. cyberprompt said

    Can't belive I have to say this.. not everyone is going to be using a Mac. Please ALWAYS give options for software that each can use. is an option for all, for example. Also, anyone needing a course like this is probably going to be close to broke. Try to have free tools. Thanks.

  5. GaryPang said

    Thanks for the video. It's definitely helpful to how a page is built from beginning to end.

  6. xxquickxx1 said

    We've all been through fundamentals many times, from a basic courses to advanced and then basic again ? What I'd love to see is a collection of videos that would prepare you to be job ready. With all today's technologies and assets that people use everyday.

    I've spoken to James from Treehouse after completing all of their courses (and here at Codeschool), he said that I'm still not ready for a job.

    Soup to bits is an awesome feature as you can implement your knowledge into real apps, but this is still not enough. Codeschool came up with great thing Feature Focus and that's exactly what makes me happy. To see real world examples of complex features that we use everyday.

  7. Jeff DeSurra said

    Great job on this video! Incredibly helpful. I'd love to see a follow-up video that took this site and turned it into a responsive site. That would be great to see that process. I'd also like to see more use of HTML5. But seeing the start to finish from scratch was very helpful for me.

  8. Fabio Bracht said

    It IS incredibly simple, and I think you could have emphasized DRYness a little more on your CSS (for example, I guess you could have declared the font-family globally), but then again it's amazing the things we stumble on when we decide to put the theory on practice.

    I have completed almost all of the HTML/CSS courses on CodeSchool, plus the entire JavaScript Road Trip series and both jQuery courses, and when I decided I was ready to put something together I stumbled on a lot of very very basic stuff.

    So, I must say I enjoyed the video. It would be good, though, if we could have some sequels, in which you would take the same basic page you built here and add more and more complex styling and functionality. That would be ideal.

  9. digitalcloud said

    Thanks for the video John and Drew!! I enjoyed that you explained the process, and were detailed while writing the code :)

  10. goostavobg said

    I think you guys should make a post-video comments for small things that passed: -> Alternative open tools that runs on any OS -> The "right" way of measuring what size you neeed. And so on.

    By the way! Cool video.

  11. pascal huynh said

    Back to the basics !! It's always good to get back the basics :) Great video Drew and Jon !

  12. Bogdan Verbenets said

    I have to agree with xxquickxx1 that this was really very basic and a some times obvious. But on the other hand, the "Front-End Foundations" course was basic, too :) .

  13. juliehman said

    I absolutely enjoyed this course. Yes it was very basic, and sometimes I felt like screaming at you, lol, I still learned a lot. I needed to see how someone else goes about this process. You kept it very clean and orderly. It was perfect for me. Thank you!

  14. poiuy said

    Really great video. Well done. Jon really is an incredible teacher and goes through the thought process of what to think of. Please keep up the good work.

  15. Gustavo Freitas said

    Soup to Bits is a great come, since it gives the workflow in "pair programming" style, adding much to classes. These discussions are quite normal in a daily job, that why it matters. As developers, people must notice this is more like working proficiently. Using editors and tools like Sublime Text and Pixelmator will bring you agility and making things smoother. Great add and keep up with the good work guys!

  16. metr0n_ said

    Thank you for the video! If you don't mind me asking what sublime theme are you using?

  17. jaket32 said

    Nice to see. I was able to focus on the process because I wasn't trying to keep up with new syntax and features.

  18. Faculty

    Jon Friskics said

    Hi @metr0n_ - the Sublime theme is Blackboard. It's one of the built-in ones!

  19. chradkins0n said

    Thanks for the video guys! I think, in its context, it serves its purpose very nicely. It definitely gives a great foundation for what the page-building process is. I love the thorough approach, and the nice touch it gives in putting a cap on the preceding course. Looking forward to more like this, in the courses to come.

  20. lhenriquelpc said

    This video is simply awesome! It helped me very much to organize all the content about HTML and CSS in my mind and understand better how it is applied in a real project.

  21. SaiPat said

    Both the foundation and formation courses are really nice and the sops-to-bits is very helpful for newbies like me.But, i wish there are few more projects to do on my owm(kinda like an assignment to test my depth of understanding).Other than that, this is an excellent experience for me and i loved really loved the way to teach html and css.Thank you so much guys!

  22. Joni Peterson said

    Jon and Drew...thanks for a very informational video! I am just starting my journey into web development and thought you did a great job covering the basics. Keep up the good work!

  23. Christoph_Sommer said

    Hi Guys, thanks a lot for your course and Soup-to-Bits episode. I really enjoyed it and am looking forward to the next courses.

  24. Ron said

    I really appreciate having this video to help tie things together after the course. Watching you guys build a page using the techniques we just learned helped cement the ideas in my mind, and it let me focus on improving my styling and organization. Well done!

  25. tbrents said

    This was great! Thanks guys. I'm glad I found your site!!!

  26. ericjibe said

    Great screencast to build upon Front End Foundations!

  27. monami said

    An option of playing the video at different speeds would be cool here

  28. Mario Rodríguez said

    This video is a great idea to put on practice what we've learned on Front end foundations.

  29. st3vod said

    Awesome video - as a newbie to web development, and following your foundations course, I would not want this any more complicated as it consolidates and follows perfectly from the course before. Love your passion and drive, even at this basic level. Great video and perfect compliment to the proceeding course!

  30. mikeandike said

    This video is fantastic. I hope that there is a followup waiting for me when I finish fe Formations!!!

  31. Millie Macdonald said

    This video was great! As someone who taught themselves HTML and CSS years ago and therefore has more bad habits than good, this was a brilliant lesson on how to efficiently design and build a website. I really liked the little debates you had too, especially with how clearly you both explained your reasoning. Also, although going back to the basics was slightly annoying, it's been really helpful. There's a lot of new things I've discovered - some I'd never even thought of before - that seem really important and/or useful. I've got a whole page of notes! So thanks again. I'm moving on to Front-End Formations now and really hoping there's a video like this at the end of that course too!

  32. Heriberto Roman said

    Great vid defiantly helped put some more closer to the Front-end Foundations course. Great work guys!

  33. hky404 said

    Great content & presentation.

    Only complaint - When I minimize or maximize the video, the video resets and then I have to play the video from beginning.

  34. guydoms said

    This is a great presentation for a newcomer. Thoroughly enjoyable.

  35. Juan Javier Triff Cabanas said

    man, you are good, really really good educators, thank you so much for this resource, is, like you say "Crafted lovingly". May God repay you

  36. Oscar Batlle said

    I disagree with xxquickxx1 too! ... "If you can't fly then run, if you can't run then walk, if you can't walk then crawl, but whatever you do you have to keep moving forward." - Good job guys!

  37. Carlos Donze said

    Thanks so much for doing these! It's so useful to see two experienced developers walking through the process of actually building a site and talking about the reasoning behind their development choices.

    Please make more of these covering Intermediate and Advanced topics!!

  38. Brandon Grimaldo said

    Great video! Yes, it is basic, but this video is recommended right after an introduction to HTML & CSS. This video still has little ideas that can be a big help in the long run. I see people looking for free alternatives. Here are some recommendations: Notepad++: Text Editor GIMP: Image Editor

  39. wangxianhui1021 said

    I would like to see more realworld projects! The knowledge you learned in courses need to transfer to solve real world problem. Basic videos are welcome but we need more screencast that show the process of how you deal with a real life problem.

  40. Slade said

    After just 20 minutes into this video, its value is apparent. Sure, the project is simple, but what's being amplified here is the process, and real-time team approach to design and cooperative development. This is an excellent approach by the Code School producers/designers.

  41. Praveen Naik said

    Great job guys..! It gives a detailed understanding of the hierarchy that needs to be maintained and lays a strong foundation. Thumps Up to you guys!

  42. mgabem said

    I get stuck at the beginning every time when I try to refresh in Chrome. My main.css file does not seem to be effecting my html. Any thoughts on why it's not linking correctly? I've copied exactly how the guys do it in the video, but it just isn't working for me like it did for them.

  43. Eligio Garcia Landa said

    Great job. I think the money i invested on code school is been worth 100%. The contents are awesome, you feel the teachers close and with an understandable english (I'm from Spain living in UK, my english isn't quite good yet) for everyone and the learning paths are really good. Maybe i miss some english subs like Git path has. And this soup-to-bits after completing Front-end Foundations was the final touch for consolidate all the knowledgments adquired. Congratulations guys. I'm sure i'll stay here as long as it takes me to complete every path. Keep on going.

  44. Wilfried Lawson said

    It is really a great course you gave here. I'm already a dev who learned html by his own so I've already had some knowledge about stuff you showed in the exercices and this screencast. But I definitely learned something new too. So great job guys! I'm heading to the next courses on this path!

  45. Victoria91 said

    nice bottles :)

  46. MunchkinD2 said

    This is soo great. Thank you! I'm very new to html, or any programming really, and this video is super helpful.

  47. Student #1479934 said

    Thanks Drew, Thanks Jon! My name is Lucas, I'm from Brazil and I learn a lot with you guys. This is very basic, but how you guys says... Works in everything. I like your teach method, make the things very cleary, and again, Thank you.

  48. ardnivark said

    My first time with coding, you guys have made it so easy and enjoyable. Thank you! Looking forward to learn more cool things from you.

  49. Freddy Duque said

    just coming from front-end foundations, found this video very interesting because it helps me to reinforce the knowledge i just gained in the previous course.

  50. djangoles said

    Great Video for a relative newb of a couple of months.....

  51. aman gupta said

    Guys what a great walk-through... seriously a great recapturing.. :)

  52. Lkats said

    As someone who has never, ever done any kind of programming and is learning the absolute basics, I thought this video was really, really helpful! I will probably watch it over and over when I'm ready to build my own website. The only other comment I'd like to make is that sometimes you both talked over each other and it made it very hard to follow, and you spoke super fast. Other than that, fantastic! Thank you!

  53. ju1ce said

    Very useful case study. This puts all that was covered in Front-End Foundations into perspective.

  54. heliogabalo said

    cool !

  55. Gema López said

    Great video :) Basic but useful to remember!

  56. josephsayad said

    Thanks for the video! =)

  57. Jared Armes said

    Nice video, it was great to see the step-by-step process! Thanks for your time.

  58. efremk said

    Thanks for the video. Although it is basic, I understand the outline of webpage and hope to follow along in more videos. I have seen some webpages that have hundreds of lines which spooks me. I hope to learn more in the coming weeks.

  59. Ian Halloran said

    This was exactly what I was looking for after completing Front-End Foundations. Completing exercises with prompts is informative, but following along with the process from scratch was very useful.


  60. autumnmurena said

    This was really helpful to see all of the course content paired with the practical application of it! Really helped everything come together from the lessons.

  61. drbetteridge said

    Thank you for this video. It may be basic, but if you are just starting out and don't have the basics, you are sunk. I taught myself basic coding years ago, but no one ever explained how to get your work onto the server, etc. It made it very frustrating for me. Now I understand. Thanks again.

  62. Jonathan Chickie said

    A perfect follow-up to Front-End Formations! Sure, it's basic, but so are my skills right now. Excellent additional content and exactly what I needed. Thanks!

  63. LisaP said

    I recently completed both Front-End Foundations and Front-End Formations - both great courses. Watching this video was extremely valuable. I enjoyed watching the process of building a site and seeing the immediate results. I like that it was basic without too many "whiz-bang" features. I'm new to coding and web development, so the two courses and this video were ideal for me. Watching it gave me the idea to create sites for myself and my husband that we can add to our LinkedIn pages and showcase our skills and accomplishments. I believe employers today expect prospective candidates to have at least some technology skills. The type of page Jon built allows people to show rather than just tell potential employers what they're capable of. Thanks for this video. On to the next course!

  64. cdaisyk said

    It is really helpful to see something basic and straightforward like this; it definitely provides that stable working base upon which to build more complex projects. Thanks!

  65. Caiorb said

    Really great job, guys! I´ve never written a single code line in my life, so Codeschool is being very helpful for me. Very excited with the lessons and loved your methodology! Congrats!

  66. hollac04 said

    This screencast was perfect for a beginner like me and a great follow-up to the Front-end Foundations course I completed. Thank you Drew & Jon- keep up the great work!

  67. Gnatty said

    Thank you so much for this screencast. It has answered many of my questions.

  68. andres18hdz said

    this help me alot!!!! thank you

  69. vicky wong said

    It's good to see how developer build website from zero! Thanks you guys!

  70. Ivan Kušaković said

    This was amazing! Thank you very much! All the best

  71. Sachu_Leonid said

    thank u so much very useful

  72. Victor Potasso said

    I reckon you guys must show the basic html5 tags. In this case you could have tried tags like section, head, hgroup, footer, side, main... There is a HTML5 doctype but I even did not see these HTML tags. Or is it a best practice to code HTML5 page?

  73. Kuat Akparov said

    This is very cool video. Thanks!

  74. kenneffy said

    Very informative, love videos like these. The concepts were explained very well and video was structured in a way that was totally understandable.

  75. Halisson Alves said

    I loved the way that you teach guys. Very educational and useful. Thanks for your help! I hope you bring more content to us!

  76. loopbit said

    I'm very impressed! thank you so much!

  77. ssss4 said

    Thanks for the tips and tricks!

  78. wma said

    Awesome! I applied all the tags i learned in the full course. Thank you very much!

  79. James Hostick said

    I think it would be helpful to redo this video with good practice on HTML5 tags like using header, footer, etc. instead of just wrapping everything in div tags.

  80. Faculty

    Jon Friskics said

    @James great idea, I'll talk with the rest of our team to see what they think!

  81. gusshawstewart said

    This was fantastic. A great confidence booster after I completed the front end foundations course, and I was very impressed how you can translate all of this into layman terms! Thank you!

  82. Student #1746022 said

    As simple as this video was, it really helped me understand building a CSS from scratch better than anything I've previously watch. Extremely helpful as a foundation.

  83. templer said

    I have never enjoyed a course so much !!! It really kicks the door open !! A great thank you !!

  84. aleksandra88 said

    Thanks for this video! It was really helpful to me!

  85. ChefAcole said

    This is an awesome video, wraps up the Front End courses from Jon and Drew - love you guys!

  86. Ivan Kusakovic said

    Not Found

    The requested URL /about was not found on this server.

    The link to about page doesn't work to see how it looks.

    Great soup to bits!

  87. Carsten Neubert said

    Was there a specific reason why the font-family was repeated on all those elements instead of just setting it once on the body? I mean it's only one font for the entire page anyway, so it probably makes sense to make that one the default.

  88. Robert said


  89. Faculty

    Jon Friskics said

    @Carsten - looks like we just forgot to refactor that. You're right, in this case we should have just set that on the body.

  90. kinlsweden said

    Absolutely a very good intro. But I agree, why don't use HTML5?

  91. Mochiarion said

    Awesome course! Well detailed and easy to understand for beginners.

  92. Erik Uecke said

    Awesome! Thanks guys! Really appreciate walking through the workflow. Everything makes a lot more sense now. Looking forward to the next Soup to Bits, as I keep learning.

  93. twilliamsjr79 said

    I appreciate this particular Soup to Bits being rather basic. Some people need the extra help with fully understanding html/css. My question is what's the purpose of this video are we to follow along and complete the task on our own? If that's the case why are all the materials related to the site already completed?

  94. solt87 said

    All that typing ul's and li's and others.... This clearly shows why e.g. Markdown can be a really useful tool to wire-frame your HTML with less typing.

    As for the (free) tools, I'm a happy GNU/Linux user, so I don' have to go far for either an ftp client (loads of free clients in repo) or an image editor (Gimp). =)

  95. geeyodi said

    Thanks so much for walking through this. Seeing the process really helps, especially the interplay between the CSS and the HTML. And watching the various changes you make to the code as they take their effects is also really helpful. :-)

  96. grbulk said

    This screencast is very informative. The competence of both tutors is undisputable and their pedagogical teaching style tailored to their audience. Probably you could stress important concepts and best practice techniques a little bit more when applying them: E.g. effect of block vs. inline display, centering of elements, and using divisions/float for aligning text with images etc.. Although you already point your audience to it, you could highlight the importance of these concepts with some verbal or graphical note (e.g. "important concept" or "best practice"). Anyway, it is a pleasure to have you as instructors! Many thanks for your passion and high quality teaching!

  97. Mr_Ace said

    Thank you so much guys for doing this screencast I found it very helpful and I hope you continue to release screencasts like this.

    To put my skills to the test, I attempted to build the site myself without guidance from the video and I was quite surprised how similar my site looked compared to the one in the video. I then went through the screencast to see any details I had missed and to fill any gaps in my knowledge.

    I think for future reference it might be useful to show the end result of what we will be building in the beginning of the video, and then encourage students to attempt to build the site by themselves. Students can then watch the rest of the screencast to fill in holes in their knowledge. This is just an idea I thought of while I conducted my own experiment of pushing myself outside of my comfort zone. I think students can really benefit from attempting to build the project themselves, in contrast to passively watching the video.

    Keep up the good work guys, and please encourage us more often to attempt to build these projects!

  98. tommyg711 said

    This is exactly what i was looking for - a practical application of all of the things I learned in Front-End Foundations. I feel ready to try building a simple site on my own now and I'm excited about continuing to the next section of learning. Thanks a lot, guys.

  99. tommyg711 said

    one more thing...can you recommend a good resource book for html/css? the code school videos are great but it would be nice to have a companion book handy for all of the syntax, properties, etc. Any suggestions?

  100. mjs9105 said

    Very basic walkthrough, which is what I needed.

  101. Mientje said

    Nice example of a beginner webpage. I've built some codepens already but I have still learned a few tiny bits here and there which are going to be very helpful

  102. andrea778 said

    It's absolutely a nice start for a beginner, who doesn't speak english very well. First part and I can practice right away what I have learn. Someone with basics can find it a little easy but then change course :D

  103. Byron Esteban said

    Nice start! Explaining the basic process of sketching content, it helps me a lot!

  104. jlboler said

    Very helpful - nice job guys!

  105. Arthem Dulchevsky said

    Any chance of adding subtitles to this course?

  106. OriolVerdeny said

    I'm just starting with html+css, and this video is super helpful to know where to start! good job for the synthesis

  107. Ivan said

    You sound like beavis and butthead :)))

  108. Bruce153 said

    Very helpful screencast, thank you very much

  109. Iain Jamie said

    Great video, there are plenty of tutorials on how to use various features, but its much harder to find anything explaining why or when you would use them. This has been really helpful!

  110. wils0n7 said

    Thank you! This video was a very helpful.

  111. César Amaral said

    Great video! Simple and easy to understand. Thank you!

  112. Ammopig said

    I'm finding these 'Watch Us Builds' super helpful! It's one thing to do the exercises on our own, but seeing it applied is awesome!

  113. David Mellor said

    Fantastic video. I built my own first website alongside the video, and I find the teaching style great for a beginner like me. Can't wait for the next one.

  114. dadeogba said

    Great video! It was nice seeing the thought process and workflow that goes into building a website.

  115. Student #3332346 said

    Any chance of adding subtitles to this course? +1

  116. Aderianna said

    how do I get a code school sticker?

  117. zhanshai said

    Thank you for the tutorial! Is there a code source for this tutorial? I would love to build the website myself and then check with the code you've written.

  118. Youille said

    Useful video, thank you !

  119. GeekHalyna said

    I am really sad. ;( I don't use MAC. I learnt the basics and now I even don't know how to practice.

  120. CreativeCC said

    Found this really great to get an overall idea of the steps to take. I'm an absolute beginner in all this so for me it was perfect! Looking forward to more videos for advancing and getting clear on further skills. Thank you both!! :-)

  121. Husseinb said

    "right, yup.."

  122. mango777 said

    This is great! This video was very helpful! Thank you!!!

  123. Ali Kaleb Jesús Calderón said

    Thanks for the video! This helped me a lot to start with the basics. You explained every aspect, so its super complete. Great job!

  124. kerriadcock said

    Thank you for this! Simple, but I'm starting at the bottom... so this is exactly what I need.

  125. kritigupta97 said

    Great foundation course everything was explained well and cleared most of the possible questions that can be formed.

  126. Jigar Patel said

    It was a fantastic real life website demo. It was short but definitely faster then me with perfect designing.

    Thank you both of you.

  127. Mahtab said

    Thanks for your great video, practical examples and good explanation. I'm starting also at the bottom and that was really helpful for me.

  128. Neill Vickers said

    Great basic HTML and CSS course. I was able to tweak my profile page based on lessons that I took in Front-End Formations course so I now have a complete profile page that can be used with my person website.

  129. LMNOConsulting said

    when I tried to add "@2x" to my .png's it broke the previews, because it's not in the filenames. why does it work for you when it's not in your filenames?

  130. LMNOConsulting said

    Delete previous comment. I found "@2x" in your png exercise filenames.

About This Screencast

This episode takes the content you learned in Front-end Foundations and gives you more practical knowledge for building a web page. Instructors Drew Barontini and Jon Friskics will plan and code a simple portfolio page with HTML and CSS, and then upload the page so it's available for the world to see.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now