Firstly, I would like to thank the team at FAC! for their support and welcoming hospitality during the application process.
This document will try to highlight and explain the code and provide some insight into my learning during the application. I'm interested in coding projects and collaborating to create future applications.
-
HTML: The index.html structure is a one-page document that is split into HTML5 elements. It includes a (header) for the logo and navbar, a (section) for the main content, an (article) for a brief overview of myself, a (div) for the grid system with photos, and lastly, a (footer).
-
CSS: The display properties use flexbox for the navbar and main content image.
The (p) elements and (img) are also inline using flexbox when in full-screen width and change to block elements at small screen sizes.
Photographs are displayed in a grid using the display: grid property.
Media queries are used at different breakpoints. Most of the styles change to block for mobile displays:
- 850px for tablets
- 600px for mobiles
Colors for styling, I chose a contrasting pink and blue theme. I used border-radius a lot for softer edges on most elements.
- bug's
Imaging sizing and loading was one the main bug's i faced, as moblie sceens and web views load as different speeds, this caused responsive lag onload.
I looked into this topic of resizing images to the dimensions they will be displayed on the website or mobile app. This avoids unnecessary resizing by the browser, leading to faster loading as a solution, however i didn't get around to implementing this to the project.
The main photo is what I built the whole concept around - empowerment and tech. It shows a woman kite-surfing near the beach, enjoying herself and the locals wathcing her and are inspired. I believe people can think outside of the box and try to innovate ideas with action and slow progression.
The opportunity in the online discussion's on the discord app, was not used to its best benefit by my self, however the meet-ups were very helpful for me, as a beginner into computer coding, seeing others applicants progess and seeking advice was very good.
Learning resource: https://www.freecodecamp.org/learn/responsive-web-design/