Added the logo & form to Google homepage replica (05/04)

[anitabe404]

Motivation/Problem Statement 💭❓:

I am working through The Odin Project's Foundation course for Web Development. The current project is to build a mockup of the Google homepage using DevTools and information from the lessons thus far. (HTML & CSS only since that's what's been covered so far)

Today's Goal/Solution 🥅:

Today I planned on fixing some alignment issues I ran into when styling the header and footer. As well as continuing to add the necessary HTML content for the rest of the page.

---

Result 🍓🍌🍉:

I managed to get the logo and form elements onto the page. (Previously I only had the header and footer content) Styling the form went a lot smoother than styling the other content did since my approach was a lot better (i.e. I started with a wireframe before writing any code).

---

Observations & Next Steps 🔭👣:

I realize that I need to spend more time learning the basics of CSS. Over the next few days, I will be working through W3Schools CSS tutorials to fill in the gaps that I have.

Overall though, I am quite happy with my results so far. I'm getting better at CSS and learning a lot each day. I will continue on with my current strategy, but in the future, I may start with a clean sheet and redo the project to make sure I really understand what I did.

---

References 🔗:

For any newbies learning CSS, definitely check out the W3Schools CSS Tutorial.

[r002]

This is so cool! Welcome to the group! So glad to have you aboard! Study buddies! 😄

Are there any screenshots of your WIP or wireframes that you're willing to share, btw? Would love to see the progress!

One day down, 29 (or 99!) more to go! Let's do this!! 😀✊

[anitabe404]

I was trying to avoid sharing my basic, newbie wireframes and screenshots, but since you asked... 😂 I don't have screenshots from the beginning, but here are some of them from when I was replicating the search form of the Google homepage.

Pics of my sketches/planning in my notebook.

This is when I first started adding the components of the search form.

This is after I applied some CSS to get it centered and looking more like the actual Google search form.

All of the weird coloring is there as a visual aid to help me see how my divs are behaving (styling is still so confusing to me).

[r002]

Awesome! Thanks for sharing these pics and screenshots! I've always found it super-intriguing to see how others work. Eg. How folks brainstorm, sketch out initial designs, what they decide to tackle first, etc. All that "process stuff" is fascinating to me for some reason, haha. 😄

Keep up the great work though! Definitely looking forward to your progress update for Wednesday! 👏👍