This project was all about creating a fully responsive website. This was the third main website from Skillcrush that I had to replicate as assigned. I had to combine everything I learn from flexbox, inserting images, social media icons, maps, and media queries. Although this website is not in detail, surfing through the website gives the audience an idea that the website is about camping and experience nature.
At first glance, the image of a woman will capture your eye. As you scroll down the home page, you will see where you can type in your name to sign in to the website. Once you get to the feature section, there will be logos on top of the small description. The cool part is when you minimize the screen, it will be one column. As you widen the screen the columns become two and, once it gets to full width, there will be three columns and two rows. I had to use flexbox but, the outcome made the homepage that much more professional-looking.
On the about page, you have text with fictional writing. The best part was inserting a map into the website. Since it isn't a real business, I had to use a random location to complete this page.
The faq page is in gibberish like the rest of the website, but the focus was using the flexbox layout. Overall, this Skillcrush project was a challenge but the outcome only prepared me for more advanced web responsive websites.
***** The cool effect is the green hover on the navigattion bar *****
Adobe Dreamweaver (text-editor)
Since I had experience with the basics of HTML and CSS, that was more of a breeze. But, the challenge was fusing flexbox and media queries in order to create three different layouts to be cohesive to the device used.
- Flexbox is a challenge which I need to work on more.
- Margins and Paddings
The first time I did this project which took me an entire month to understand new concepts to create a more advanced layout. Even then, there were so many errors with how I coded this site that I had to start over again and see what went wrong. Honestly, I am glad that this happens so, that I know what not to do for future projects. But, once I completed this project, which took me less than three weeks to complete, on a second try. I was so proud of myself.
-
Try to keep widths 100%
-
Use margins and paddings with ems and rems NOT pxs.
-
Be mindful with how you use the because it can make a difference