This was my first project for Skillcrush boot camp on how to create a static website. This was more of a simple project that I had to complete focusing on replicating what I would see if I were to download a pdf layout from a company and/or company and make it come to life on the web. There aren't many special effects nor are there multiple pages. The focus was to create a one-page resume layout. This looks more of a resume-like website but this was a starting of what was to come in future projects on this online boot camp.
At first glance, the image takes up most of the layout. As you can see the navigation is over the photo itself. Also, you will see the intro header in two different colors. In the next section is a description of Jubilee Austin, which I had to use flexbox to create separate columns. The third section showcases her knowledge and skills as a web designer, and the last is how to contact her.
Adobe Dreamweaver (text-editor)
Since I had past experience with the basics of HTML and CSS, that was more of a breeze. But, the challenge was using flexbox and media queries 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 it 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.