This project was about copying the styling from a static page and making the page responsive. This is an Introduction in to CSS and HTML project.
That style that is be ing copied can be see from the picture below. The theme has been changed however the positioning will be the overall goal as well as being able to be responsive.
project guide
- The first step way to make a wire frame this was done in Excalidraw. This was an attempt to capture the project overall concepts and how many parts where needed.
wireframe
-
my goal then was to make a mock up in html of all that parts I thought needed to be in the project. This was followed by then sectioning out each part of the static page into multiple sections both vertically and horizontally
-
I then wanted to get photos to best see the manipulation of the CSS. I got the photos from "https://www.flaticon.com/authors/smashicons" title="Smashicons" and "https://smashicons.com/" title="Smashicons".
-
In total I have around 190 lines of HMTL
-
I then started to work with the CSS this started with researching both flex and grid. I started the project with flex only and ran into issues with overlapping icons. I looked into 3rd party websites such as facebook and noticed that they where using flex. however when condensing to 300 px the images on that site also started to smash together.
-
Unable to get where I wanted with flex I scrapped the idea and moved to grid. With this I was able to get my picture cards in place and started to see progress. however I still ran into an issue with the header.
-
I started to fix this with a combo of flex and grid.
- getting familiar with html
This was my first major project with HTML and I found out some big lesson. I was making everything a button right of the start of the project. I found that when I was attempting to size the buttons in css I had issues. This resulted in me learning about A tags. Additionally when I first started to get my html up and running I had half the section and classes I needed this resulted in complex targeting with flex. it resulted in going back to the drawing board and making more sections to make moving each element much easier.
- Learning about flex and grid
I was able to get exposer to both flex and grid with this project. I stared using flex only with little results to show for it. After hours of work I went to give grid a try. I was able to get the grid to work however I still had some issues that were not easily solved with grid. This resulted in a combo of using both grid and flex. A big example of this is seen in the profile login icon in the top right. I used flex to get that to stay in place however the picture cards use grid.
- Using CSS with HTML
This project main goal is to use HTML with CSS to make a responsive webpage. I would often keep the index.html open to check the responsiveness after each change I made.
- Using the Dev tools
The Dev tools have been a huge part of this project. like I mention above I used the dev tools to compare what other major companies where doing on the sites they had up. In addition I would test out changes to my file with the dev tools before ever placing the changes into my main file.
- Michael Walker Link to project
I would like to acknowledge our instructors, Hannah Hudson, Casey DallaValle, and Scott Ertmer for their guidance and help during the course of the project. Additionally I would like to thank all the members of the 2006 Turing frontend class for all the support and assistance as well as my mentor Nathaniel Foster.
- Project spec & rubric can be found Here