Drawer

HTML: Accelerated Learning Blog

Hello, everyone!

I'm thrilled to welcome you to the new Web Development 3-class series. Embarking on the journey of crafting your very own website is both empowering and essential for establishing your digital presence, a highly valuable thing to have nowadays.

This project showcases my version of the Class Project, which we will be building throughout the 3-class series. You can follow along as we work on an example blog website that includes a home page, an about page, a featured post page, and a contact page. As a sneak peek, here's a direct link to the example final project:

Example Bloghttps://tognete.github.io/web-dev-course-project/

Feel free to get creative and transform the website into anything you can think of to make the project your own. You could create a portfolio, a personal website, your own blog, or anything you like.

As you've likely noticed, this course revolves around HTML, which lays the fundamental structure of the website. While HTML on its own might not look that appealing, that's why we have the CSS class as the second installment in the series. Here, we'll learn how to add style to our websites. Finally, in the third class, we'll learn how to publish our websites on the web for the world to see.

For inspiration, below are some screenshots of the Class Project blog.

Home Page with navigation, header, content (links to blog posts), and footer:

HTML: Accelerated Learning Blog - image 1 - student projectHTML: Accelerated Learning Blog - image 2 - student projectHTML: Accelerated Learning Blog - image 3 - student project

About Page with navigation, header, content (random text as an example), and footer:

HTML: Accelerated Learning Blog - image 4 - student projectHTML: Accelerated Learning Blog - image 5 - student project

Featured Post Page with navigation, header, content, and footer. Notice the elements in the content of the post: image, video, HTML table, etc.

HTML: Accelerated Learning Blog - image 6 - student projectHTML: Accelerated Learning Blog - image 7 - student projectHTML: Accelerated Learning Blog - image 8 - student project

Contact Page with navigation, header, content (HTML form), and footer. Notice the elements in the content of the page: an HTML form with an exhaustive variety of possible form inputs. The form also has client-side validation!

HTML: Accelerated Learning Blog - image 9 - student projectHTML: Accelerated Learning Blog - image 10 - student project

HTML: Accelerated Learning Blog - image 11 - student project