On this exercises, we had to transform our static prototype from Project 1 into a fully functional and interactive web page. Review and Analyzed the prototype from Project 1 based on it's layout, typography, color and imagery.
Requirements :
Use HTML and CSS only to translate the design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission.
Prototype Review :
I reviewing back my prototype from previous projects to gain an idea about the layout, font used and color scheme on it.
For the typography, I used Josefin Sans for all of my letters in the prototype. I might just difference it size by using h1, h2, and p. I searched the fonts in google fonts and copied the link.
Fig 3.1 Josefin Sans Fonts Week 10 28/06/2024
For the color, I already have it in Project 1 and I just need to write down the color code in the CSS.
Fig 3.2 Color Scheme Week 10 28/06/2024
Color Code :
Cream for Background : #FFF7FC
Light Blue : #8BG3FF
Dark Blue (Third) : #5755FE
Pink : #FF71CD
As for the layout, I divide it to the the 3 sections which is header, body and footer. I might do a little changed especially the vertical line since I had to ensure compatibility across different devices and screen sizes. I also want to remove the "view more" button in projects because I did not made the separated website for each of my design :>.
Fig 3.3 Layout Analysis Week 10 28/06/2024
HTML Coding :
At first, I created a folder and subfolder named "Images" and I began to exporting all of the images from figma.
Fig 3.4 Images for HTML Week 10 28/06/2024
I started to type all the HTML first before moving to the CSS. Firstly I divided the HTML into around 6-7 class starting from header, about me, language, until footer. I divided some of the border to one class to make it flex displayed.
Fig 3.5 Divided Class in HTML Week 10 28/06/2024
After few hours passed, I finally finished my HTML. I took it long since I want to make sure all the class had divided and to make me easier when do the styling.
Fig 3.6 HTML Progress Week 10 28/06/2024
Fig 3.7 HTML Only Results Week 10 28/06/2024
Styling HTML with CSS :
Finished the HTML, I began the hardest part which is styling (CSS) that took me a lot of time figuring out the problem. I divided the section and do it sequentially. Before do the session, I adjust the text and HTML part first by changing the margin, color, font type,etc.
Fig 3.8 Top Header and Body Part Week 10 29/06/2024
- Header Part
I coded the container first by adjust the background color, border radius, margin, position, etc then I moved to the row which is the class for all of my content. I applied display : flex and the padding.
I added the font-size and link hover and adjusting my image size to a little bit bigger and make sure it align in the center. As I want to create it Interactive. I used img transition 0.3 ease and transform : scale (1:1) so the image will popped up when the cursor move to it.
Fig 3.10 Header Part CSS Week 10 29/06/2024
- About me & Language Part
On this part, I started to code the title (.pink container) and the borderbox. I used flex again for aboutme-language class as my prototype appeared side by side. I'm finding difficulty when I want to put the pink title in the middle of my border box line, so I searched the tutorials and luckily I found it on this link.
Fig 3.11 Progress Attempts Week 10 29/06/2024
The key to make it stack is in the position. The .pinkcontainer position should be absolute and adjust the transform to translate(-50%,-50%) while the rest is positioned alternative. Below are the code for these sections.
Fig 3.12 All code on About me - Language Part CSS Week 10 29/06/2024
- Education & Experience
Since I found it boring to just displayed the content on the website, I had an idea to create it looks like an interactive timeline that could be interacted. I searched the Tutorial in Youtube and I found these one is interesting design :
Vid 3.13 CSS Responsive Timeline Effect Using HTML & CSS Only Week 10 29/06/2024
Though it was easy to do until I found it is really DIFFICULT to code it especially the width, margin, padding and left side. I struggled a lot with this part and re-watched again the video until I finally managed the education part but not the experiment.
I tried to made the experiment part go inside the box by adjusting the width, left, margin, padding and all was failed. So I discovered it by deleted the flex first to know the problem. There were no problem in flex and I looked back to the HTML and I realized that I forgot to put the "bodyy" class in experiment part (only in the education). The "bodyy" class contains flex and center aligned and that's why the flex did not worked in experiment part only. (sigh..).
At the end, I managed the content inside by adjusting the margin on it.
Fig 3.15 Education - Experiment Final Result Week 10 29/06/2024
Below are the main code for border, content and the next images is the styling & effects to made it responsive. Both had same code and I just adjust the class and id name.
Fig 3.16 Main code for Education - Experiment CSS Week 10 29/06/2024
For this part, I repeated the same progress from About me - Language part. By using flex and padding, I managed to created the content continued from previous part. For the software part, I used progress bar to filled up the value and progress container as the bar value. I used overflow : hidden to make it stack became one bar.
Fig 3.18 Attempts on Software - Honors part Week 10 29/06/2024
On the honor part, I adjusted the year font size first because it was too small then I divided it into two class which is "award1" and "award2". award1 content the image and the year meanwhile in award2 content the information of the honors. To create it, I displayed flex in award1 and for award2 I adjusted the margin-left size.
These part is not really difficult since I already progressed so far with the previous part. Firstly I divided the section into three class. Each class contents the Title, Year and Images. I use flex and adjust the gap & margin on it. I also repeated the process to create the images popped up by using transition and transform scale in my projects images.
Fig 3.20 Projects Result Week 10 29/06/2024
Fig 3.21 Projects CSS Week 10 29/06/2024
- Back to Top
I confused at first because I do not know how to combined the button and the images in one line together. I do searching some tutorials and I found out it was the same tutorials when I adjust the .pinkcontainer for the title. Use position relatives for the images and position absolute for the button. After that, code the top (position button to vertical), left (position button to horizontal) and transform : translate to made it in the middle of the line images.
At last, I coded the button link (a) and (a: hover) to give an effects.
Fig 3.22 Back to Top Results Week 10 29/06/2024
Fig 3.23 Back to Top CSS Week 10 29/06/2024
- Footer
I created a container first with different color than before. After that I put all of my content in the container. I used flex again (Most of my layout use flex probably) to made it side by side and following the last step which is changing the link (a) colors and the hover on it.
Fig 3.25 Final Website Layout (PNG) Week 10 29/06/2024
*Notes : Code can be found in right click - view page sources.
FEEDBACK
No feedback were given on this project.
REFLECTIONS
This project has been a valuable learning experience, reinforcing my HTML and CSS skills and providing practical insights into web development by using Dreamweaver that streamlined the coding process, allowing for a focus on creativity and refinement. Throught the progress, many things were happened such as successful and failed trial. Progress is about we learned something so it's not a problem when occuring some trouble when coding. From the problem and obtain the solution, I learned a lot on it.
Reflecting on the project, I am proud of the progress made and the final outcome, and I am hopefully eager to apply these skills to future projects.
.png)
Comments
Post a Comment