A multi-page website built using HTML
and CSS
skills which includes custom images, layout, and styling. Along with the webpage design considerations, I worked to appropriately structure the files, as well as use proper formatting & style. The project also focusses on using Flexbox and Grid systems to make the page responsive.
This project was built from scratch and is a part of Udacity's Refreshed Front-End Nanodegree program.
The project will be evaluated by a Udacity code reviewer according to the Personal Blog Website project rubric
No additional tools are required apart from a text editor of your choice
No additional installation is required for this project
-
Create
index.html
as the landing page with the following:- Navbar with links to other pages
- Cover image
- Basic page content
- Footer with social media links
-
Create
views
directory with the following pages:AboutUsComponent.html
with about-us infoBlogsComponent.html
with all blog postsBlogPostComponent.html
about one of the post
Reuse navbar and footer code
-
Create
css
directory with the following files:styles.css
with the global styling
Page Specific CSS
aboutus.css
blogpost.css
blogs.css
Component specific CSS
footer.css
navbar.css
Import all the modularized css files to
css/styles.css
-
Create
js
directory with the following file:app.js
for adding navbar toggle button functionality
For details now how everything has been implemented, refer the source code.
- Only first blog post has a dedicated page for it, rest are all dummies.
- Flexbox and Grid are used for all pages.
- There are 2 major pages for the website:
Landing page
andBlogs Homepage
- The project also contains a dedicated
About-Us
page.
- Open the project through the
.zip
file provided and extract the files.Open
index.html
in the browser of your choice.
- Responsive navbar from itnext
- Images used from Pixabay
- Blog Content from The Nomadic Matt