Project one was to find a mockup of a website and recreate it using HTML and CSS. This is an exercise in being able to take a representation of what a client may want their website to look like and create a beautiful and functional design.
I had several goals for this project:
- Select a mockup design.
- Create a wireframe to plan out the layout of the site.
- Write HTML code.
- Write CSS code to stylize and position the contents.
- Make the website responsive using media queries.
- Push repository to GitHub. In the future, I would like to make the following improvements:
- Implement Javascript for the burger menu and other elements
Below is a screenshot of my project.
And this is a screenshot of the original page.
This website features a top navigation bar with a logo and a burger menu, a banner with further links to other pages of interest, a main body containing the majority of the content about the subject of the page, and an aside that breaks down the details of the main text into simplified bullet points. Below, there is a portfolio that features eight images. Finally, there is a footer with links to social media and more links to other parts of the site. The structure of the page was created with a combination of CSS flexbox, grid, and positioning.
The website is made responsive with media queries in four levels: desktop, laptop, tablet, and smart phone users should all be able to enjoy and navigate the site equally. All of the coding for this page was done in HTML and CSS.
This project includes a single webpage. It can be accessed here.
If you would like to contribute code, identify bugs, or propose improvements, please fork this repository and submit a pull request with your suggestions. Below are some helpful links to help you get started: