Now streaming live

Css grid Think you have what it takes?


#1

Hello everyone my name is Corvox and I have been deigning sites since 1993, I have a desire to get back into developments. Here is my first nights attempt at going from a PSD design to a HTML and CSS website.

Working with CSS grid reminds me of the way we used to design and develop sites in the 90’s with tubular data. Tables and frame etc.

I could use some help though.

I design the sites to be 1600px in width with unlimited Height while designing the site.

I created a 16 column grid that will be 68 rows at 100px each unit.

I figured this would allow me to visualize my design into how I need to lay the grids out.

My Staging site is staging.412mediadesign.com here you can see my results.

I am pleased at my first attempt.

How ever now after designing what I have, I noticed it’s not full width.

My questions are.

  1. can I fix this to full width with out needing to change each grid object?
  2. Is there a better and more standard way for me to achieve what I want?

I have noticed some elements were in full screen and I had to do small and tiny hacks (well I kept tweaking till it went into place on my screen).

My next question is for Mobile.

  1. the mobile site repeats the hero image vertically. How can I stop that?
  2. the mobile site is off on a few segments of the design. How can I fix that?
    3.Again the width I assume would had fit the screen since I design everything at 1600px wide. But its only feeing up roughly half the screen on an Iphone 7

My next question is.

If one is doing all this by hand with notepad++ (lets put it this way, my syntax errors were obsolete using and tags, dated me to a piece of software!) is there anything other then https://codepen.io/pen/# that might allow me better visual aids from Desktop>mobile views?

I have not been part of development of sites since you coders made things so difficult, now the CSS grid is around, I feel its my time to start learning development again.

Any feed back is welcome, and please remember if you change my code, comment the HELL out of it, so I can learn from what you did, and others can teach me what you did wrong and why.

I am a self taught man, have learned a lot and forgot more then most have learned.

In 12 hours I got this far with design and coding of this site. But I can not learn it alone any longer, since it takes me more time to search for an answer I do not know I need yet.

So lets learn and teach each other during my struggles.


#2

Should say use of font and center tags dated me to a piece of software lmao

As you can see I used DIVI to get a basic design going then gave myself 14 days to get a responsive mobile friendly design made up using the rough DIVI layouts.

So any help is welcome for this old dog, who still learning new tricks!


#3

Welcome to the Webflow forum!

Do note that this forum is for websites/projects created in Webflow only.

Could you please edit Screenshot_2017-08-16_140811 and provide ALL the necessary details including your project read-only link in your post so we can take a look at your project?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.

Hope to hear from you soon. Thanks!